乐趣区

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

jiezi

vue我的项目中应用 echarts

原生 js 的话，须要引入 cdn；vue 开发的话，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"

办法总结如下：

  • 给容器，容器得有高度
  • 给数据
  • 初始化
  • 绘图表
<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
退出移动版