Vue-cli3 簡qian易yi教程

原文地址

對於沒有了解過 vue-cli3 的童鞋，建議先去看看官方的教程： 傳送門

新版本的新特性

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 進行項目管理。

vue-cli2 的遷移

src

直接覆蓋即可。

static

直接複製到新項目的 public/static 即可。

index.html

複製覆蓋至 public 目錄下的 index.html 即可。

CDN 配置

舊版的可以看這裏：記一次使用 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/[email protected]/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 的優化歷程

主要還是 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 文件：

const webpack = require('webpack');
const path = require('path');

const utils = {
    assetsPath: function (_path) {
        const assetsSubDirectory = process.env.NODE_ENV === 'production'
            // 生產環境下的 static 路徑
            ? 'static'
            // 開發環境下的 static 路徑
            : 'static'
        
        return path.posix.join(assetsSubDirectory, _path)
    }
}

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}
const vendors = [
    // 這裏填寫需要打進 dll 的包名。
];
const context = path.join(__dirname, '../')
const webpackConfig = {
    // 無需配置 webpack.optimization
    mode: 'production',
    context,
    output: {
        path: path.join(__dirname, '../public/js/'),
        filename: '[name].dll.js',
        library: '[name]_[hash]',
    },
    entry: {
        "vendor": vendors,
    },
    plugins: [
        new webpack.DllPlugin({
            context,
            path: path.join(__dirname, '.', '[name]-manifest.json'),
            name: '[name]_[hash]',
        })
    ],
    module: {
        // 如用不上可以刪除。
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
        ]
    }
};

module.exports = webpackConfig

其他配置

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 代替，則需要修改配置：

;['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 項目變得更加簡單。

如遷移過程中有任何疑問，可以留言一起探討。