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

標籤：文法   nbsp   AC   解決   源碼   包含   webstorm   src   上下   

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，命令：npminstall –g webpack。因為打包編譯需要使用webpack命令。

4、  將webpack設定檔copy到項目根目錄，然後執行命令：npm install。Npm會自動安裝設定檔中指定的所有依賴外掛程式。

5、  運行命令 npm runbuildDebug 進行編譯打包，會在根目錄產生產出目錄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環境配置及目錄結構設計