vue-cli webpack 模板配置解析 - 1 文件结构
重要模块版本
- vue-cli : 2.9.1
- vue : 2.4.2
- vue-router : 2.7.0
- webpack : 3.6.0
- 其他依赖都由 vue-cli 生成
使用
- 全局安装
vue-cli
npm install -g vue-cli
- 创建项目
vue init webpack <project-name>
- 进入项目文件夹
cd <project-name>
- 安装依赖
npm install
- 编译、开发
npm run dev
- 输出生产版本
npm run build
- 显示打包情况、细节
npm run build --report
,旧版的 vue-cli 是npm run build-report
具体可以查看package.json --> scripts
主要文件、文件夹说明
/build
: webpack 编译脚本文件夹,包括 所有的 loaders、plugins 安装配置
./build.js
: 生产环境构建./dev-server.js
: 开发环境构建、运行本地开发服务器./check-version.js
: 检查当前 node、vue 版本./dev-client.js
: 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新./vue-loader.conf.js
: vue-loader 的配置./utils.js
: 静态资源路径配置、 样式文件的 loaders 配置./webpack.base.conf.js
: webpack 基本配置./webpack.dev.conf.js
: webpack 开发环境配置./webpack.prod.conf.js
: webpack 生产环境配置
/config
: 生产开发环境相关路径、代理、环境变量等,需要用户配置
./index.js
: 开发和生产环境下的用户配置./dev.env.js | ./prod.env.js
: 设置环境变量
/src
: 项目源码
./main.js
: js 入口文件./App.vue
: 跟组件./components
: 其他组件目录./router
: 路由./assets
: 资源目录./store
: 创建时不存在,需要 vuex 后创建./views
: 创建时不存在,自己创建,存放页面组件
/dist
: 编译后代码/static
: 纯静态资源.babelrc | .eslintrc.js | .postcssrc.js
: babel | eslint | postcss 的配置文件/package.json
: npm 安装包详情/index.html
: 入口页面模板