一、数据图表
一张图表胜过千万句话
1.1HighChart
- 概念
兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
- 下载
一、通过CDN
https://code.highcharts.com.cn/index.html
二、通过NPM下载（用的比较多）
npm install highcharts
三、通过官网下载
https://www.highcharts.com.cn/download
通过引入库的方式引入到本地
- 基本应用
<!DOCTYPE html>
<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>Document</title>
<!-- 第一步引入核心库 -->
<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
- 局部引入
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
// 引入echarts
//es5引入方式
// let echarts = require("echarts");
//echarts 5.x版本 引入方式发生了变更 所有引入方式都是基于暴露的方式
// import 变量 from '位置'
// import {变量} from 'weizhi'
import * as echarts from 'echarts';
// import echarts from 'echarts'
export default {
data() {
return {};
},
mounted() {
//当组件一加载就渲染 数据图表（数据可视化）
let mycahrt = echarts.init(document.getElementById("container"));
let options = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
};
//设置配置项
mycahrt.setOption(options)
},
};
</script>
<style lang="stylus" scoped>
#container
width 800px
height 700px
</style>
- 全局引入
main.js
//全局引入echart
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
home.vue
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
//当组件一加载就渲染 数据图表（数据可视化）
let mycahrt = this.$echarts.init(document.getElementById("container"));
let options = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
};
//设置配置项
mycahrt.setOption(options)
},
};
</script>
<style lang="stylus" scoped>
#container
width 800px
height 700px
</style>
二、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: "<div><h1>{
{msg}}</h1><ul><li v-for='item in newslist' :key='item.id'>标题：{
{item.title}}</li></ul></div>",
});
//创建渲染方法
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 <项目名>
转载：https://blog.csdn.net/weixin_49030317/article/details/116666179
查看评论