vue+element搭建项目（vue全家桶：Vue+Vue-router+Vuex+axios）

原创已于 2023-10-08 14:31:12 修改 · 1.9k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #javascript #html5 #css3

于 2021-02-01 17:28:58 首次发布

js 同时被 3 个专栏收录

6 篇文章

订阅专栏

vue.js

1 篇文章

订阅专栏

vue-router

1 篇文章

订阅专栏

本文介绍如何使用Vue CLI创建Vue项目，并安装配置Element UI组件库及axios库实现API调用。此外还介绍了如何解决跨域问题。

新建一个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;