vue初始配置(二)

一、配置全局CSS

　　1、assets/css/目录中新建global.css。

　　2、书写样式，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; /* 合并边框 */
}

　　3、全局配置，main.js：

import '@/assets/css/global.css' /* <@>等于<src> */

二、配置全局自定义设置

　　1、assets/js/目录中新建setting.js。

　　2、书写配置，setting.js：

export default {
    base_url: 'http://127.0.0.1:8000'  /* 后端主站url */
}

　　3、全局配置，main.js：

import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

　　4、组件中使用：this.$settings.base_url + '后端api的url后缀。

三、常用模块

　　1、安装

　　　　①cnpm install axios。

　　　　②cnpm install vue-cookies。

　　　　③cnpm install element-ui。

　　　　④cnpm install jquery。

　　　　⑤cnpm install bootstrap@3。

　　2、全局配置，main.js：

import axios from 'axios'
import cookies from 'vue-cookies'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Vue.prototype.$axios = axios
Vue.prototype.$cookies = cookies;
Vue.use(ElementUI)

　　3、jQuery需要额外配置：

　　　　①项目根目录创建vue.config.js。

　　　　②书写代码，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"]
            })
        ]
    }
};