Vue cli 笔记
安装
全局安装@vue/cli
yarn global add @vue/cli
检查是否安装成功(需重启更新环境变量)
vue --version
快速原型开发
新版本Vue中增加了该功能，方便快速进行单个Vue文件开发，需要先额外安装一个全局的扩展。
yarn global add @vue/cli-service-global
入手尝鲜
新建index.vue文件
<template>
<div>Hello Vue</div>
</template>
运行服务
vue serve index.vue
效果
创建项目
略
vue.config.js
在vue cli 3.x/4.x 中，使用vue.cofig.js来进行一些包括webpack的配置。比如我们可以想要一个控制台输出编译时间的配置，可以在如下设置
const moment = require('moment')
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '三只蜜桔后台管理系统·商户版',
args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
return args
})
}
}
亦或者，我们想要在生产环境禁用console.log
const moment = require('moment')
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '三只蜜桔后台管理系统·商户版',
args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
return args
})
config.optimization
.minimizer('terser')
.tap(args => {
Object.assign(args[0].terserOptions.compress, {
pure_funcs: ['console.log']
})
return args
})
},
productionSourceMap: false,
configureWebpack: {
output: {
filename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`,
chunkFilename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`
}
}
}
版权声明: 本文首发于 指尖魔法屋-Vue cli 笔记（https://blog.thinkmoon.cn/post/834_vue-cli-%E7%AC%94%E8%AE%B0/） 转载或引用必须申明原指尖魔法屋来源及源地址！