1、 安裝nodejs，檢驗是否安裝成功命令：node –v 查看node版本 npm -v 查看包管理器版本

2、 配置npm鏡像，命令如下：

npm config rm proxy
npm config rm http-proxy
npm config rm https-proxy
npm config set no-proxy .huawei.com
npm config set registry http://w3cloudnkg-sit1.huawei.com/ccloud/nexus/content/groups/npm-all/

3、 全局安裝webpack，命令：npm install –g webpack。因為打包編譯需要使用webpack命令。

4、 將webpack配置文件copy到項目根目錄，然後執行命令：npm install。Npm會自動安裝配置文件中指定的所有依賴插件。

5、 運行命令 npm run buildDebug 進行編譯打包，會在根目錄生成產出目錄build

6、 配置Webstorm支持es6語法，步驟如下：

A、

B、

7、 配置webstorm支持vue文件及語法高亮，步驟如下：

A、

B、選擇vuejs-plugin.zip，

C、settings》editor》fileTypes，選擇html添加*.vue

使用過程中的問題：

1、 Webstorm啟動本地服務器調試頁面時，提示如下錯誤：

解決方法：勾上下圖所示選項

2、 babel-loader的使用註意：

配置loader：

/*將es6語法轉換成es5語法*/

{

test: /\.js$/,

loader: ‘babel-loader?{"presets":["es2015"]}‘,

exclude: /node_modules/,

}

同時還要在項目根目錄下新建.babelrc文件，文件內容為：

{

"presets":["es2015"]

}

App目錄結構設計

app_v1.0 根目錄

build 構建產出目錄

assets 資源文件目錄

images 圖片資源文件夾

pages 頁面根目錄

common 公共樣式和js文件

其他文件夾是各個頁面，文件夾裏面就是這個頁面所需的資源（css、js、html）

src 源碼目錄

common 公共資源

css 樣式文件

lib 第三方類庫

tool 工具文件

config 配置文件目錄

common.js 公共js文件

components 組件文件夾

filters 過濾器文件夾

images 圖片資源文件夾

pages 頁面文件夾

index 首頁目錄（這個目錄下除了入口js文件外，最好不要有其他的js文件）

index.js

index.css

index.html

dataService 數據服務目錄

dataService.js 首頁獲取數據服務的公共文件

子文件夾 是不同的頁面，子文件夾裏面包含該頁面所需的資源（css、js、html）

目錄：src-pages下的子文件夾的名稱必須要和該子文件夾下頁面的入口js文件的名稱一致，示例如下：

APP-webpack環境配置及目錄結構設計