vue的安裝及簡單工程創建

1.幾個概念

npm: Nodejs下的包管理器。
webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備，比如資源的合併和打包。
vue-cli: 用戶生成Vue工程模板。（幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只需要 npm install就可以安裝）

2. 安裝步驟

2.1 安裝nodeJs

下載鏈接：https://nodejs.org/en/

推薦使用第一個鏈接，比較穩定。下載後，雙擊開始安裝，如下圖：

點擊Finish完成

安裝完畢後，可以通過命令行卡是否安裝成功，如下：

2.2 配置npm的本地倉庫

npm的本地倉庫跑在系統盤c盤的用戶目錄了(沒見到npm-cache是因爲沒有用過，一使用緩存目錄就生成了)，我們試圖把這2個目錄移動回到 D:\Program Files\Nodejs

然後運行如下兩條命令：
npm config set prefix “D:\Program Files\Nodejs\node_global”
npm config set cache “\Program Files\Nodejs\node_cache”
如圖，可以看到路徑已經變化：

注意，此時，默認的模塊D:\Program Files\Nodejs\node_modules 目錄
將會改變爲D:\Program Files\Nodejs\node_global\node_modules 目錄，
如果直接運行npm install等命令會報錯的。
我們需要增加環境變量NODE_PATH 內容是：D:\Program Files\Nodejs\node_global

配置好後，使用vue查看版本號，如圖：

2.3 使用淘寶NPM 鏡像

大家都知道國內直接使用npm 的官方鏡像是非常慢的，這裏推薦使用淘寶 NPM 鏡像。

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

配置成功後，我們可以通過 npm config list 顯示所有配置信息，如下：

輸入命令npm config list 顯示所有配置信息，我們關注一個配置文件
C:\Users\Administrator.npmrc

用文本編輯器打開後如下，可以看到剛剛配置的內容：

輸入命令檢測下可行不可行，cnpm config get registry

3. 項目初始化

3.1 安裝vue-cli
cnpm install vue-cli -g //全局安裝 vue-cli

查看vue-cli是否成功，不能檢查vue-cli,需要檢查vue

選定路徑，新建vue項目，這裏我是在D盤新建了vueDemo文件夾，cd目錄路徑

下面我一項目名爲sell新建vue項目

vue init webpack ”項目名稱“

接下來，就是再安裝下項目依賴，運行項目，就可以在瀏覽器打開了，如下：
cnpm install —目前好像是已經自動安裝依賴了，此步驟可以省略，直接進入下一目錄，執行運行語句。
cnpm run dev
注意：這裏要在新建的文件夾目錄，即這裏的 D:\vueDemo\vueDemo 目錄下進行執行命令。

至此，一個完整的工程就可以了。

nmp下新建出來的vue01的目錄描述：

4. 遇到的問題

4.1 安裝完vue-cli，在命令行下運行報

	vue : 無法加載文件 D:\nodejs\node_global\vue.ps1，因爲在此係統上禁止運行腳本。有關詳細信息，請參閱 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解決辦法：

到D:\nodejs\node_global目錄，把vue.ps1刪了

4.2 Node Sass運行錯誤

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (72)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.11.0
    at module.exports (D:\SVN_Kingnew\code\store_chain_pc\trunk\kingnew-dian-chain\node_modules\node-sass\lib\binding.js:13:13)
    at Object.<anonymous> (D:\SVN_Kingnew\code\store_chain_pc\trunk\kingnew-dian-chain\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.sassLoader (D:\SVN_Kingnew\code\store_chain_pc\trunk\kingnew-dian-chain\node_modules\sass-loader\lib\loader.js:24:22)

一定要在當前的工程目錄下執行語句：npm rebuild node-sass，升級node-sass 的版本。

參考鏈接：
https://www.cnblogs.com/lgx5/p/10732016.html
https://www.jianshu.com/p/02b12c600c7b