关于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）=>{})
   注：自定义事件名称统一

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