Vue中使用echarts以及项目部署Nginx

vue项目中使用echarts

原生js的话,需要引入cdnvue开发的话,npm i echarts --save

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

// main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 在特定文件中使用echarts
import echarts from "echarts"

方法总结如下:

  • 给容器,容器得有高度
  • 给数据
  • 初始化
  • 绘图表
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.jsnginx)