一、vue搭建前端项目
详细过程如下
1、新建文件夹,此处打开cmd,安装vue-cli
npm install @vue/cli -g
安装时报错。。。
避坑:
1.1安装淘宝境像
npm install -g cnpm --registry=https://registry.npm.taobao.org
1.2切换淘宝镜像
npm config set registry https://registry.npm.taobao.org/
npm config get registry https://registry.npm.taobao.org/
再安装vue 脚手架就会快很多了
注:如果出现 ‘vue’ 不是内部或外部命令,也不是可运行的程序 或批处理文件,请移步 https://www.jianshu.com/p/23344acaa306
安装成功后是这个样子
2、创建一个vue前端项目
vue create 项目名称
以上是我学习过程的配置,大家可以根据自己的需要进行手动选择
通过这两个命令中的就可以启动项目,启动成功后
3、删除无关代码(vue2和3略有不同)
3、引入静态文件
地址:https://gitee.com/xiaoqiang001/online-retailers.git
找到static 放到public文件下
4、全局Echarts对象挂载
首先在index.html 文件里
5、axios的封装与挂载
npm install axios
同样在main.js 中
// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
// 将axios挂载到Vue的原型对象上
// 在别的组件中 this.$http
Vue.prototype.$http = axios
二、路由测试
在views 文件夹下创建SellerPage.vue组件,该组件是针对于 /sellerpage 这条路径而显示出来的,在这个组件中, 通过子组件注册的方式, 要显示出Seller.vue这个组件。
首先设置路由
即说明路由到/sellerpage时,所找到的组件是SellerPage。这个组件将会呈现在App.vue中,所有在该组件中补充路由占位符
最后测试一下
在浏览器输入
http://localhost:8999/#/sellerpage
即路由已通。
三、布局结构设计
具体如下:
样式:
在入口文件处进行进行引入
四、柱状图简单实现
首先初始化echarts对象
initChart () {
//使用chartInstance变量来接收初始化对象
this.chartInstance = this.$echarts.init(this.$refs.seller_ref)
}
然后通过接口获取数据,注意数据获取完之后,调用updateChart()来更新数据。
更新图表数据
展示如图: