│ .gitignore # git提交忽略文件 │ package.json # 项目配置 │ README.md # 项目说明 │ .bablerc # babel配置项 │ .eslintrc # eslint配置项 │ .eslintignore # eslint忽略项 │ │ │ ├─node_modules │ ├─dist # 打包后生成的文件目录 ├─build # 打包后生成的文件目录 │ │ ├─ webpack.base.config.js # webpack 参数配置 │ │ │ ├─ webpack.dev.config.js # webpack 开发环境配置 │ │ │ ├─ webpack.prod.config.js # webpack 生产环境配置 │ │ │ ├─ zip.js # 生产环境下文件打包为zip格式 │ ├─example # 初始化后生成的开发环境运行所需文件 │ └─src ├─ main.js # 入口文件 │ ├─ router.js # 路由配置 ├─ index.js # 全局配置(便于docker容器配置),开发环境下访问globalConfigs,生产环境下访问window.globalConfigs │ ├─ project # 项目文件夹 │ │ │ ├─ page # 各项目下的page目录 │ │ │ ├─ index.js # 项目参数配置(启动对应项目会加载对应的index.js) │ ├─components # 组件 │ │ │ └─ app.vue # 入口组件 │ ├─views # 视图(即路由) │ ├─assets # 静态资源文件 │ ├─directives # 自定义指令 │ ├─filters # 自定义过滤器 │ ├─config # 配置文件 │ │ ├─utils # 工具函数 │ │ │ └─ util.js # 工具函数 │ │ │ │ │ └─ cache.js # 缓存文件 │ ├─mixin # 混合 │ ├─styles # 放置css │ │ │ ├─ index.less # 入口css │ │ └─template # 放置html模板,webpack依赖此文件生成所需的html │ │ └─ index.ejs # 默认的html模板 1.执行命令
npm install 2.安装完毕之后,初次运行执行以下命令,生成example目录,该目录下文件为开发环境运行所需
npm run init 3.开启服务,默认端口8080,通过http://127.0.0.1:8080访问
npm run dev //默认端口8080,可通过配置参数port来更改端口 npm run dev -- --port 8081 4.生产环境打包
npm run build 1.已通过webpack做代码切割,按需加载,若无需代码切割,请删除dev && prod 环境下的chunk配置
2.已处理 *.vue 文件内的 <style> 提取,若需要按需加载,请移除webpack.base.config.js下的ExtractTextPlugin配置,且移除dev && prod 中 ExtractTextPlugin 相关plugin配置
3.process.env.NODE_ENV 变量在dev 跟 prod环境下的值 分别为 'development' 跟 'production',可根据需要自行配置
4.prod环境下打包完成会生成一个全局的config.js文件,该文件下存储了window.globalConfigs全局变量,方便docker容器配置
5.gitignore已默认将dist 跟 example 目录下的文件忽略