vue前端项目架构介绍

一、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()来更新数据。

更新图表数据

展示如图：