目录
(26)使用vue-table-with-tree-grid树形表格组件
(31)优化-babel-plugin-transform-remove-console
(33)优化-通过vue.config.js 修改webpack的默认配置
(35)优化-configureWebpack和chainWebpack
(1)启动vue图形界面配置vue工程
vue ui
(2)生成ssh并添加至Gitee
黄色区域改成自己登录码云得帐号邮箱 三次回车就行 生成得密码串拷贝进gitee配置ssh项中
创建并切换到login子分支
(3)Router格式记录
(4)VUE 盒模型居中
(5)配置axios
(6)导入饿了么弹框组件
(7)本地保存和获取token
(8)路由跳转
(9)路由导航守卫控制访问权限
(10)退出功能实现原理-清除token+页面跳转
(11)eslint语法格式警告问题
直接添加一个.prettierrc文件,无后缀
(12)Git本地代码提交远程主分支
git status查看
git add暂存区
git commit -m "xxxx附带的备注信息" 提交到本地仓库
合并到主分支流程
远程推送云端
(13)Git本地代码提交远程login分支
login是随意命名的分支
(14)element按需引入格式
(15)通过axios拦截器添加token拦截
需要授权的API,必须在请求头中使用Authorization字段提供token令牌 main.js中添加
(16)get post put delete请求格式
get
put
post
delete
(17)slot-scope获取当前行值
(18)自定义邮箱和手机号的校验规则
// 自定义邮箱规则
var checkEmail = (rule, value, callback) => {
const regEmail = /^\w+@\w+(\.\w+)+$/
if (regEmail.test(value)) {
// 合法邮箱
return callback()
}
callback(new Error('请输入合法邮箱'))
}
// 自定义手机号规则
var checkMobile = (rule, value, callback) => {
const regMobile = /^1[34578]\d{9}$/
if (regMobile.test(value)) {
return callback()
}
// 返回一个错误提示
callback(new Error('请输入合法的手机号码'))
}
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
(19)提交前验证内容规则
(20)单独引入MessageBox组件
import { MessageBox} from 'element-ui'
(21)Git本地代码新建且提交远程user分支
1.git checkout -b user 创建并切换
2.git branch 看分支
3.git status 查看情况
4.git add . 暂存
5.git commit -m "备注信息" 提交本地
6.git push -u origin user 远程提交并创建新分支(第一次需要)
(22)Git本地代码主分支合并
(23)Git远端代码主分支合并
(24)展开列和索引列
pre 元素可定义预格式化的文本
(25)...合并成数组并加入符号
(26)使用vue-table-with-tree-grid树形表格组件
(27)文本框自动获取焦点
(28)自定义格式化时间的全局过滤器
(29)省市区/县联动
<el-form-item label="省市区/县" prop="address1">
<el-cascader
v-model="addressForm.address1"
:options="cityData"
:props="{ expandTrigger: 'hover' }"
></el-cascader>
</el-form-item>
链接:https://pan.baidu.com/s/1S2rp1hSzyQTN-PJ5zoKMxQ
提取码:n1js
复制这段内容后打开百度网盘手机App,操作更方便哦--来自百度网盘超级会员V4的分享
(30)优化-VUE优化之n'progress
// 导入NProgress, 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import axios from 'axios'
// 配置请求根路径
// 本机地址
// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 远程后台地址
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
// 在request 拦截器中, 展示进度条 NProgress.start()
// 请求在到达服务器之前,先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
NProgress.start()
// console.log(config)
// 为请求头对象,添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})
// response 拦截器中, 隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
NProgress.done()
return config
})
(31)优化-babel-plugin-transform-remove-console
(32)优化-生成打包报告
(33)优化-通过vue.config.js 修改webpack的默认配置
(34)优化-为开发模式与发布模式指定不同的打包入口
(35)优化-configureWebpack和chainWebpack
(36)优化-通过chainWebpack自定义打包入口
(37)优化-通过externals 加载外部CDN资源
对比 明显压缩
(38)优化-通过CDN优化ElementUl的打包
(39)优化-首页内容定制
(40)优化-路由懒加载
(41)上线-通过node创建web服务器
(42)上线-开启gzip配置
(43)上线-配置HTTPS服务
(44)上线-使用pm2管理应用
关闭该PowerShell窗体,服务127.0.0.1也就随之关闭⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