vue-cli|vue-cli webpack 工程目录详解 vue-cliwebpack工程目录详解

配置

构建
# 安装依赖 npm install# 启动服务, 热加载默认 localhost:8080, 若8080已使用会自动找另外一个端口 npm run dev# 压缩构建生产环境 npm run build

目录结构

. ├── build# webpack/node 配置项 ├── config# 测试、开发、上线的环境配置 ├── node_modules ├── src# 源代码目录 │├── api# 请求后端和模拟数据的 API │├── assets# webpack 打包的静态资源文件 │├── components# 所有组件 │├── icons# │├── mixin# │├── mock# 模拟数据 │├── router# 路由 │├── service# 服务 │├── store# vuex 状态管理 ││├── modules# ││└── index.js# │├── styles# 样式 │├── utils# 全局工具类，directive, mixin 还有绑定到 Vue.prototype 的函数 │├── views# 业务页面 │├── App.vue# 根组件 │└── main.js# vue 入口文件 └── static# npm没有的第三方库

build

webpack/node 配置相关文件
utils
- 资源文件路径、加载器和创建通知回调: assetsPath cssLoaders styleLoaders createNotifierCallback

config

环境配置相关文件
- dev.env.js
- index.js 主配置文件
- prod.env.js
- test.env.js 单元测试
test.env.js 继承 dev.env.js, dev.env.js 继承 prod.env.js
使用配置文件中的环境变量
Vue.config.productionTip = process.env.NODE_ENV === 'production'

node_modules

依赖的第三方库

src

存放项目源码（开发的所有代码）会被 webpack 打包。如果被引用, 也会自动生成url
- api
  - 请求后端和模拟数据的 API
- asset
  - 404图片, 模块资源等, 交由 webpack 处理
- components
  - UI 通用组件 .vue 文件，按模块划分组件, 其实就是自定义html标签
    - 【vue-cli|vue-cli webpack 工程目录详解】template
    - script js代码块, 导出数据
    - style 样式表, 加上scoped: 表示只在当前组件有效
- icons 存放图标资源
- mock 模拟数据
- route 路由，建议按模块划分
- store 利用 vuex 持久化数据，如cookie、 token等
- styles 基本样式
- utils 工具类，权限，http请求，校验等
- views 业务页面，建议按模块划分
- App.vue
  - 主应用组件
- main.js
  - 应用入口文件

static

真正的静态资源，不会被 webpack 打包，可以放 npm 中没有的第三方库

根目录的配置文件

.babelrc
- babel的配置文件, babel 的作用是将 ES6 转换成 ES5
.editorconfig
- 项目编码、缩进、尾行插入换行符、过滤尾部空格
.eslintignore
- 过滤不需要eslint校验的文件类型和目录
.eslintrc.js
- eslint配置文件
- 一个用来识别ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格
- 可以被配置的信息主要分为3类：
  - Environments：你的 javascript 脚步将要运行在什么环境（如：nodejs，browser，commonjs等）中。
  - Globals：执行代码时脚步需要访问的额外全局变量。
  - Rules：开启某些规则，也可以设置规则的等级。
.postcssrc.js
- vue-loader 支持通过 postcss-loader 自动加载同一个配置文件：
  - postcss.config.js
  - .postcssrc
  - package.json 中的 postcss
- 使用配置文件允许你在由 postcss-loader 处理的普通CSS文件和 *.vue 文件中的 CSS 之间共享相同的配置, 这是推荐的做法
index.html 应用运行的html文件
package.json
- 项目信息、依赖关系和插件配置