vue cli v4.2.3 脚手架创建项目 初始化项目的采坑

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插件,项目阶段要用到的

// 这是项目发布阶段需要用到的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
}