背景
搭建基于 Vue3.0 的极简前端脚手架，方便后续快速验证想法以及项目实施。
涉及到的技术及组件： Vue3.0 , ElementPlus , axios , vue-router , vuex , Echarts 。
Note:
- 前提需要有
Node.js环境，可使用nvm进行Node.js的多版本管理。
npm install <package>默认会在依赖安装完成后将其写入package.json，因此安装依赖的命令都未附加save参数。
$ node -v v12.16.1
安装vue-cli并创建项目
npm install -g @vue/cli vue --version vue create hello-world
刚开始的 package.json 依赖是这样：
"dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" },
集成ElementPlus
- 安装依赖
npm install element-plus
此时， package.json 的依赖变为：
"dependencies": { "core-js": "^3.6.5", "element-plus": "^1.1.0-beta.7", "vue": "^3.0.0" },
- 配置，修改main.js中的内容：
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // createApp(App).use(store).use(router).mount('#app') const app = createApp(App); // 集成ElementPlus import ElementPlus from 'element-plus'; // import 'element-plus/dist/index.css' // 官方推荐 import 'element-plus/theme-chalk/index.css'; app.use(ElementPlus); app.use(store).use(router).mount("#app");
- 使用element-ui
<template> <div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </div> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ name: "ElementUIDemo", setup() {}, }); </script>
- 使用效果
参考 ElementPlus 官方文档：element-plus.gitee.io/#/zh-CN/com…
集成Axios
- 安装依赖
npm install axios
此时， package.json 的依赖变为：
"dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "element-plus": "^1.1.0-beta.7", "vue": "^3.0.0" },
- 按需引入
在需要使用axios的组件中引入 import axios from "axios";
- 使用axios
<template> <div>{{ info }}</div> </template> <script> import { defineComponent } from "vue"; import axios from "axios"; export default defineComponent({ name: "AxiosDemo", setup() {}, data() { return { info: null, }; }, mounted() { axios .get("https://api.coindesk.com/v1/bpi/currentprice.json") .then((response) => (this.info = response.data)); this.callApi(); }, methods: { callApi: function () { axios.get("/api/book/list?userId=1").then( function (res) { if (res.status == 200) { console.log(res.data); } else { console.error(res); } }, function (res) { console.error(res); } ); }, }, }); </script>
- 使用效果
参考 axios 源码及文档地址：github.com/axios/axios
集成Echarts
- 安装依赖
npm install echarts
此时， package.json 的依赖变为：
"dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "echarts": "^5.1.2", "element-plus": "^1.1.0-beta.7", "vue": "^3.0.0" },
- 使用Echarts
<template> <div id="chart" :style="{ width: '1000px', height: '550px' }"></div> </template> <script> import * as echarts from "echarts"; export default { name: "EchartsDemo", setup() {}, mounted() { this.getEchart(); }, methods: { getEchart() { let myChart = echarts.init(document.getElementById("chart")); myChart.setOption({ title: { text: "ECharts 入门示例", }, tooltip: {}, legend: { data: ["销量"], }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }); window.onresize = function () { console.log("Resized.."); myChart.resize(); }; } } }; </script>
- 使用效果
参考Echarts官网：echarts.apache.org/zh/index.ht…
可能遇到的错误
eslint默认规则导致不必要的报错
如果开启了 eslint ，新增 Component 时，报错:
The "EchartsDemo" component has been registered but not used vue/no-unused-components
解决方法：在 package.json 或 .eslintrc.js 的eslintConfig下添加：
"rules": { "vue/no-unused-components": "off", // 当存在定义而未使用的组件时，关闭报错 "no-unused-vars":"off" // 当存在定义而未使用的变量时，关闭报错 }
- 开发环境跨域
方法一：在前端进行配置，新建 vue.config.js 文件，内容如下：
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8000/', changeOrigin: true, ws: true, secure: true, pathRewrite: { '^/api': '' } } } } };
方法二：因为后端服务是我们自己开发的，所以可以在后端进行CORS配置
@Configuration public class CorsConfig implements WebMvcConfigurer { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**"). allowedOriginPatterns("*"). allowedMethods("*"). allowedHeaders("*"). allowCredentials(true). exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L); } }; } }
