写Vue项目的时候,需要对代码进行优化,重复使用的组件、样式、JS进行全局引入并统一管理,这样对代码的维护会很好。
1、全局引入scss文件
安装sass-resources-loader
npm i sass-resources-loader --save-dev
然后修改vue-cli的build/utils.js,找到scss的加载设置替换
scss: generateLoaders('sass')
替换成
scss: generateLoaders('sass').concat({
loader:'sass-resources-loader',
options:{
resources:path.resolve(__dirname,'./../src/assets/scss/base.scss')
}
}),
2、全局引入JS文件
在main.js 引入,并挂在到原型链上,如api.js
import API from './assets/js/api/api.js'
Vue.prototype.$api = API;
3、全局引入基础组件
在main.js 引入
import Icon from './components/y-c/icon.vue'
Vue.component('y-icon',Icon)
4、全局引入函数
在main.js引入,并挂在到原型链上
Vue.prototype.$xxx = function(){}