关于vue.js:vue后台管理系统搭建

前提

装置 node.js
控制台装置 yarn：npm install -g yarn
查看 yarn 版本：yarn –version

注：-g示意的是全局装置

1. 淘宝镜像装置：npm install -g cnpm --registry=https://registry.npm.taobao.org
   作用：装置胜利后 应用 cnpm i xxx 代替 npm install xxx
2. 解决 VScode 禁用脚本报错

1. 以管理员身份运行 vscode
2. 执行：get-ExecutionPolicy，显示 Restricted，示意状态是禁止的
3. 执行：set-ExecutionPolicy RemoteSigned — 无任何反馈
4. 这时再执行 get-ExecutionPolicy，就显示 RemoteSigned — 曾经好了 – 若没好，去百度再找解决办法

我的项目局部

1. 装置脚手架：

   • 在有 node.js 的状况下间接用，就是有点慢：npm install -g @vue/cli
   • 若装置 yarn 后可用：yarn global add @vue/cli
   • 装置淘宝镜像后可用：cnpm install -g @vue/cli

查看 vue 版本：vue –version 或 vue -V (简写 - 是大写的 ”V”)

降级(可省略)：

• npm update -g @vue/cli
• yarn global upgrade --latest @vue/cli
• cnpm update -g @vue/cli

2. 创立我的项目

   vue create 我的项目名
vue ui

以 vue create 我的项目名形式创立

创立我的项目模式(Please pick a preset)：Manually select features(手动抉择个性)

• Babel：把 es6 转 es5– 争对低版本浏览器
• Router：路由
• CSS Pre-processors：用来 less 和 sass 的 css 编译工具
• Linter / Formatter：代码标准校验

是否应用 history 做路由模式 (Use history mode for router?):N – 兼容不太好
应用什么预处理器 (Pick a CSS pre-processor …)：Less – 会哪个，选哪个。
代码格局校验标准 (Pick a linter / formatter config)：ESLint + Standard config
什么时候触发代码校验(Pick additional lint features)：

• Lint on save (当批改保留代码时)
• Lint >and fix on commit (当执行提交时)

配置文件生成的信息 (Where do you prefer placing config for Babel, ESLint, etc.?)：In >dedicated config files – 生成独立的配置文件
是否将上边一系列的抉择做记录(Save this as a preset for future projects?)：n

根本我的项目的雏形曾经创立好了

各文件 / 文件夹的作用

内置模块

• 路由

1. 如果父路由有默认子路由，就不要给父路由起名字了 – 会正告但不报错
2. 子路由的 path 为空，会作为默认子路由渲染

• 导航守卫
  router.beforeEach((to, from, next) => {}) 所有的导航都会通过导航守卫

• to：行将要进入的指标 路由对象 – 判断拜访的是不是特定页面(有权限关系)，若不是则给予放行
• from：以后导航正要来到的路由 – 个别没用
• next：放行的办法 –next()示意给予放行，也能够写要去到的页面地址

扩大介绍

1. ESLint 是一个代码格局校验工具

2. vue 代码快捷片段 -vue.jsom
   通过 $ 加数字快捷光标地位
   根本架构：

     "对这个架构的阐明": {
              "prefix": "快捷词 -- 个别为单词",
              "body": ["须要写的代码片段"],
              "description": ""// 不必管
      }
   

外置插件退出

GIT 库

• 近程：

1. 有 github 账号 — 若没用，本人创立一个
2. 创立一个我的项目
3. 配置 key：(若不配置会报这个谬误：Please make sure you have the correct access rights and the repository exists. — 解释：无权拜访 )— 参考

1. 删除.SSH 文件下的 known_hosts (默认在这个里 C:\Users\ 电脑名.ssh)
2. 从新生成 ssh 公钥认证所需的公钥和私钥文件：

具体操作：

1. 终端运行：ssh-keygen -t rsa -C "你 git 账号名字 / 你 git 账号邮箱" – 回车
2. 接管内容：

• Generating public/private rsa key pair.
• Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa): – 回车 — 这个地址要记住 — 能够改地址，然而不倡议改
• Enter passphrase (empty for no passphrase)：– 不要输明码间接回车，不然你每次上传都要输明码
• Enter same passphrase again: – 与上边一样间接回车
• 而后零碎会主动在 C:\Users\ 用户名 \.ssh 文件夹下生成两个文件，id_rsa 和 id_rsa.pub
• 用记事本关上 id_rsa.pub，将外面的内容复制下来，拷贝到 github 账号设置中 (settings) 下 ”SSH and GPG keys” 目录. 新建一个 ”SSH keys” 名字自起，内容拷到内容区
• 验证是否胜利：在 Git 中输出 ssh -T git@github.com 验证是否与 github 连贯是否胜利时
• 失败的回复：git@github.com: Permission denied (publickey).

