关于vue.js:Vue中使用echarts以及项目部署Nginx

`vue`我的项目中应用echarts

原生js的话，须要引入cdn；vue开发的话，npm i echarts --save

main.js中引入echarts，和service、element-ui一样，先导入，再全局挂载

// main.jsimport echarts from 'echarts'Vue.prototype.$echarts = echarts// 在特定文件中应用echartsimport echarts from "echarts"

办法总结如下：

给容器，容器得有高度
给数据
初始化
绘图表

<div class="main1" style="height:300px"></div><div class="main2" style="height:300px"></div>let myChart1 = this.$echarts.init(document.getElementClassName("main1"))myChart1.setOption({    title:{        text:"题目"    },    xAxis:{        data:["广东","江苏","山东","陕西"]    },    yAxis:{},    series:[{      name:"资产状况",      type:"bar",      data:[34,23,54,56]    }]    })let myChart2 = this.$echarts.init(document.getElementClassName("main2"))let option = {     title:{        text:"题目"    },    xAxis:{        data:["广东","江苏","山东","陕西"]    },    legend:{        data:["线条1","线条2","线条2","线条3"]    },    yAxis:{},    series:[{      name:"线条1",      type:"line",      data:[34,23,54,56]    },      name:"线条2",      type:"line",      data:[24,13,55,36]    },{      name:"线条3",      type:"line",      data:[31,86,25,86]    },{      name:"线条4",      type:"line",      data:[14,53,25,06]    }]}myChart2.setOption(option);

express启动nodeJS后端服务

初始化，失去一个package.json文件

npm init -y

下载配置文件内文件

npm i express -S

这样后端环境就搭建好了

应用原生js写接口

// 文件是app.js// 导入模块let express = require("express");// 创立实例let app = express()app.get('/',(req,res)=>{   // 第一个参数是url，第二参数是回调函数    res.send("Hello,World")})app.litsen(3000,()=>{  // 监听3000端口,以及回调函数    console.log("express start at export 3000")})

跑我的项目node app.js

还能够写其余的接口

引入Json数据

应用geoJson包

import geoJson from "../../data.json"

路由导航守卫(没有验证的话一种强制跳转)

在登陆零碎中，没有路由导航守卫的话，localhost:8080:/home，就能够跳过login界面，间接登陆到零碎内。增加导航守卫的话，拜访localhost:8080:/home就会跳到localhost:8080:/login

router.beforeEach((to,from,next)=>{    let flag = localStorage.getItem("username"); //验证的话须要再LocalStorage外面删掉username    if(!flag){        if(to.path != '/login'){            next("/login")        }else{            next();        }    }else{        next();    }})

登陆之后，LocalStorage外面存储了username，再次拜访/home就能够间接拜访

打包我的项目

npm run build

部署我的项目

应用nginx。

brew config先查看本人的镜像源是不是国内的，而后下载nginx即可brew instal nginx

下载好nginx当前批改nginx配置，次要是端口和本地我的项目地址

// 查看nginx装置目录open /usr/local/etc/nginx// nginx.config 批改打包后的dist文件地址到 配置文件里的root// 激活配置文件nginx -t -c /opt/homebrew/etc/nginx/nginx.config// 启动我的项目brew service restart nginx// 进行我的项目nginx -s quit

vue我的项目中应用echarts