Vue CLI 项目结构及解析

￡神魔★判官ぃ 2022-04-16 01:38 365阅读 0赞

### 介绍 ###

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

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

### 安装 ###

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

### 项目结构 ###

使用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)

[官方配置文档][Link 2]

#### vue.config.js ####

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

部分配置示例：

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

[Link 1]: https://cli.vuejs.org/zh/guide/installation.html
[Link 2]: https://cli.vuejs.org/zh/guide/mode-and-env.html
[Link 3]: https://cli.vuejs.org/zh/config/#vue-config-js