新建一个vue项目
1.全局安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
2.全局安装vue-cli
cnpm install -g vue-cli
3.全局安装vue-cli成功之后,通过webpack来搭建项目
npm install -g @vue/cli-init -verbose
vue init webpack admin(你的项目名字)
选择如下图所示:
4.如下图红色框所示就是安装好了 然后npm run dev 运行
引入element
1.安装element
npm i element-ui -S
2.在main.js里面引入element,下图红色框部分
// 引入element
import ElementUI from 'element-ui'
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI)
3.然后就可以在vue文件里使用element了,如下图:
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
引入axios并解决跨域问题
1.安装axios
npm install axios --save
2.在main.js里面引入axios
//引入axios
import axios from 'axios';
Vue.prototype.$axios = axios;
3.在vue文件里面调用接口
this.$axios.post(that.url+'/flyray-merchant-web/pc/doctor/disease/4/1','').then(res =>{
//
})
4.控制台会报跨域问题,在config/index.js文件proxyTable里面加上
proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'https://www.58liangpiao.com/', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'https://www.58liangpiao.com/' //路径重写
}
}
},
在main.js里面声明一个全局变量,是为了打包之后接口也能正常使用
这一步是因为本地请求的时候是通过api进行转换的,打包之后不需要转换,所以要把api去掉
// 全局定义对象
let serverUrl = '/api/' //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
Vue.prototype.url =serverUrl;