1.用HbuilderX工具开发,新建项目时选择vue2.6.10
2.点击新建终端,输入npm run serve命令
3.vue项目配置elementui
可以按照官方方法使用npm i element-ui -S命令进行安装
在main.js配置3行,且要在最前面
1.import ElementUI from ‘element-ui’ //vue项目配置ElementUI
2.import ‘element-ui/lib/theme-chalk/index.css’
3.Vue.use(ElementUI);
4.运行时默认运行的页面就是app.vue,不需要登录就可以直接进入主页
5.如果主页需要调用接口还需要做如下配置
1)输入npm install axios
2) 在src目录下新建一个api文件夹,且在api文件夹中再新建一年request.js文件,复制以下代码
/*目录:/api/request.js, js文件中的代码如下*/
/* eslint-disable*/
import axios from 'axios'
axios.defaults.timeout = 100000 // 超时时间设置
axios.defaults.withCredentials = true // 是否跨域
axios.defaults.baseURL = 'http://6c7c337a.cpolar.io' // 域名或ip 【注意/url和后面的vue.config.js的/url相匹配】
// Content-Type 响应头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
// 封装接口调用的方法
export const getAllData = params => {
// return axios.get(`/accountBalance/get`, { params: params })
return axios.get(`/accountBalance/get`)
}
/*在app.vue页面中使用request.js中的方法*/
import { getAllData } from './api/request.js'
methosd:{
XXX(){
getAllData().then((res) => {
console.log(res)
}).catch(error => {
console.log(error);
});
}
}
/*默认是没有vue.config.js,需要自己在项目要目录创建并且做如下代理配置*/
module.exports = {
// assetsDir: 'static',
devServer: {
proxy: {
'/api': { //之后就使用/api代指根路径
target: 'https://......', // 后端或者服务器地址配置民
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}