前端vue的一些配置,jquery,element,bootstrap,cookies等

# 因为有的不仅需要下载下来,而且还需要配置一些其他的东西

 

# 在终端命令行的下载工作
1.下载bootstrap
cnpm install bootstrap@3 -S
2.下载axios
cnpm install axios -S
3.下载jquery
cnpm install jquery -S
4.下载cookies
cnpm install vue-cookies -S
5.下载element-ui
cnpm install element-ui -S

 

 


# 在main.js配置
1.bootstrap的配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
2.axios的配置
import axios from 'axios'
Vue.prototype.$axios = axios;
3.cookies的配置
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;
4.element-ui的配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
5.jquery的配置,需要单独在根目录下创建一个vue.config.js文件,然后再里面配置一些固定的
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};

6.全局的css样式配置,main.js引入css文件
# 配置全局css,在assets/css/global.css
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
margin: 0;
padding: 0;
font-size: 15px;
}

a {
text-decoration: none;
color: #333;
}

ul {
list-style: none;
}

table {
border-collapse: collapse; /* 合并边框 */
}
# 在main.js中注册
import '@/assets/css/global.css'


7.创建一个js文件夹,里面放该js文件
# 配置全局assets/js/settings.js
export default {
base_url:'http://127.0.0.1:8000/'
}
# 在main.js中注册
import setting from '@/assets/js/settings'
Vue.prototype.$settings=setting

posted @ 2021-12-08 20:08  点滴180  阅读(78)  评论(0)    收藏  举报