vue数据可视化界面，智慧图表。Echarts，以及git
一、数据图表
一张图表胜过千万句话
1.1HighChart
- 概念
兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
- 下载
一、通过CDN
https://code.highcharts.com.cn/index.html
二、通过NPM下载（用的比较多）
npm install highcharts
三、通过官网下载
https://www.highcharts.com.cn/download
通过引入库的方式引入到本地
- 基本应用
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="./node_modules/highcharts/highcharts.js">script>
<style>
#box {
width: 600px;
height: 500px;
}
style>
head>
<body>
<div id="box">div>
<script>
//创建图表的配置项
let options = {
chart: {
type: "bar", //指定图表的类型，默认是折线图（line）
},
credits: {
//版权信息 （去除）
enabled: false,
},
title: {
text: "学习天数", // 标题
},
xAxis: {
categories: ["vue", "angualr", "React", "node"], // x 轴分类
},
yAxis: {
title: {
text: "学习的时长", // y 轴标题
},
},
series: [
//如果数据图表的数据是来自于后端，替换这个数组即可
{
// 数据列
name: "小王", // 数据列名
data: [15, 0, 4, 1], // 数据
},
{
// 数据列
name: "小李", // 数据列名
data: [25, 0, 4, 100], // 数据
},
{
// 数据列
name: "小张", // 数据列名
data: [45, 0, 4, 10], // 数据
},
],
};
console.log(Highcharts, "核心库");
//chart 默认需要三个参数，我只填两个。第一个，你需要渲染的容器位置，第二个就是配置项
let charts = Highcharts.chart("box", options);
script>
body>
html>
1.2Echarts（用的更多一些）
- 官网地址
https://echarts.apache.org/zh/index.html
- 概念
一个基于 JavaScript 的开源可视化图表库
- 下载方式
一、通过CDN
jsdelivr.com/package/npm/echarts
二、通过NPM(通过NPM)
npm install echarts
三、通过官网
https://echarts.apache.org/zh/download.html
四、通过github
https://github.com/apache/echarts/releases
1.3如何在vue脚手架中引入Echarts
- 局部引入
- 全局引入
main.js
//全局引入echart
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
home.vue
二、git代码管理
2.1代码管理工具
- svn (小乌龟)
https://tortoisesvn.net/
- git (命令)
- github(所有开源项目的归属地)
https://github.com/
- 码云
https://gitee.com/
- git软件
https://git-scm.com/
注意点：
无论是gihub还是码云，他们都是用git命令去操作的。所以命令都一样
git软件的安装，下一步，下一步，傻瓜式安装即可
装成功的状态： 鼠标右键看到 git Bash Here 就OK
2.2 git基本命令
- 打开git软件
鼠标右键看到 git Bash Here
- 查看当前目录
pwd
- 进入到某一个目录
cd 文件夹
- 查看文件 和 文件详情
ls 和 ll
- git 初始化
git init
这个时候会创建一个隐藏的.git文件
- 设置git的用户名和 email
git config --global user.name '你的名字'
git config --global user.email '你的邮箱'
- 查看所有配置列表
git config --list
- 文件的添加
git add . 添加当前目录下的所有文件以及文件夹
git add * 添加当前目录下的所有文件以及文件夹
git add *.txt 添加一类文件
git add 文件名称 添加某一个文件
- 查看日志
git log
- 查看详细日志
git reflog
查看到版本号 eg:2b07c3f
- 回退版本
git reset 版本号 --hard
根据你指定的版本号进行回退
- 删除文件
git rm 文件或者文件夹
记得删除之后 一定要提交
add
commit
push
的整理流程
- 分支
上线之前，做大量的测试工作，你也回修改N个Bug
之后的开发工作，就不能在这个版本进行
我们会封版。eg:master 封板不能用
领导会创建一个新的分支，这个新的分支在创建的时候，默认就把以前的内容全部带过来了。接下来的开发就这个分支做
git branch 查询分支
git branch 分支名 创建分支
git checkout 分支名 切换分支
- 在新创建的分支下创建项目内容
git add 文件/文件夹
git commit -m '日志'
git push --set-upstream origin 分支名称
2.3创建一个远程仓库 （新项目）
先去GitHub/码云创建一个新的远程仓库，然后把本地暂缓区的内容提交到远程仓库
一、登录github/码云输入用户名密码
二、新建一个远程仓库，在官网右上角（点击+ ）
三、创建一个仓库名称，添加仓库描述，创建一个公有的仓库，不需要为仓库创建其他内容
在公司的创建一个新项目的骚操作
一般这一部分，轮不到大家去做。
一、在本地创建一个文件夹，创建相关的基本骨架
二、初始化当前文件夹变成本地仓库(会出现一个.git的隐藏文件)
git init
三、本地的所有内容上传到暂缓区
git add .
四、提交的时候要做记录
git commit -m '尽量写英文，非要写写中文也可以'
五、链接远程仓库
git remote add origin https://gitee.com/zhangzhangzhangdada/shop-admin.git
六、把暂缓区的内容推送到远程仓库 (master 默认的分支名字)
git push -u origin master
2.4 进入一个公司第一天的骚操作
在自己电脑创建一个文件夹，把公司的项目克隆到本地
git clone https://gitee.com/zhangzhangzhangdada/shop-admin.git（仓库地址）
2.5 每天工作的骚操作
注意：
上传之前！！！一定先更新！！！！不要全量提交！！！
修改什么提交什么！！！
- 下载（拉取最新的内容到本地，早晨上班）
git pull 拉取（把远程仓库内容拉取到本地）
- 下班之前一定要提交代码
git pull 拉取（把远程仓库内容拉取到本地）
git add 文件/文件夹 添加
git commit -m '备注信息'
git push
- 解决冲突
一定要先拉取，然后解决版本冲突，然后重新提交
2.6 其他
git GUI
https://www.sourcetreeapp.com/
vscode步骤
克隆步骤（操作一次即可）
先创建一个空文件
源代码管理（左侧第三个），点击上方... 点击克隆，把远程仓库的内容克隆到本地的空文件中
=======================
上下班的工作
当当前目录下的文件以及文件夹发生变化的时候，源代码管理（左侧第三个）就跟着发生变化。你就可以点击+号（添加的过程），提交到暂缓区，需要你输入log赋值，回车。
...上选择推送，推送到远程仓库
三、项目的打包
上线之前，你的项目要进行打包
npm run bulid
生成 dist 文件夹
如果你有服务器，就把前端代码和后台一起部署
如果没有，没事，在工作中是运维或者后端人员去部署 Nginx服务器
四、SSR服务端渲染
4.1 官网地址
https://ssr.vuejs.org/zh/
4.2 概念
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
4.3优缺点
- 优点
更利于SEO优化
运行速度更快
- 缺点
开发条件有所限制
vue中一些自带的生命周期以及钩子函数有可能失效
运行环境有所限制
node 服务器
4.4 下载安装SSR和VUE
npm install vue-server-renderer
npm install vue
4.5 创建一个node服务器
//引入核心库
let express = require('express')
let app = express()
//创建get方式
app.get('/',(req,res)=>{
res.send('哈哈哈哈')
})
//创建监听
app.listen('4200',()=>{
console.log('======服务器运行中，撒花。。。====');
})
4.6 实现服务端渲染（运行模板字符串）
//引入 vue核心库
let Vue = require("vue");
//引入核心库
let express = require("express");
let app = express();
//实例化Vue
let vm = new Vue({
data: {
msg: "服务端好好好用。。。",
newslist:[
{
id:1,title:'111'},
{
id:2,title:'222'},
{
id:3,title:'333'}
]
},
template: "{
{msg}}
- 标题：{
{item.title}}
",
});
//创建渲染方法
let render = require("vue-server-renderer").createRenderer();
//创建模板字符串 renderToString这个函数有2个参数，默认是三个，一般只用两个，一、你要渲染的内容，2是回调函数
render.renderToString(vm, (err, html) => {
console.log(html, "模板内容");
//创建get方式
app.get("/", (req, res) => {
res.send(html);
});
});
//创建监听
app.listen("4200", () => {
console.log("======服务器运行中，撒花。。。====");
});
五、NUXT
5.1官网
https://zh.nuxtjs.org/
https://www.nuxtjs.cn/guide/installation(中文)
5.2 概念
使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。 一个 开源 框架，让 Web 开发变得简单而强大。
5.3 安装
npx create-nuxt-app <项目名>