路飞-前端vue准备工作

• 前端全局样式清除
• 全局js变量配置
• axios全局使用/cookies全局使用
• 安装elementui

前端全局样式清除

创建vue脚手架搭建项目，VUE2版本
在src---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文件中导入 这样全局生效

//使用全局css样式
import '@/assets/css/global.css'

全局js变量配置

新建js文件  在src文件中 js文件夹 创建 sttings.py

1.在文件中填写公共全局变量

export default {
    // ajax请求后端接口
    BASE_URL:'http://127.0.0.1:8001/api/v1'
}


2.将公共配置文件加入vue原型中，以后通过vue对象.的方法即可使用
在main.js文件中

//引入settings公共配置放入vue原型中
import Settings from "@/assets/js/settings";
Vue.prototype.$settings = Settings
//以后只需要 this.$settings.BASE_URL 即可


3.在任意组件中使用
  eg：
    this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{
        
    })

axios全局使用/cookies全局使用

第一步：安装  npm install axios -S
            npm install vue-cookies -S


第二步：把axios/vue-cookies放到vue原型中 main.js中

import axios from "axios";
import cookies from 'vue-cookies'

Vue.prototype.$axios = axios
Vue.prototype.$cookie = cookies


第三步：在任意组件中使用
      this.$ajax
      this.$cookie

安装elementui

使用elementui组件

第一步：安装 npm install element-ui -S
第二步：main.js配置
  import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);
  
接下来就可以使用相关样式了 
https://element.eleme.cn/#/zh-CN/component/layout