VUE3环境搭建

1.下载安装node.js

 下载地址：nodejs下载

  a.选择安装目录

 

 可以不勾选需要的工具

 

2.替换成淘宝镜像源

npm install -g cnpm --registry=https://registry.npm.taobao.org 查看是否成功 cnpm -v

3.安装vue的脚手架工具

cnpm install -g @vue/cli

 vue2.0使用 npm install -g vue-cli

4. 创建vue项目

  4.1使用vue-cli

vue create vue-1

 使用vue3创建的项目需要在根路径下创建vue.config.js,里面配置自定义配置,比如配置proxy

 4.2 创建带有webpack模板的项目

vue init webpack vue2

5. 运行项目

cd vue-1 cnpm install npm run serve

6 安装axios,那个模块需要就在那么模块import

cnpm install --save axios vue-axios 引入main.js import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)

7. 安装路由

npm install vue-router

通过 Vue.use() 明确地安装路由功能

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

8.安装elementui

安装 npm install element-ui --save //引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

9.导出excel

post导出 axios({ method: "POST", url: "/api/user/export", data: { ids: this.ids }, responseType: 'blob' }) .then(res => { console.log(res.data); const link = document.createElement("a"); let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); link.style.display = "none"; link.href = URL.createObjectURL(blob); let dateStr = new Date().toLocaleDateString(); link.setAttribute("download", "角色表_" + dateStr + ".xlsx"); document.body.appendChild(link); link.click(); document.body.removeChild(link); this.$message.success("导出成功"); }) .catch(err => { this.$message.error("导出出错"); }); get导出 window.location = "http://127.0.0.1:8888/role/export";