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/>
总结
项目配置需要手动修改调整的较多,后续补充