路飞项目前端配置

目录

路飞项目前端配置

一,前端设置全局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);
posted @ 2023-02-28 15:34  李阿鸡  阅读(3)  评论(0)  编辑  收藏  举报
Title