路飞 ---配置前端

配置前端全局css

1.整理项目

• 将下面的所有文件都置为最纯净的样子

APP.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

HomeView.vue

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
}
</script>

最后将其他的页面和小组件都删除

2.全局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'

3. 配置全局js文件

路由地址：
	在向后端发送请求的时候，请求地址是127.0.0.1:800，但是考虑到后期项目上线，地址会发生变化，如果在组件中将数据写死，那么以后要修改地址，就会很麻烦需要一个个的改，
    所有我们配置一个全局文件用于放全局url的地址，以后在所有的文件中发送地址，都是用这里面的url地址
    
步骤流程：
	1、在assets文件下创建js文件 --settings.js
  代码：
	export default {
        BASE_URL:'http://127.0.0.1:8000/api/v1'
    }
    2、在main.py 中引入
    // 引入settings对象，将该对象放入vue原型中
     import settings from "@/assets/js/settings";
    Vue.prototype.$settings = settings

使用：
	this.$settings.BASE_URL
    
axios：
	this.$axios.get(this.$settings.BASE_URL+'/home').then(res=>{
        
    })

安装vue-cookies

--在后期登录成功之后，我们要将token存在cookie中

使用步骤：
	1.安装  
    	cnpm install vue-cookies -S
        
    2.把vue-cookie 放到vue的原型中，main.js中
    	// 配置vue-cookie
        import cookies from 'vue-cookies'
        Vue.prototype.$cookies=cookies	
        
 	3.就能够在任意的组件中使用
    	this.$cookies.get()
        this.$cookies.set()

安装 element ui

这是一个样式全局组件
使用步骤：
	1.安装
    	cnpm install element-ui -S
    
    2.main.js 配置
    	import ElementUI from 'element-ui';
		import 'element-ui/lib/theme-chalk/index.css';
    	Vue.use(ElementUI);
        
    3. 使用的时候直接在官网copy即可

安装bootstrap 和jQuery

在这个项目中，没有使用到bootstrap，想要使用也是可以的
	# bootstrap引入必须引入jquery
    
# 使用步骤：
	第一步：安装
    	cnpm install jquery -S
        cnpm install bootstrap@3 -S
    第二步：配置全局使用bootstrap，main.js中加入
        import 'bootstrap'
        import 'bootstrap/dist/css/bootstrap.min.css'
    第三步:配置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"]
                    })
                ]
            }
        };
        
    第三步：在页面中使用bootstrap