Vue前端篇之项目初始化
一、基础库安装
（二）ElementUI安装
进入ElementUI网站，查看安装指南，在项目根目录下执行安装命令：
npm install element-plus --save安装成功后就可以在项目中进行引入了，在main.js文件中：
import ElementPlus from "element-plus"; import "element-plus/lib/theme-chalk/index.css";然后进行：
app.use(ElementPlus);main.js中完整的代码：
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
const app = createApp(App);
app.use(store);
app.use(router);
app.use(ElementPlus);
app.mount("#app");
使用ElementUI可以进行页面的布局。 （二）axios安装
axios是向后台发送请求使用的工具，现在进行安装，可参考axios中文网，在项目的根目录下：
npm install axios封装：
在src目录下新建utils目录，然后再utils目录下新建request.js文件：
import axios from "axios";
const request = axios.create({
baseURL: "http://127.0.0.1:8080/",
timeout: 1000
});
export default request;
二、Vue项目配置
（一）环境配置文件
在项目的根目录下新建.env.development文件以及.env.production文件：
- .env.development
开发环境配置文件：
# 服务接口地址,上述就是Easy-Mock服务地址，这个在后面会进行mock服务搭建，可以先空着 VUE_APP_SERVICE_URL = 'http://192.168.35.16:7300/mock/60ef1eb22475f419e941cf61' # 开发环境的前缀 VUE_APP_BASE_API = '/dev-api'
- .env.production
生产环境配置文件：
VUE_APP_BASE_API = '/pro-api'
（二）axios接口封装
将之前封装好接口的baseURL进行动态配置：
import axios from "axios";
const request = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000
});
export default request;
（三）跨域代理转发
前后端请求势必涉及到跨域问题，要不前端解决，要不就是后端解决，所以如果前端解决需要进行配置，在项目根目录下新建vue.config.js文件：
module.exports = {
devServer: {
port: 8080,
host: "localhost",
//代理设置,将 /dev-api/test代理成 http://192.168.35.16:7300/mock/60ef1eb22475f419e941cf61/test
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_SERVICE_URL,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
}
}
}
}
};
注意进行以上配置后需要重新启动服务。
更多文章合集前往：往期精彩文章