创建一个普通的vue项目

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`)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*在app.vue页面中使用request.js中的方法*/
import { getAllData } from './api/request.js'

methosd:{
		XXX(){
				getAllData().then((res) => {
							console.log(res)
					}).catch(error => {
							console.log(error);
					});
			}
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*默认是没有vue.config.js，需要自己在项目要目录创建并且做如下代理配置*/
module.exports = {
    // assetsDir: 'static',
    devServer: {
      proxy: {
        '/api': {  //之后就使用/api代指根路径
            target: 'https://......', // 后端或者服务器地址配置民
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
        }
      }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16