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]: "" } } } } };

注意进行以上配置后需要重新启动服务。

更多文章合集前往： 往期精彩文章