vue開發環境搭建win10

需要安裝nodejs, webpack@2.2.1, babel-cli,  vue-cli

1 安裝nodejs

現在版本默認會安裝nodejs 和 npm包 和 配置環境

2 檢查是否安裝成功，在命令行中輸入

顯示成功則正確

 

3 安裝webpack@2.2.1 為什么要限制版本，是因為自己在安裝最新版本時（3.8.1）出現各種問題，一直安裝不上。

npm install -g webpack@2.2.1

 

4 安裝babel-cli, 編譯工具將ES6代碼轉換成ES5代碼

npm install -g babel-cli

 

5 安裝vue-cli

npm install -g vue-cli

 

6 安裝預設babel-preset-es2015

npm install babel-preset-es2015 --save-dev

6.1 配置文件.babelrc

在項目的根目錄創建一個文件名為 .babelrc 的配置文件，該文件用來設置轉碼規則和插件，基本格式如下:

{
    "presets": ["es2015"],
    "plugins": []
}

 

6.2 babel 基本用法

# 轉碼結果輸出到標准輸出
 $ babel example.js

 # 轉碼結果寫入一個文件 (--out-file 或 -o 參數指定輸出文件)
 $ babel example.js --out-file compiled.js
 或者
 $ babel example.js -o compiled.js

 # 整個目錄轉碼 (--out-dir 或 -d 參數指定輸出目錄)
 $ babel src --out-dir lib
 或者
 $ babel src -d lib

 

6.3 安裝新增API 轉換包， babel-polyfill

npm install babel-polyfill --save-dev

 

7 如果想使用 webstorm 開發ES6文件，可以進行如下設置

將Arguments 中 --presets env 改成 --presets es2015。這樣就會自動將ES6 轉換成ES5 文件了。

 

8 添加對 VUE 的支持