eslint相关
- eslint语法要求函数与()之间留空格 经常中招 又不想每次都fomat一下,在.eslintrc.js文件中设置,添加以下代码
rules: {
// 函数名和括号之间不能有空格 禁用此语法规则
'space-before-function-paren': 0,
}
- eslint语法默认会检测所有js文件,引入第三方库的js,有的不符合eslint规则,git提交时一直无法提交,添加一个.eslintignore文件,如下会忽略public和static文件夹下的js文件,又可以愉快的git commit了
public/
static/
webpack相关
- 最新的vue cli已经不再显示webpack设置,根据vue cli官方文档提供的方式,配置出文件vue.config.js,为configureWebpack 提供一个对象,最终会合并到默认的webpack配置项中,实用配置项如下(具体的默认配置没有找到o(╥﹏╥)o,后来发现实用vue ui在任务里实用inspect可以看到全部的默认webpack配置,inspect会帮你走一遍webpack的配置,并在页面上显示出来,目前只发现了这个,显示的也不错,比看终端里面的好,若有更好的入口,欢迎留言下,互相学习)
module.exports = {
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
// entry找到默认的打包入口,调用clear则是删除默认的打包入口
// add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
// 使用externals设置排除项
config.set('externals', {
// 根据自己需求 设置打包时的排除项
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
config.plugin('html').tap(args => {
// 添加参数isProd
args[0].isProd = true
return args
})
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
// 使用插件
config.plugin('html').tap(args => {
// 添加参数isProd
args[0].isProd = false
return args
})
})
}
}
- 这样把mian.js入口文件拆分成了两个文件,一个发布时打包用,一个测试调试用,配合vue cli的打包命令实用简便
- vue中的@ 默认指向src 可以inspect看到,也可以翻到依赖包里慢慢找吧
babel相关
// 这是项目发布阶段需要用到的babel插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
// 去掉js中所有console的插件,very good,省事
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
// 发布产品时候的插件数组
...prodPlugins,
// 路由懒加载插件
// 配合vue router使用 把组件分组拆分 懒加载 提高用户体验
'@babel/plugin-syntax-dynamic-import'
]
}
format类型插件冲突
- 写代码离不开n多的插件,可以使用配置.prettierrc.文件,减少冲突
{
// 分号结束为false
"semi": false,
// 引号使用单引号
"singleQuote": true,
// 扩大每行的字符长度 默认的80不够的话
"printWidth": 150
}