Vue-cli（笔记）

Vue-cli

vue-cli上手

1. 配置允许less
2. 配置允许console
3. 添加vue-resource插件请求数据
4. 路由模块化，将路由放在一个单独的文件里导出
5. 配置vue-router
6. 配置vuex
7. 配置全局css 导入main.js

HTML和静态资源

静态资源有两种处理方式

1. 相对路径导入JavaScript或在模板/css中使用，这种方法会通过webpack处理（建议以这种方式导入，与webpack配合）

   使用file-loader和url-loader处理文件，url-loader转化为base64默认限制为4kb，可以通过vue.config.js的chainWebpack进行配置。

2. 放在public中，通过绝对路径引用。静态资源仅被复制不通过webpack

   ​

   用法：

   1. 在public/index.html或用作模板的其他HTML文件，需在链接中添加前缀<%= BASE_URL %>

      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      

   2. 在模板中，首先需要将URL传递给组件

      data () {
        return {
          publicPath: process.env.BASE_URL
        }
      }
      

      <img :src="`${publicPath}my-image.png`">
      

使用CSS

• 创建项目时可以选择预处理器，如果没有后期安装即可

npm i less less-loader -D

• 全局导入可以使用style-resources-loader（全局都可以使用这个变量、color、混合等），可以直接vue add style-resources-loader
• 要将css或其他预处理器文件作为JavaScript中的css模块导入（import css from ‘./mycss.module.css 的形式’），文件名应该为.module.(css|less…)，如果要删除.module文件名，在vue.config.js中设置css.requireModuleExtension为false

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

​ 如果想自定义（后缀名），则可以通过css.loaderOptions.css配置

• 如果需要共享一些全局变量给less预处理器style，可以通过css.loaderOptions配置

使用webpack

• 如果需要配置webpack，可以使用vue.config.js的configureWebpack选项，最终会通过webpack-merge合并到最终webpack配置，如果配置取决于环境，可以使用函数的形式
• 内置的webpack使用webpack-chain维护，可以通过vue.config.js修改默认配置（配合vue inspect很有用，也可以输出成文件查看vue inspect > output.js）

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  }
}

• 添加loader

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
  }
}

• 环境变量可以通过process.env查看
• vue.config.js添加lintOnSave:false不进行代码检测