查看后台管理系统搭建

前提

安装node.js
控制台安装Yarn：npm install -g Yarn
检查Yarn版本：Yarn - vers离子

注：-g表示全局安装

淘宝镜像安装：npm install -g cnpm --registry=https://registry.npm.taobao.org
功能：安装成功后，使用cnpm i xxx代替npm install xxx
修复 VScode 禁用脚本错误

以管理员身份运行vscode
Execution：get-ExecutionPolicy，显示Restricted，表示状态为禁止
执行：set-ExecutionPolicy RemoteSigned — 没有任何反应
这时候再运行get-ExecutionPolicy，就显示RemoteSigned了——已经准备好了——如果不好就去百度找解决方案

文章部分

安装走道：
- 可以直接与node.js一起使用，有点慢：npm install -g @vue/cli
- 安装yarn后可用：yarn global add @vue/cli
- 安装淘宝镜像后可用：cnpm install -g @vue/cli

查看Vue版本：vue –vers ion或vue -V（简写-大写“V”）

升级（可省略）：

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

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
   }
 }]
})

创建项目

vue create 项目名
vue ui

创建者查看创建的项目名称

创建项目模式（请选择预设）：手动选择功能（手动选择功能）

Babel：将 es6 转换为 es5 - 竞争低版本浏览器
路由器：路由
CSS 预处理器：less 和 sass 的 css 编译工具
Linter / Formatter：代码规范验证

是否使用history作为路由模式（路由器使用history模式？）：N - 兼容性不是很好
使用哪个预处理器（选择一个CSS预处理器...） : Less - Which将会有一个，选择哪一个。
代码格式验证规范（选择 Linter / Formatter 配置）：ESLint + 默认配置
触发代码验证时（选择其他 Lint 功能）：

保存时不起毛（当您更改代码并保存时）
Lint >并修复提交（如果您提交）

配置文件生成信息（您喜欢在哪里放置 Babel、ESLint 等的配置？）：在>专用配置文件中 - 生成一个单独的配置文件
是否包含上述设置（保存此选项）作为未来项目的预设？）：n

基础项目原型已创建

各个文件/文件夹的作用

打包后生成下下下下下下

文件名/文件夹	行动	类别	解释一下
公共		项目目录	附带
node_modules	依赖包	项目目录	自动生成
src	项目文件存储库	项目目录	附带
main.js	项目启动条目	项目目录	附带
App.vue	根部组件	项目目录	附带
yarn.lock	装上纱线后就变成了	项目目录	安装附带
package.json	取决于json包配置	项目目录	自生成
vue.config.js	全局配置	项目目录	自建
.eslintrc.js	代码规范包	项目目录	自动生成
api	投影这样的接口	src位于	自建
utils	工具模块	src位于	自建
款式	全局样式文件	src位于	自建
组件	设置路由公共组件	src位于	自建
观看次数	设置路由视图组件	src位于	自建
路由器	设置路由	src位于	自建

内置模块

路由

如果父路由有默认子路由，请勿调用父路由 - 但它不会警告错误
子路由的路径为空，设置为默认子路由

导航卫士

所有导航都经过导航卫士

to：要进入的目标路由对象——判断访问的页面是否为特定页面（有权限关系），如果不是则释放
from：离开当前导航的路线——一般没用
next：发布方法 –next() 表示发布，也可以写上你想要去的页面地址

扩展介绍

ESLint 是一个代码格式验证工具
2个字",
"body": [
"需要写的代码片段"
],
"description": ""//没关系}

添加外部插件

GIT 存储库

远程触发：

拥有一个 Github 帐户 - 如果不起作用，请自己创建一个
创建项目
配置密钥：（如果不配置，会报此错误：请确保您有正确的访问权限并且存储库存在。 — 说明：无访问权限） — 参考

.SSH 文件下的最后已知主机（默认为 C:\Users\Computer Name.ssh）
重新生成ssh公钥认证所需的公钥和私钥文件：

详细操作：

运行终端：ssh-keygen -t rsa -C "你git账号名字/你git账号邮箱" – 输入
收据内容：

生成公共/私有 RSA 密钥对。
用于存储密钥的文件 (/c/Users/Administrator/.ssh/id_rsa): –按 Enter –记住此地址 –您可以更改该地址，但不建议更改它
输入密码（空白为无密码）： - 不要输入密码后立即回车，否则每次上传都需要输入密码
再次输入相同的密码： – 直接如上输入
系统自动在文件夹C:\Users\用户名\.ssh下生成两个文件，id_rsa和id_rsa.pub
用记事本打开id_rsa.pub，复制里面的内容，复制到Github账户设置（settings）下的“SSH and GPG keys”目录下。新建一个“SSH秘钥”名称，并将内容复制到内容区
检查是否成功：在Git中输入ssh -T git@github.com，检查Github是否连接成功
响应失败：git@github.com：权限被拒绝（公钥）。
成功响应：无法确定主机“github.com（xxx .xx.xxx.xxx）”的真实性。
- RSA 密钥指纹为 SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8。
- 您确定要继续连接吗（是/否/[指纹]）？ - 必须输入Yes或No，否则不会成功 - 输入Yes
- 如果不输入yes或no，则返回：请输入“是”、“否”或指纹： - 然后在
- 警告：已将“github.com,xxx.xx.xxx.xxx”(RSA) 永久添加到已知主机列表中。
- 您好帐户名！您已成功通过身份验证，但 GitHub 不提供 shell 访问权限。

本地：

