vue-cli4.0 项目搭建

创建项目

vue create hello-wword

| 配置 scss 全局变量

// vue.config.js
css: {
  // css预设器配置项
  loaderOptions: {
    sass: {
      additionalData:`@import "~@/assets/css/variable.scss";@import "~@/assets/css/custom.scss";`
    },
  },
},

报错：Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

解决：卸载-重装 sass-loader npm uninstall --save-dev sass-loader npm install --save-dev sass-loader

报错：scss media query expression must begin with ‘(‘

原因：@import 结尾缺少; @import ‘./color.scss’ 解决：结尾添加分号 @import ‘./color.scss’;

| vant 按需引入

1、安装插件：npm i babel-plugin-import -D

  1. 配置babel
// babel.config.js
const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins
};

| 配置 alias 别名

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
    // 配置页签 title
    config.plugin("html").tap(args => {
      // args: [{"title":"demo-name","template":"/Users/Desktop/demo-name/public/index.html"}]
      args[0].title = "名字";
      return args;
    });
  }
}