首先

• 首發博客: 我的博客

• 項目源碼: 源碼

• 項目預覽: 預覽

因為個人的喜好和工作的需要,一直想寫這樣的系列教程，今天如愿以償，但是我是第一次寫，有什么錯誤，和指教的地方，歡迎吐槽，謝謝!

1.1.1 安裝 Node.js

一般來講, 可以用以下三種方式安裝 Node.js：

• 通過安裝包安裝(Windows 和 Mac 用戶推薦)

• 通過源碼編譯安裝(Linux用戶推薦)

• 在 Linux 下可以通過 yum|apt-get 安裝

Windows 和 Mac 安裝：

第一步:

打開?Node官網，往下面拉，就可以看到有兩個下載選項：

• 左邊的是 LTS 版,就是長期支持的穩定版本，一般人都用這個版本。

• 右邊是最新版本，支持很多最新的語言特征，對es6有更多的支持。(可以在?http://node.green?上面獲取到 Node.js 各個版本對 ES6 的支持情況。)
  我們選擇左邊的版本點擊下載。

第二步:

下載好了安裝包,打開,一直點擊 繼續 就可以安裝好了。

第三步：

安裝成功后，打開終端輸入下面的命令。就可以看到自己的node 和npm 安裝好了沒有。

### Linux 用戶安裝：

Linux 用戶可通過源碼編譯安裝：

curl -O https://nodejs.org/dist/v6.10.3/node-v6.10.3.tar.gz tar -xzvf node-v6.10.3.tar.gz cd node-v6.10.3 ./configure make make install

備注: 這里可能會發生因為缺少依賴包而產生的編譯錯誤。這里遇到錯誤的會就自行google了。

1.1.2 淘寶 NPM 鏡像

• 因為在墻的原因啊，國內直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。

• 淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。

第一步：安裝

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：使用

支持 npm 除了 publish 之外的所有命令, 如:

$ cnpm install [name]

1.2.1 vue-cli

介紹

vue-cli是官方的項目構建工具，一個簡單的構建工具，通過幾個默認的步驟幫助你快速的構建Vue.js項目。

第一步 安裝

npm install -g vue-cli

如果用npm下載速度慢，可以使用cnpm.

第二步 選擇模板

所有的官方項目模板在vuejs-templates。如果有新的模板添加進來，你需要使用下列命令，

vue init <template-name> <project-name>

也可以使用 vue list 來查看官方模板列表。

目前可用的模板包括：

• browserify--全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試

• browserify-simple--一個簡易的Browserify + vueify，以便于快速開始。

• webpack--全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試

• webpack-simple--一個簡易的Webpack + vueify，以便于快速開始。

• simple?- 單個HTML文件中最簡單的Vue設置

1.3.1 第一個vue項目

第一步 生成項目

我們的項目選擇webpack,使用以下命令

vue init webpack vue-todos

前面就一直點回車就行了，后面使用ESLint,測試就選擇no就行。

第二步 運行項目

輸入下面的命令就可以運行這個項目了。

cd vue-todosnpm installnpm run dev

這是時候就會自動打開端口 http://localhost:8080/#/
你會看到這樣的頁面。那我們就成功了。

總結

以上是生活随笔為你收集整理的学习不一样的vue实战(1): 环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。