vue-cli-webpack模板配置全解析-1

vue-cli webpack 模板配置解析 - 1 文件结构

重要模块版本

• vue-cli : 2.9.1
• vue : 2.4.2
• vue-router : 2.7.0
• webpack : 3.6.0
• 其他依赖都由 vue-cli 生成

使用

1. 全局安装 vue-cli npm install -g vue-cli
2. 创建项目 vue init webpack <project-name>
3. 进入项目文件夹 cd <project-name>
4. 安装依赖 npm install
5. 编译、开发 npm run dev
6. 输出生产版本 npm run build
7. 显示打包情况、细节 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 : 入口页面模板

下一章 重要配置文件解析