文章目录
- 创建vue3.0项目
- 项目初始化
- 项目分辨率响应式设置
- 项目顶部信息条创建
- 页面主体创建
- 全局引入echarts和axios
- 后台接口创建express
- 销售总量图实现
- 完整项目下载
项目任何问题都可在评论区,或者直接私信即可。
创建vue3.0项目
创建项目:
vue create vueecharts
选择第三项:
Vue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)
> Manually select features
继续选择,然后回车:
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex
>(*) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing
选择vue版本3.0:
? Choose a version of Vue.js that you want to start the project with
> 3.x2.x
剩下步骤:
运行项目:
cd vueecharts
pnpm/npm run serve
打开浏览器:
项目初始化
清空无用代码和文件:
-
删除
views
中的页面;新建HomeView.vue
。 -
删除
App.vue
中的多余代码。-
<template><router-view/> </template><style lang="less"></style>
-
-
修改路由