初始化库：git init
创建用户和邮箱： git config -global user.name "自动启动名称，写在引号中" - git config -global user.email "我的电子邮件"
将文件添加到暂存区： git add 文件名带后缀，不带引号 - 通过 git add 加载当前文件夹的所有内容。
将暂存区的文件提交到本地存储，形成历史记录： git commit -m "对于本次提交的描述，引号内可以写文字或英文"
将远程仓库的地址添加到本地工厂仓库： git remote add origin git@github.com:Samele-248/front-page.git
推送到远程工厂库：git push –set-upstream（缩写-u）源分支名称（通常是括号里的东西）
删除指定的远程工厂库：删除git远程工厂名称（如：origin）
检查哪些工厂库可用：git remote -v
更改远程工厂地址信息： git remote set -url 远程工厂名称（现有工厂名称）新地址
切换分支：git checkout "name"
查看本地分支：git分支
查看远程分支：gitbranch -r
可能的错误：无法更新

输入命令：git push -u origin master
错误报告：
- 错误：无法将某些引用推送到 'git@github.com
- 提示：更新已被拒绝，因为您当前分支的提示落后了
- 提示：他的远程同事。集成远程更改（例如
- 提示：“git pull ...”），然后再次按下。
- 提示：有关详细信息，请参阅有关快进和“git Push -help”的注释。

原因：github中的README.md文件不在本地代码目录中
解决办法：可以通过以下命令合并代码【注：pullfet】输入指令 : git pull –rebase origin master
运行以上代码后，可以看到github上本地代码库多了一个README.md文件

Axios 请求

包装：

封装了 Axios 组件，以便于使用 - 查询数据

axios.create({to configure})：与实例化一个axios对象类似，可以理解为一个axios的副本，不同的axios实例可以有不同的配置而不互相冲突——副本axios和axios本身也有同样的功能，使用一个变量来接受 axios.create( )

如何书写

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

拦截器：

请求拦截器

出现错误：安装可以运行：npm install –save core-js/modules/es.object.to-string.js —版本问题，安装最新版本的core-js
解决方案：npm install core-js@3.6.4 或添加yarn core-js@3.6.4 - 此版本号可能会随着时间的推移而改变，并可能变得无效。如果不是，请更改版本

安装后重复（启动项目）：npm runserve或yarnserve

原因：为了方便，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
   }
 }]
})

参数说明：
- 请求头参数设置在 header -headers:{对应的数据值}
- 路径中的“:xxx”表示路径参数，需要指定参数来替换“:xxx”
- 请求体参数（请求后数据）通过data设置 - data: { 对应数据}
- 查询参数（查询参数）通过params设置 –params: {对应数据} –一般不需要

注：body参数使用数据设置，查询参数使用参数设置，表头参数使用表头设置

Element-ui

来自表单验证：
- 模型必须作为表单数据对象绑定到 el-from 组件
- 将 prop 属性绑定到需要验证的表单项 el-form-item
- 注意：prop属性必须指定表单对象中的数据名称
- 使用 el-from 组件的 Rules 属性配置验证规则
- 触发：验证期-蓝色：（失焦后触发），变化：（发生变化时触发）
基本验证规则：
- 必填：必填元素
- 模式：正则表达式 — /^xxxxxx/
- 范围：使用 min 和 max 属性定义范围。对于字符串和数组类型，比较基于长度。对于数字类型，数字不得小于 min 或大于 max
- len：要验证的字段的确切长度
- validator：用户定义的验证规则 - 后面跟着一个接收三个参数（规则、值、回调）的函数 =>{ }
  - rule：表单的验证规则，是一个对象，一般不用，但必须写成
  - Value：验证项的值，输入框为值，布尔元素为布尔值
  - 验证成功：callbace( )
  - 验证失败：回调（new Error('ErrorMessage')）

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

触发手动表单验证：
- 为 el-from 设置引用，给它一个名称 - 不重复 - 一种控制视图中 dom 的方法
- 通过ref获取el表单组件，调用组件的validation进行验证
- this.$refs[参考值].validate((valid) => { });
Table ：如果想获取自定义列模板中当前的遍历数据，需要在模板（槽）上声明 slot-scope = “任意名称” - 例如：template slot-scope =“范围”
日期：时间数据是一个数组。设置时，时间具有明确的功能。如果点击删除，则数据为空。这时涉及到零[0]和零[1]的值，这两个值不存在，所以需要非空判断来判断时间数据是否有值。如果没有值，它将被格式化为空值。如果有值，则使用值

css

如果您向样式标签添加样式约束 (scoped) 并且此页面有效，则无法更改元素的样式。这时候如果想要改变元素的样式就必须“取消”

细分的方法之一：/deep/
格式：/deep/ 要更改的类名（框架中的类名 - 直接复制）{style}

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

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
   }
 }]
})

布局填满整个屏幕（可变高度宽度（组件，左侧固定宽度和可变高度，右上角固定高度，全宽），相对于每个边框的绝对定位为零）

Axios 可以通过 header 选项设置请求头

介绍

导入地址后面的地址中的“@”是src目录的路径，后面紧跟斜杠
建议：如果加载的资源路径在当前目录，则是正常的。所有家长搜索均使用“@”

将自定义参数传递给事件处理程序后，无法获取原始事件参数
如果想在事件处理程序自定义参数后获取原始事件参数，可以手动指定$event，它代表参数事件本身

全球通讯总线：

创建公共组件，导入vue实例，导出vue

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

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
   }
 }]
})

介绍组件：从“地址”导入自定义名称-a

Verlag: a.$emit('自定义事件名称',可选参数)

注册器：a.on('自定义参数', (val)=>{})

注意：自定义事件名称保持一致

有收获的话可以点个赞哦~