學習不同的vue實戰(1): 環境搭建

首先

• 首發博客: 個人博客

• 項目源碼: 源碼

• 項目預覽: 預覽

由於我的的喜愛和工做的須要,一直想寫這樣的系列教程，今天如願以償，可是我是第一次寫，有什麼錯誤，和指教的地方，歡迎吐槽，謝謝!

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-todos
     npm install
     npm run dev

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