Vue.js開發環境搭建（安裝過程遇到的問題）

       網絡上關於Vue.js的安裝過程有不少介紹，這裏很少贅述，這裏只是記錄本身安裝過程和遇到的問題

      1 首先安裝node.js 到官網下載node.js安裝包，安裝過程和通常軟件沒有區別。安裝完成後到終端查看版本號，若以下圖所示，表示安裝成功。

         

     2.node.js環境變量新建

 　　其實安裝完node，就自動在path裏增長環境變量，可是爲了之後的本地部署項目，咱們須要找到node.js的安裝根目錄，在當中新建「node_global」和"node_cache"兩個文件夾。

      注：npm是nodejs的一個模塊化管理工具，如今已經集成到nodejs中了，不須要再另外安裝，須要首先配置一下npm的全局存放路徑以及緩存路徑，這裏是將兩個文件夾創建在了nodejs的根目錄下

npm config set prefix "D:\Program Files (x86)\nodejs\node_global" 

npm config set cache "D:\Program Files (x86)\nodejs\node_cache"

    將這兩個目錄添加到window環境變量path下，其中 node_global 目錄下包含vue命令所需的文件

      3 安裝webpack     

1 npm install webpack -g

       4安裝vue腳手架

1 npm install vue-cli -g

         注意上面兩部安裝過程會出現：

1 npm WARN deprecated tough-cookie@2.2.2: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130 
2 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\browser-sync\node_modules\chokidar\node_modules\fsevents)
3 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

         開始覺得這是安裝不正確，後來在overstockflow看到大神回覆：

 1 The warning message is just a warning message and not an error. It does not affect the application.
 2 
 3 It is a log message that an optional dependency could not be installed because it is not supported/needed on your current platform/cpu-arch. For example the package fsevents is often used as optional dependency but fails on any system that is not a Mac.
 4 
 5 To show what package is throwing this message, run
 6 
 7 $ npm install --verbose  8 This warning could also be triggered by packages having an engine set to something lower than what you are running. You can try
 9 
10 $ pm_config_engine_strict=false npm install
11 to get around this

從新打開cmd,這個時候打vue命令顯示正常。

        5.這個時候開始新建vue項目，首先cmd轉到某個目錄下（保存新建的vue項目的文件目錄）       

1 vue init webpack-simple 工程名字<工程名字不能用中文>

       6.安裝項目依賴：   

npm install vue-router vue-resource --save　

       7.啓動vue項目

 npm run dev 

  出現 ： 'cross-env' 不是內部或外部命令，也不是可運行的程序

            

 

    vue框架須要在在package.json的scripts標籤下配置一系列命令

 1 {
 2   "name": "vue0002",
 3   "description": "A Vue.js project",
 4   "version": "1.0.0",
 5   "author": "",
 6   "private": true,
 7   "scripts": {
 8     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10   },
11   "dependencies": {
12     "vue": "^2.3.3",
13     "vue-resource": "^1.3.4",
14     "vue-router": "^2.7.0"
15   },
16   "devDependencies": {
17     "babel-core": "^6.0.0",
18     "babel-loader": "^6.0.0",
19     "babel-preset-env": "^1.5.1",
20     "cross-env": "^3.2.4",
21     "css-loader": "^0.25.0",
22     "file-loader": "^0.9.0",
23     "node-sass": "^4.5.0",
24     "sass-loader": "^5.0.1",
25     "vue-loader": "^12.1.0",
26     "vue-template-compiler": "^2.3.3",
27     "webpack": "^2.6.1",
28     "webpack-dev-server": "^2.4.5"
29   }
30 }

   解決方式 ：

1 安裝cross-env:npm install cross-env --save-dev
2 
3 在NODE_ENV=xxxxxxx前面添加cross-env就能夠了。

  從新運行    npm run dev 

            

 首先檢查 webpack是否安裝成功： 

咱們打開CMD，輸入node,
再鍵入require('webpack')

       

這裏就不理解了，前面第3步全局安裝了webpack 

嘗試 1：去掉-g 參數的全局安裝

npm install webpack-dev-server;

嘗試2：做爲本地依賴安裝

npm i -D webpack;

 

再次運行 ： 

npm run dev  （哎呦我去！！）;

     

解決方案 ：嘗試運行：

npm install babel-loader --save;

   

再次運行：

npm run dev;

  

到這裏，嘗試運行：

npm install babel-core --save;

安裝完成後繼續：   

npm run dev;

   

這是由於.babelrc文件裏的配置：

{
  "presets": [
    ["env", { "modules": false }]
  ]
}

運行 ：

npm i babel-preset-env --save-dev  ;

從新運行：

npm run dev;

   

安裝  vue，vue-loader：

npm install vue --save-dev;

npm install vue-loader --save-dev;

  

安裝  vue-template-compiler：

npm install vue-template-compiler --save-dev;

   

      安裝 （其中node-sass module沒法安裝的話可使用後面淘寶鏡像安裝）：

npm install css-loader --save-dev;

npm install sass-loader --save-dev;

npm install file-loader  --save-dev;

npm install node-sass -g --save-dev( npm install node-sass --registry=http://registry.npm.taobao.org);

    注意code-sass這個module須要Python環境，這裏Python環境搭建就不說了，這個比較坑，要在vue安裝目錄下node_modules\npm安裝