第十一篇：Vue全局配置自定义css与js

Posted 2021-03-09 城南花已开

全局配置自定义css与js

配置全局css

首先在src下的assets目录下创建css文件夹，用于存放css全局文件

1、在创建好的css文件夹下创建global.css文件，内容如下：

html, body {
    margin: 0;
}
 
a {
    color: black;
    text-decoration: none;
}
 
ul {
    margin: 0;
    padding: 0;
}

2、在全局入口文件main.js中导入

//1) 配置全局css
import '@/assets/css/global.css'
// import global_css from '@/assets/css/global.css'  // 资源需要用变量保存,方便以后使用
// require('@/assets/css/global.css')
// let global_css = require('@/assets/css/global.css')  // 资源需要用变量保存,方便以后使用

配置全局自定义js

首先在src下的assets目录下创建js文件夹，用于存放js全局文件

1、在创建好的js文件夹下创建settings.js文件，内容如下：

export default {
    base_url: 'https://127.0.0.1:8000'
}

2、在全局入口文件main.js文件中配置自定义的js

// 2) 配置自定义js设置文件
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings;
// 在任何一个组件中的逻辑,可以通过 this.$settings访问settings.js文件的{}数据