Vue Cli3项目配置

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、新建一个项目

使用 vue-cli3 构建一个初始的vue项目 Cli3官方文档

1. 别名设置

（1）在 vue.config.js 里面顶部

// 路径依赖
const path = require('path')

// 查找文件方法
const resolve = dir => {
    return path.join(__dirname, dir)
}

（2） 在 vue.config.js 文件 里 module.exports chainWebpack 新增

// 别名配置
config.resolve.alias
    .set('assets', resolve('src/assets'))
    .set('components', resolve('src/components'))

二、全局Sass配置

1. 使用sass时，不想在每个.vue里面手动引入一个 @import ‘~@/style/common.scss’,那就配置为全局公用

（1）在vue.config.js module.exports 里新增下面代码

// SASS配置
css: {
   loaderOptions: {
       sass: {
           data: '@import "@/style/app.scss";'
       }
   }
}

（2） 同时需要在src下新建style文件夹，并在style文件夹下新建app.scss

三、全局Css配置

在pulic/index.html文件里面新增代码

<style>
* {
    margin: 0;
    padding: 0;
    font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', Arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</style>

四、基础组件的自动化全局注册

import Vue from 'vue'

// 找到components文件夹下以.vue命名的文件
const RC = require.context('.', true, /\.vue$/)

RC.keys().forEach(fileName => {
    const componentConfig = RC(fileName)

    // 因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
    let componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    let index = componentName.indexOf('/')
    if (index !== -1) componentName = componentName.substr(index + 1)

    Vue.component(componentName, componentConfig.default || componentConfig)
})

（2）在mian.js里面引入

import './components/global'

（3 在template里使用

<aaa-world/>

总结

项目配置需要手动修改调整的较多，后续补充