Vue-cli3 简qian易yi教程

朴灿烈づ我的快乐病毒、 2022-04-08 13:45 63阅读 0赞

[原文地址][Link 1]

> 对于没有了解过 vue-cli3 的童鞋，建议先去看看官方的教程： [传送门][Link 2]

### 新版本的新特性 ###

#### 1. 插件 ####

使用 cli 的插件，可以很快的搭建一个项目的结构。如 axios 的插件 [vue-cli-plugin-axios][]，可以自动创建一个带有 request 和 resonpose 的拦截器的 axios 的实例的文件。使用时直接引入即可。

> ps：一般插件新建的文件都放在 `src/plugin` 文件夹下。

#### 2. 减少配置 ####

vue-cli3 中内置了很多 webpack 的配置，如 babel，各个 css 预编译器，几乎只需要安装完相对应的 loader 即可开箱即用，无需过多的配置即可直接开发。

#### 3. 图形化 ####

自带的 GUI 界面直接将上手成本置为 0。在终端中运行命令： `vue ui` 打开浏览器中就可以愉快的使用 GUI 进行项目管理。

![20181218131811866][]

### vue-cli2 的迁移 ###

#### src ####

直接覆盖即可。

#### static ####

直接复制到新项目的 `public/static` 即可。

#### index.html ####

复制覆盖至 `public` 目录下的 `index.html` 即可。

#### CDN 配置 ####

旧版的可以看这里：[记一次使用 vue-admin-template 的优化历程 ][vue-admin-template _]

新版的基本不用怎么修改即可直接使用：

const webpack = require('webpack')
    const path = require('path')
    const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
    const Vue = require('vue')
    const Buefy = require('buefy/package.json')
    const AV = require('leancloud-storage')
    const externals = {
        // 'element-ui':'ELEMENT'
    }
    const assets = [
        { path: 'https://unpkg.com/buefy@0.6.6/lib/buefy.min.css', type: 'css'}
    ]
    console.log(process.env.NODE_ENV, AV.version)
    
    const isProd = process.env.NODE_ENV === 'production'
    
    if (isProd) {
        externals['vue'] = 'Vue'
        externals['buefy'] = 'Buefy'
        externals['leancloud-storage'] = 'AV'
        // externals['element-ui'] = 'ELEMENT'
        assets.push(
            { path: `https://lib.baomitu.com/vue/${Vue.version}/vue.min.js`, type: 'js' },
            { path: `https://unpkg.com/buefy@${Buefy.version}/lib/index.js`, type: 'js' },
            { path: `https://cdn.jsdelivr.net/npm/leancloud-storage@${AV.version}/dist/av-min.js`, type: 'js' },
        )
    }
    
    const plugins = [{
        name: 'html-assets',
        func: HtmlWebpackIncludeAssetsPlugin,
        options: {
            assets,
            // 是否在 webpack 注入的 js 文件后新增？true 为 append, false 为 prepend。
            // 生产环境中，这些 js 应该先加载。
            append: !isProd,
            publicPath: '',
        }
    }, {
        name: 'dll',
        func: webpack.DllReferencePlugin,
        options: {
            context: path.join(__dirname, '../'),
            manifest: require('../configs/vendor-manifest.json')
        }
    }]
    
    module.exports = {
        externals,
        plugins
    }

#### DLL Plugin ####

旧版的可以看这里：[记一次使用 vue-admin-template 的优化历程 ][vue-admin-template _]

主要还是 webpack4 只需要配置一个 `mode: 'production'` 即可，无需再额外配置繁琐的 `webpack.optimization`。

`package.json` 中添加新的命令：

{
        "build:dll": "webpack --config configs/dll.js --mode production"
    }

再安装新的命令包，让 yarn/npm 可以直接使用 webpack 命令：

\`\`\`$ yarn add -D webpack-command \`\`\`

新增 `configs/dll.js` 文件：

#### 其他配置 ####

vue-cli3 的其他所有 webpack 都可以通过 `vue.config.js` 进行配置，**需要手动新建**。

`vue.config.js`

const {externals, plugins} = require('./config/cdn')
    module.exports = {
        baseUrl: process.env.NODE_ENV === 'production'
            ? '/PRODUCTION/'
            : '/',
        chainWebpack: config => {
            // use webpack-chain instead of webpack.config
            
            // 注入 cdn 和 dll 插件
            plugins.forEach(plugin => {
                config.plugin(plugin.name)
                    .use(plugin.func, [plugin.options])
            })
            // 使用 externals.
            config.externals(externals)
        }
    }

**推荐在 `vue.config.js` 中使用 [webpack-chain][] 进行配置**

##### Pug 配置 #####

安装尤大的 [pug-plain-loader][]: `yarn add -D pug-plain-loader`

`chainWebpack` 添加：

config.module
        .use('pug').test(/\.pug$/)
        .end()

##### Sass 配置 #####

只需要安装 `sass-loader` 即可。

> 如需使用 [`fast-sass-loader`][fast-sass-loader] 代替，则需要修改配置：

;['scss', 'sass'].forEach(style => {
        ['vue', 'vue-modules', 'normal-modules', 'normal'].forEach(one => {
            config.module.rule(style)
                .oneOf(one)
                .use('sass-loader')
                .loader('fast-sass-loader')
                .end()
        })
    })

##### Vux 配置 #####

未研究出，卒。

### 总结 ###

不得不说，新版的 cli 真的很方便新手，配合 webpack-chain 也可以清晰明了的去配置 webpack，只是兼容性需要一步步去摸索。GUI 的界面让管理 vue 项目变得更加简单。

如迁移过程中有任何疑问，可以留言一起探讨。

来源：[https://segmentfault.com/a/1190000016526823][https_segmentfault.com_a_1190000016526823]

[Link 1]: https://blog.leungjz.top/articles/2018/09/26/1537956042584.html
[Link 2]: https://cli.vuejs.org/zh/guide/
[vue-cli-plugin-axios]: https://github.com/azwebplus/vue-cli-plugin-axios
[20181218131811866]: /images/20220404/a4dfa707cd3c49e09db055ce6d9e6a20.png
[vue-admin-template _]: https://blog.leungjz.top/articles/2018/05/15/1536724524187.html
[webpack-chain]: https://github.com/neutrinojs/webpack-chain
[pug-plain-loader]: https://github.com/yyx990803/pug-plain-loader
[fast-sass-loader]: https://github.com/yibn2008/fast-sass-loader
[https_segmentfault.com_a_1190000016526823]: https://segmentfault.com/a/1190000016526823