vue-cli webpack 工程目录详解

配置

• 构建

  # 安装依赖
  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标签

      • template

        <template>
          {{msg}}
        </template>
        

      • script js代码块, 导出数据

        <script>
          export default {
              name: "HelloWorld",
              data() {
                return {
                  msg: "蓝牙卡管理平台"
                }
              }
            }
        </script>
        

      • style 样式表, 加上scoped: 表示只在当前组件有效

        <style scoped>
        
        </style>
        

  • 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
  • 项目信息、依赖关系和插件配置