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 进行项目管理。

image-20180926160820683

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/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 的优化历程

主要还是 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 项目变得更加简单。

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

916 声望
24 粉丝
0 条评论
推荐阅读
Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 68.3k评论 81

「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs39阅读 4.7k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco19阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图
916 声望
24 粉丝
宣传栏