当前位置:   article > 正文

vue+element搭建项目(vue全家桶:Vue+Vue-router+Vuex+axios)_vue element 搭建

vue element 搭建

新建一个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来搭建项目 

  1. npm install -g @vue/cli-init -verbose
  2. vue init webpack admin(你的项目名字)

选择如下图所示:

4.如下图红色框所示就是安装好了 然后npm run dev 运行

引入element

1.安装element

npm i element-ui -S

2.在main.js里面引入element,下图红色框部分

  1. // 引入element
  2. import ElementUI from 'element-ui'
  3. import "element-ui/lib/theme-chalk/index.css";
  4. Vue.use(ElementUI)

3.然后就可以在vue文件里使用element了,如下图:

  1. <el-button>默认按钮</el-button>
  2. <el-button type="primary">主要按钮</el-button>
  3. <el-button type="text">文字按钮</el-button>

引入axios并解决跨域问题

1.安装axios

npm install axios --save

2.在main.js里面引入axios

  1. //引入axios
  2. import axios from 'axios';
  3. Vue.prototype.$axios = axios;

3.在vue文件里面调用接口

  1. this.$axios.post(that.url+'/flyray-merchant-web/pc/doctor/disease/4/1','').then(res =>{
  2. //
  3. })

4.控制台会报跨域问题,在config/index.js文件proxyTable里面加上

  1. proxyTable: {
  2. '/api': { //使用"/api"来代替"http://f.apiplus.c"
  3. target: 'https://www.58liangpiao.com/', //源地址
  4. changeOrigin: true, //改变源
  5. pathRewrite: {
  6. '^/api': 'https://www.58liangpiao.com/' //路径重写
  7. }
  8. }
  9. },

在main.js里面声明一个全局变量,是为了打包之后接口也能正常使用

这一步是因为本地请求的时候是通过api进行转换的,打包之后不需要转换,所以要把api去掉

  1. // 全局定义对象
  2. let serverUrl = '/api/' //本地调试时
  3. // let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
  4. Vue.prototype.url =serverUrl;

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/100316
推荐阅读
相关标签
  

闽ICP备14008679号