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终端执行上面内容报错，请使用”Ctrl+R”然后输入cmd进入电脑终端运行

查看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 pull origin 要拉取分支的名字
11. 查询已有分支：git branch
12. 创建新分支：git checkout -b 分支名
13. 将内容上传到新分支内：git push origin 新分支名
14. 切换分支：git checkout “name”
15. 删除分支：git branch -d 要删除的分支名
16. 查看远程分支：git branch -r
17. 可能出现的错误：无法跟新

• 输入指令：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值，若有值则使用值

scss

安装 : npm install sass-loader node-sass –save-dev
报错： TypeError: this.getOptions is not a function

注意版本过高

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

若有所获，可以留下一个赞~

今天的文章vue后台管理系统搭建分享到此就结束了，感谢您的阅读。