• 胜利的回复：The authenticity of host ‘github.com (xxx .xx.xxx.xxx)’ can’t be established.

  • RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
  • Are you sure you want to continue connecting (yes/no/[fingerprint])? — 必须输 yes 或者 no，否则不胜利 – 输 yes
  • 若没有输 yes 或 no 会返：Please type ‘yes’, ‘no’ or the fingerprint: – 而后输 yes
  • Warning: Permanently added ‘github.com,xxx.xx.xxx.xxx’ (RSA) to the list of known hosts.
  • Hi 账号名! You’ve successfully authenticated, but GitHub does not provide shell access.

• 本地：

1. 初始化库：git init
2. 创立用户和邮箱：git config –global user.name “ 自启名字，写引号内 ” — git config –global user.email “ 我的邮箱 ”
3. 将文件增加到暂存区：git add 文件名加后缀，无引号 — 通过 git add . 的模式上传以后文件夹的所有内容
4. 把暂存区文件提交到本地仓库造成历史记录：git commit -m “ 对本次提交的阐明，能够时文本或英文写在引号内 ”
5. 增加近程仓库的地址到本地厂库：git remote add origin git@github.com:Samele-248/front-page.git
6. 推送到近程厂库：git push –set-upstream(简写 -u）origin 分支名( 个别就是括号里的那玩意)
7. 删除指定的近程厂库：git remote remove 厂库名称(例如:origin)
8. 查看有哪些厂库：git remote -v
9. 批改近程厂库地址信息：git remote set-url 近程厂库名称(已有厂库名) 新地址
10. 切换分支：git checkout“name”
11. 查看本地分支：git branch
12. 查看近程分支：git branch -r
13. 可能呈现的谬误：无奈跟新

• 输出指令：git push -u origin master

• 报错：

  • error: failed to push some refs to ‘git@github.com
  • hint: Updates were rejected because the tip of your current branch is behin
  • hint: its remote counterpart. Integrate the remote changes (e.g.
  • hint: ‘git pull …’) before pushing again.

  • hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.

    起因 ：github 中的 README.md 文件不在本地代码目录中
    解决办法 ：能够通过如下命令进行代码合并[注：pull=fetch+merge]
    输出指令 ：git pull –rebase origin master
    执行下面代码后能够看到本地代码库中多了 README.md 文件
    再次执行：git push -u origin master 即可实现代码上传到 github

axios 申请

• 封装：

  1. 封装一个 axios 组件，方便使用 – 用于申请数据

  axios.create({进行配置})：相似于实例化 axios 对象，，能够解释为复制一个 axios，不同的 axios 实例能够有不同的配置，且不会相互发生冲突 – 复制进去的 axios 与 axios 自身性能一样, 用一个变量承受 axios.create()

  • 示例写法

    const request = axios.create({baseURL: 'http://www.baidu.com'// 申请地址的公共局部})

• 拦截器：

申请拦截器

request.interceptors.request.use(
 // config 是申请的相干配置信息对象，能够在此处批改
 function (config) {
   // 此处对立设置 token
   const user = JSON.parse(window.localStorage.getItem('user'))
   if (user) {config.headers.Authorization = `Bearer ${user.token}`
   }
   // 发送申请
   return config
   // 当 return 后申请才算发送进来，没有 return 则申请发送不进来
 },
 function (error) {return Promise.reject(error)
 })

• 应用时报错：To install it, you can run: npm install –save core-js/modules/es.object.to-string.js — 版本问题，装置 core-js 的最新版
• 解决 ：npm install core-js@3.6.4 或 yarn add core-js@3.6.4 – 这个版本号可能随工夫变动可能作废，若不行，在换版本
  装置好后从新运行(启动我的项目)：npm run serve 或 yarn serve
• 解决 axios 申请的数据因为位数太大而精度不准：(可能用不到)
• 起因：axios 为了不便，会在外部应用 ”JSON.parse” 把原始的 JSON 格局字符串转为 js 对象 – 数据超出精度尾部数据化零
  JSON 对过大数字会有 ” 格式化 ” 解决，使数据变成开端为零的 – 让数据不是原始数据
• 解决：装置扩充数据的包：npm i json-bigint

• 解释 ：BigNumber 会把超出 js 平安整数范畴的数组转为一种 BigName 类型的对象，须要还原时应用 BigNumber.toString() 失去原来正确的数据

  const request = axios.create({
   baseURL: 'http://www.baidu.com', // 申请地址的公共局部
   // 数据再解决 -- 定义一个后端返回的原始数据的解决
   transformResponse: [function (data) {
   // // 参数 data 就是后端返回的原始数据（未通过 JSON 格局解决的数据）try { // 后端返回的数据不肯定是一个 JSON 格局的字符串，如果不是，应用 JSONbig.parse 就会报错
       return JSONbig.parse(data)
       // console.log(JSONbig.parse(data))
     } catch (e) {// console.log('打印 axios 非 json 数据', e)
       return data
     }
   }]
  })

• 参数阐明：

  • 申请头参数在 headers 中设置 –headers:{对应数据值}
  • 门路中的 ”:xxx” 示意门路参数，应用时须要指定参数，用以替换 ”:xxx”
  • 申请体参数 (post 申请的数据) 通过 data 设置 — data: {对应数据}
  • 查问参数 (Query 参数) 通过 params 设置 –params: {相应数据} – 个别为非必须的
    注：Body 参数应用 data 设置、Query 参数应用 params 设置、Headers 参数应用 headers 设置

Element-ui

• from 表单验证：

  • 必须给 el-from 组件绑定 model 为表单数据对象
  • 给须要验证的表单项 el-form-item 绑定 prop 属性
  • 注：prop 属性须要指定表单对象中的数据名称
  • 通过 el-from 组件的 rules 属性配置验证规定
  • trigger：验证期间 –blue：(失焦后触发)、change：(产生扭转时触发)

• 根本验证规定：

  • required：必填项
  • pattern：正则表达式 — /^xxxxxx/
  • range：应用 min 和 max 属性定义范畴对于字符串和数组类型，将依据长度进行比拟，对于数字类型，数字不敌小于 min，也不得大于 max
  • len：要验证字段的确切长度

  • validator：自定义校验规定 — 后跟一个函数，接管三个参数(rule,value,callback)=>{}

    • rule：表单的验证规定，是个对象，个别不必然而要写
    • value：验证项的值，输入框是值，布尔项是布尔值
    • 验证胜利：callbace()
    • 验证失败：callback(new Error( ‘ 谬误音讯 ’) )

{validator (rule, value, callback) {if (value === '<p></p>') { // 判断 value 里边的值的内容是不是 '<p></p>'
      callback(new Error('请输出文章内容'))
    } else {callback()
    }
  }
}

• 手动触发表单验证：

  • 给 el-from 设置 ref，起个名字 – 不反复 — vue 里边管制 dom 的一种形式
  • 通过 ref 获取 el-form 组件，调用组件的 validate 进行验证
  • this.$refs[ref 值].validate((valid) => {});
• 表格 ：如果想在自定义列模板中获取以后遍历数据，则须要在 template(插槽) 上申明 slot-scope=” 一个任意的名字 ” – 例如：template slot-scope=”scope”
• 日期 ：工夫的数据是一个数组，设置时，工夫有一个清空性能，当点击清空，数据就变成 null，此时便波及到 null[0] 和 null[1]的值，这两个不存在值，所以要做非空判断，判断工夫的数据有没有值，若没有值，便将它格局为 null 值，若有值则应用值

css

1. 当给 style 标签里边退出款式限度 (scoped) 本页面无效时，不能够批改 element 的款式，此时要批改 element 的款式则要 ” 击穿 ”
   击穿的办法之一：/deep/
   格局：/deep/ 要改的类名 (框架里边的类名 - 间接拷贝){款式}

      /deep/ .el-form-item__error {top: 70%;}

2. 布局撑满全屏(不定高 – 宽( 组合件，左侧的定宽不定高，右侧上边定高，宽度撑满)，相对定位绝对各边距为零 )
   axios 能够通过 headers 选项设置申请头

引入

引入地址的 import 后跟的地址中 ”@” 是 src 目录的门路，后边间接跟斜杆
倡议：如果加载的资源门路就在当前目录下，那就失常，但凡须要父级门路查找的都应用 ”@”

当你给事件处理函数传递了自定义参数当前，就无奈失去本来事件的参数
如果想在事件处理函数自定义传参当前，还想得到原来那个事件自身的参数，则手动指定 $event，他就代表事件自身的参数

全局通信总线：

1. 创立一个公共组件，引入 vue 实例，导出 vue

import vue from 'vue'
export default new vue()

2. 引入组件：import 自定义名字 –a from‘地址’
3. 公布方：a.$emit(‘ 自定义事件名 ’, 可选参数)
4. 注册方：a.on(‘ 自定义参数 ’，（val）=>{})
   注：自定义事件名称统一

若有所获，能够留下一个赞~