更新20200617：

vue create your_project

• 參考

一、簡介：

本框架搭建主要是基于Nodejs+Vue+webpack搭建的一個Vue框架.

其中nodejs為vue2.0的運行環(huán)境，其npm包管理器可為vue2.0項目下載管理各種依賴包;(如：npm install 插件名 --save)

webpack可將vue2.0項目所用的資源進行壓縮打包，將壓縮打包后的webapp資源直接放到服務器上即可訪問。

二、框架搭建：

1.下載安裝node.js

下載地址：http://nodejs.cn/download/,下載好之后，直接一鍵傻瓜式安裝即可。

2.更改npm為淘寶鏡像：

打開cmd，直接執(zhí)行$ npm install -g cnpm --registry=https://registry.npm.taobao.org

這樣能解決因為被墻，所以下載環(huán)境依賴很卡很慢的原因。安裝好之后，執(zhí)行cnpm -v執(zhí)行，檢查是否安裝成功。

3.執(zhí)行cnpm install npm -g更新npm

執(zhí)行cnpm install npm -g

因為隨nodejs下載下來的npm不是最新版本，而且后面插件的下載需要依賴最新的npm

4.更改npm全局安裝包的位置：

執(zhí)行$ npm config set prefix "C:/nodeModules"

一般默認安裝就在C盤，但如果你是機械硬盤，最好還是將其裝在其它盤（如D盤），但是這么做，會出現(xiàn)一個問題，當你執(zhí)行上述步驟2更改npm為淘寶鏡像操作時，再通過cnpm安裝插件，會報cnpm不是系統(tǒng)指令，解決的方法暫時沒找到，但是有其他替代的解決方法：

$ npm config set registry https://registry.npm.taobao.org

（直接將本地的npm倉庫指向淘寶的鏡像地址， 配置后可通過下面方式來驗證是否成功npm config get registry或npm info express）

5. 全局安裝 vue-cli（全局安裝完成之后，就可以直接通過vue init webpack my-project創(chuàng)建新的vue項目）

執(zhí)行指令$ cnpm install -g vue-cli

（win10系統(tǒng)下，因為C盤存在訪問權限限制，因此執(zhí)行下述代碼提示報錯：EPERM: operation not permitted；解決方法是：通過目錄找到C:\Windows\System32\cmd.exe，然后右鍵單擊，出現(xiàn)選項，選擇以管理員身份運行即可，然后再次輸入安裝命令：npm install –global vue-cli即可安裝成功。通過輸入vue，如果能出來命名則安裝成功。））。

成功之后，再執(zhí)行vue -V確認是否安裝成功。(記得這里的V必須大寫)

6.最好在定義的全局安裝包的位置（即上述C:\nodeModules）創(chuàng)建新的vue項目：

$ cd nodeModules

（cd表示進入當前文件下的文件夾項目）

cd 進入nodeModules（如圖：）

image

7.創(chuàng)建一個基于 webpack 模板的新項目：

$ vue init webpack my-project（my-project是自定義的項目名，可以自行定義）

image

image

==>project name如果沒有輸入默認你上一步創(chuàng)建的項目名my-project

image

==>Runtime + Compiler: recommended for most users 運行加編譯，我也不知道這個是什么鬼，選它。

image

==>vue-router路由，這個東西后續(xù)路由跳轉需要用到

image

==>這是一種用于規(guī)范編輯的插件，在我目前的項目中，都沒有好好規(guī)范編輯...所以有時候看到自己的代碼，真是慘不忍睹，所以ESLint還是要好好研究。

image

==>就選擇標準版本吧

image

==>是否安裝單元測試，我也不知道這是什么鬼，我選擇了No，這個還需后續(xù)研究。

image.png

==》是否安裝e2e測試，

我也不知道這是什么鬼，我選擇了No，這個還需后續(xù)研究。

image

==>這樣，一個基本的Vue結構就搭建成功了。

8.安裝依賴，走你（如上圖紅色邊框提示）

$cd my-project（進入上面創(chuàng)建的文件夾項目內(nèi)）

$ npm install（上述如果你修改了npm淘寶鏡像，則可以執(zhí)行cnpm install進行全部依賴包安裝）

$ npm run dev（該指令表示本地運行網(wǎng)頁，如果順利，會自動打開瀏覽器，彈出如下網(wǎng)頁內(nèi)容（http://localhost:8080/#/），如果這樣就表示環(huán)境搭建成功了~~，當我們不用進行數(shù)據(jù)交互時，可以直接在本地調試網(wǎng)頁的樣式等等，而且vue-cli幫我們默認設置好了熱加載，只要我們在源碼進行代碼修改并保存，網(wǎng)頁會自動幫我們進行刷新。）

image

==>安裝全部依賴

image

image

啦啦啦~~這樣基本的項目就搭建完成了。

補充：

1. 當搭建的環(huán)境需要用到一些其它插件時，可以通過

cnpm install "插件名" --save -dev安裝。

npm install vue-resource --save（如安裝vue-resource插件，vue-resource是一個專門用于ajax請求的插件，很好用!!!所以一定要安裝。）

--save-dev是你開發(fā)時候依賴的東西，--save是你發(fā)布之后還依賴的東西。

安裝成功后，可以在package.json文件看到安裝好的目錄

2.淘寶鏡像設置參考文獻：http://www.cnblogs.com/dahe1989/p/7068046.html

3 單獨更新某個依賴包：

==>更新全局包：

npm update <name> -g

==>更新生產(chǎn)環(huán)境依賴包：

npm update <name> --save

==>更新開發(fā)環(huán)境依賴包：

npm update <name> --save-dev

（如下，更新vue-cli）

image

image.png

image.png

4.馬克：ESLint、單元測試、e2e測試、為什么有些項目vue-router裝在--save，有些裝在--save-dev