Vue CLI 项目结构及解析

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

这是官方对Vue CLI 3的介绍，在使用全新的Vue CLI 3 开发项目过程中，个人认为大多数小型项目基本可做到零配置。

安装

安装教程官方文档有比较详细的解答，不再赘述。

项目结构

|-- dist                     编译后的文件目录
|-- node_modules             依赖包
|-- public                   模板文件和静态资源
|-- src                      开发目录（配置完成后基本只在该文件夹开发即可）
   |-- assets                    资源，如 css、image、iconfont
   |-- components                组件
   |-- router                    路由 vue-router
   |-- store                     状态 vuex
   |-- views                     路由组件，即某个路由直接指向该组件
   |-- App.vue                   根组件
   |-- main.js                   项目入口
|-- .browserslistrc          配置支持的浏览器范围，babel会根据这个进行 Polyfill
|-- .editorconfig            设置该项目的编辑器的配置
|-- .env.development         开发环境自定义参数
|-- .env.production          生产环境自定义参数
|-- .eslintrc.js             eslint 配置
|-- .gitignore               git 忽略目录
|-- babel.config.js          babel 配置
|-- package.json             项目依赖列表
|-- postcss.config.js        postcss 配置
|-- README.md
|-- vue.config.js            项目配置及 webpack 配置

使用Vue CLI 3创建一个项目，项目的结构大概如此，因为部分文件是当你有需要自己添加的。下面会介绍一些文件夹具体的功能。

public

public文件夹类似之前脚手架项目的static文件夹，但是，现在的html模板文件也会放在该文件夹内，在打包过程中除了html模板文件，其他资源会直接复制到dist文件夹下，而不需要编译和压缩。

src

src文件夹与之前的脚手架项目基本相同，不同点在于，该项目多了一个view文件夹，我们可以把路由组件放在该文件夹内，便于我们项目的维护，当然，你也可以放在其他文件夹。
同时，建议将router.js和store.js进行拆分，分别放入router文件夹和store文件夹，小型项目拆分的作用并不大，但是当你的项目有几十上百的页面时，你会发现，拆分后的代码阅读起来是如此的清爽~

.env.xxx

这类文件主要是根据环境来载入不同的变量。这类变量是可以在客户端使用的，但是要遵循一定的规则。

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。

比如你在.env.xxx文件定义了如下变量：

VUE_APP_SECRET=secret

那么你可以在客户端代码中这样使用：

console.log(process.env.VUE_APP_SECRET)

官方配置文档

vue.config.js

如果你的项目需要一些个性化的配置，那么基本上所有的配置需要在 vue.config.js 文件内进行配置。
官方配置文档

部分配置示例：

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production'
        ? '/app/'
        : '/',
    // 多页面应用 https://cli.vuejs.org/zh/config/#pages
    // pages: {},
    // 请求代理
    devServer: {
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            }
        }
    },
    // 生产环境下的sourceMap
    productionSourceMap: true,
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config
                .externals({
                    'vue': 'Vue',
                    'vue-router': 'VueRouter',
                    'vuex': 'Vuex',
                })
        } else {
            // 为开发环境修改配置...
        }
    }
}

总结

Vue CLI 3 带来了更简单的配置、更丰富的功能，但是同时也拥有新的配置模式，如果没有熟悉官方文档就盲目的进行配置和使用会带来一些问题，建议还是在使用之前大概的查看一下官方的配置文档，以便于在出现问题时能够及时解决。