前提

装置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

  1. 创立我的项目

    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

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

各文件/文件夹的作用

文件名/文件夹作用目录解释
public打包后生成我的项目目录下自带
node_modules依赖包我的项目目录下主动生成
src我的项目文件存放处我的项目目录下自带
main.js我的项目的启动入口我的项目目录下自带
App.vue根组件我的项目目录下自带
yarn.lock装置yarn后会有我的项目目录下装置自带
package.json依赖配置json包我的项目目录下自带生成
vue.config.js全局配置我的项目目录下自建
.eslintrc.js代码标准包我的项目目录下主动生成
api我的项目中所以接口src下自建
utils工具模块src下自建
styles全局款式文件src下自建
components放路由公共组件src下自建
views放路由视图组件src下自建
router放路由src下自建

内置模块

  • 路由
  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%;      }
  1. 布局撑满全屏( 不定高--宽( 组合件，左侧的定宽不定高，右侧上边定高，宽度撑满 )，相对定位绝对各边距为零 )
    axios能够通过headers选项设置申请头

引入

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

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

全局通信总线：

  1. 创立一个公共组件，引入vue实例，导出vue
import vue from 'vue'export default new vue()
  1. 引入组件：import 自定义名字 --a from ‘地址’
  2. 公布方：a.$emit('自定义事件名',可选参数)
  3. 注册方：a.on('自定义参数'，（val）=>{})
    注：自定义事件名称统一

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