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文件的名称一致，示例如下：
原文地址：https://www.cnblogs.com/rechel/p/9006628.html