目录
路飞项目前端配置
一,前端设置全局css，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中配置 全局生效
// 使用全局css样式，只需要导入就会生效
import '@/assets/css/global.css'
全局js
向后端发送请求，请求地址测试阶段 127.0.0.1:8000,如果在组件中把地址写死，后期上线每个用到这个地址的地方都要改。
写一个全局js，js中有一个url地址，以后每个组件发请求时拿他拼接
新建assets-js----settings.js
export default {
BASE_URL:'http://127.0.0.1:8000/api/v1'
}
在main.js中引入
// 引入settings.js,把settings对象放入到vue的原型中
import settings from '@/assets/js/settings';
Vue.prototype.$settings = settings
// 以后在任意组件中只需要 this.$settings.BASE_URL
组件中使用
this.$settings.BASE_URL
this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{
})
二，安装axios
与后端交互需要下载axios
cnpm install axios -S
把axiox放到Vue原型中
mian.js
import axios from 'axios';
Vue.prototype.$ajax=axios
在任意组件中使用
this.$ajax.get()
三，安装vue-cookies
登陆成功，token需要存在cookie中
安装
cnpm install vue-cookies -S
把cookies放到Vue原型中
main.js
import cookies from 'vue-cookies';
Vue.prototype.$cookies=cookies
在任意组件中使用
this.$cookies.set()
四，安装elementui
安装
cnpm install element-ui -S
main.js配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);