APP-webpack环境配置及目录结构设计

Posted 2020-11-03 rechel

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文件的名称一致，示例如下：