vue+element的笔记

纯粹自学做的笔记:

目录

(1)启动vue图形界面配置vue工程

(2)生成ssh并添加至Gitee

(3)Router格式记录

(4)VUE 盒模型居中

(5)配置axios

(6)导入饿了么弹框组件

(7)本地保存和获取token

(8)路由跳转

(9)路由导航守卫控制访问权限

扫描二维码关注公众号,回复: 12876059 查看本文章

(10)退出功能实现原理-清除token+页面跳转

(11)eslint语法格式警告问题 

(12)Git本地代码提交远程主分支

(13)Git本地代码提交远程login分支

(14)element按需引入格式

(15)通过axios拦截器添加token拦截

(16)get post put delete请求格式

(17)slot-scope获取当前行值

(18)自定义邮箱和手机号的校验规则

(19)提交前验证内容规则

(20)单独引入MessageBox组件

(21)Git本地代码新建且提交远程user分支

(22)Git本地代码主分支合并

(23)Git远端代码主分支合并

(24)展开列和索引列

(25)...合并成数组并加入符号

(26)使用vue-table-with-tree-grid树形表格组件

(27)文本框自动获取焦点

(28)自定义格式化时间的全局过滤器

(29)省市区/县联动

(30)优化-VUE优化之n'progress 

(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管理应用


(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也就随之关闭⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆

猜你喜欢

转载自blog.csdn.net/qq_30430463/article/details/114921689