当前位置:首页 > 网站技术 > 前端技术 > 正文内容

Vue2.x 实战总结知识点

小彬2020-06-07前端技术369

1、git操作上传文件到gitee

 先在线上建一个仓库bin012,然后本地打开git bash执行以下三步
 mkdir bin012
 cd bin012
 git init
 然后把要上传到gitee的文件移动到bin012下面,接着执行下面的步骤
 
 1.上传本地文件到远程git上,打开git bash 执行以下五步
    git add . 
    git commit -m 'project initialized(操作步骤注释)'
    git remote add origin git@gitee.com:bin012/bin012.git
    git push -u origin master
    
 2.git pull 拉取最新创建的线上分支
 
 3.git checkout 分支名  变更本地分支为其他分支
 
 4.分支合并到主支上,打开git bash 执行以下三步
    git checkout master 先切换到主支(master为主支名)
    git merge origin/分支名  把线上新增的分支代码合并到主支上
    git push
 5.上传分支数据到远程主支git上
 
    先把分支的数据上传到远程分支git上(执行本文第1条)
    
    再把分支的数据上传到远程主支git上(执行本文第4条)
    
 6.如果忘记合并之前的分支代码,可以使用git融合
    git merge ‘分支名’

 

2、VUE生命周期

全局事件的解绑写在 deactivated 里

使用keep-alive产生 activated 函数


 Vue2.x 实战总结知识点



3、axios的使用

第一种、安装axios
在使用页面或者main.js引入
  import axios from 'axios' 
在methods如下使用
   getHomeInfo () {
      axios.get('/api/index.json?city=' + this.city)
        .then(this.getHomeInfoSucc)
    },
第二种、安装axios和vue-axios
在main.js引入
 import axios from 'axios'
 import VueAxios from 'vue-axios' 
//并关联起来
 Vue.use(VueAxios,axios); 
 在methods如下使用
   getHomeInfo () {
      this.$get('/api/index.json?city=' + this.city)
        .then(this.getHomeInfoSucc)
    }, 
第二种方法的区别在于使用this指向就能调用axios


4.安装脚手架3.0

npm install -g @vue/cli
(如果使用的是2.x版本脚手架的会报错,根据提示先卸载2.x版本再安装3.0脚手架)
(yarn global add @vue/cli)
创建项目 vue create '项目名'
启动UI  vue ui 
使用了3.0脚手架,启动项目就要使用'npm run serve'


5、vue-cli3.0修改项目启动设置

根目录新建vue.config.js
 module.exports = {
     publicPath: '',
     devServer: {
         host: 'localhost',
         port:9090,
         proxy:{
             '/mock':{
                 target: ‘http://localhost:8080’,
                 ws:false,
                 // 将主机头的原点改为目标的URL
                 changeOrigin:false
             }
         }
     }
 }


6、node环境的升级和降级

一、 安装NPM插件n,通过n模块来管理Node的版本;
  1.通过npm/cnpm install n -g  全局安装n模块
  2.n stable 或者 sudo n stable 安装当前稳定的版本;
  3.n latest 或者 sudo n latest 安装当前最新的node版本;
  4.n v10.16.2 可以指定安装对应的版本;
  5.卸载的话,可以使用n rm v10.16.2来删除当前node版本;
二、使用NVM,通过NVM来安装和卸载Node
  1.首先要卸载node,因为nvm会从新安装node版本;
      nvm 的下载地址:https://github.com/coreybutler/nvm-windows/releases
      选择第一个 nvm-noinstall.zip ,然后解压在系统盘
  2.下载最新的nvm安装包,安装到电脑中;
  3.使用nvm安装node版本:nvm install 10.16.2
  4.nvm ls 查看所有版本;
  5.nvm use 10.16.2 可以自由切换版本;
  
 window用户目前不支持n模块来管理Node版本,请到官网下载最新版本的安装包进行升级。


7、过滤器的使用

在实例里面挂载 filters 过滤器函数
  filters:{
      currency(value){
        if(!value)return 0.00
        return '¥'+value.toFixed(2)+'元'
      }
    }, 
1.在 filters 函数里面定义需要过滤的方法
  方法里的 value 就是原始值
  逻辑运算结束后 return 改变后的值
2.在template中调用该方法
  "{{原始值 | currency}}"


8、 vuex…展开运算符

在vuex时使用,为了节省代码和美观,使用vuex的高级用法

使用…把存在store中的值映射到计算属性中

在template中,使用this指向就能拿到数据


在es6语法中,如果报错要安装语法插件 babel-preset-stage-1 

import { mapState } from 'vuex'
export default {
  computed: {
    …mapState(['city'])
也可以是对象
 …mapState({
      currentCity: 'city'
    }) 
  }
} 
也可以优化 mutations 的写法
 import {  mapMutations } from 'vuex' 
 methods: {
    handleCityClick (city) {
      // this.$store.commit('changeCity', city)
      this.changeCity(city)
      this.$router.push('/')
    },
    …mapMutations(['changeCity'])
  },


9、计算属性中需要的数组方法

1.every 
当数组中所有的对象都返回true的时候,我们整体才会返回true
例:
     checkAllFlag () {
        return this.cartList.every((item) =>{
          return item.checked
        })
      }, 
适用于全选和反选的功能

2.forEach
循环数组中的每一项,并返回每一项数据。
例:
     toggleCheckAll(){
        let flag = !this.checkAllFlag
        this.cartList.forEach((item) => {
            item.checked = flag
        })
      }, 
任何需要遍历数组的时候都能用

3. some 
当数组中所有的对象某一些返回true的时候,我们整体就返回true
例:
      checkedCount () {
        return this.cartList.some((item) =>{
          return item.checked
        })
      },
购物车里结算的功能 

4.map
循环数组中的每一项,并返回每一项数据。和forEach一样
例:
    setDefault (addressId) {
       this.addressList.map((item)=>{
         if(addressId ==item.addressId){
           item.isDefault =true
         }else{
           item.isDefault =false
         }
       })
     }, 
任何需要遍历数组的时候都能用 

5. filter 
 filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。 
 todo.completed===complete) (在新窗口打开)">this.todos.filter(todo =>todo.completed===complete)


10、方法里面的路由跳转

this.$router.push({
  path:'/地址'
})


11、编写手机端需要注意的问题

1.手机端rem的使用 
  全局设置font-size:50px,全部rem相对这个尺寸
  
2.手机端click时间延迟500毫秒的问题
  可以安装 fastclick 插件
  npm install fastclick –save
  
3.手机端轮播图的插件 
  可以使用Vue-awesome-swiper(最新版本有bug,使用稳定版本)
  npm install vue-awesome-swiper@2.6.7 –save
  
4.在使用VUE轮播图的时候,出现在最后一张图
  使用v-if="数组名.length"
  
5.弹性滚动插件的使用
  安装 better-scroll 
  因为better-scroll插件的原因, better-scroll阻止了原生的click事件
  在创建scroll对象时传递一个参数就可以了
  this.scroll = new BScroll(this.$refs.scrollWrapper, {click: true})
  
6.数据节流事件touch 
   @touchstart.prevent="handleTouchStart"
   @touchmove="handleTouchMove"
   @touchend="handleTouchEnd"
   
7.安卓手机白屏问题
 原因:低版本android不支持promise
 解决方案:需要安装babel-pollyfill,判断如果没有promise包,则自动安装。
 操作:
 npm install babel-polyfill –save
 main.js中引入: import 'babel-polyfill' 
 
8.兼容所有浏览器的滚动高度代码
 const top = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop


12、stylus.css的安装和该模式下外部css的引用

stylus中文文档

1.npm install stylus –save
  npm install stylus-loader –save
2.新建一个全局css varibles.styl 设置全局变量调用css样式

3.外部css引入 
  在webpack.base.conf.js里找到“@”后添加
  'styles': resolve('src/assets/styles')
  并重启项目cmd
  
4.在使用stylus时,可以使用穿透式符号 >>>
  直接控制当前组件的全局css
  例:  .wrapper >>> .swiper-container


13、在本地请求axios,更改请求配置项

在config/index.js文件里proxyTable修改配置
    proxyTable: {
       '/api':{
          // 请求api时转发到本地8080端口(后端开发IP或者域名)
         target:'http:/loclhost:8080',
         // 一旦请求api,就把他替换到static/mock
         pathrewrite:{
           '^/api':'/static/mock'
         }
       }
    },

14、VUE中name的使用

1.递归组件时需要

2.keep-alive 取消缓存时需要

3.vue-devtools插件查看时


15、VUE中滚动行为出现的bug

加在router/index.js
 scrollBehavior (to, from, savedPosition) {
   return { x: 0, y: 0 }
 }


16、cmd指令查找本机ip

ipconfig是window系统查找本机ip,ifconfig是苹果系统查找本机ip 


17、异步组件的按需加载

异步组件的按需加载,是在app.js很大的前提下,否则不需要此步骤

组件引入:import Detail from '@/pages/detail/index'

组件使用:component: Detail

如果组件大小超过1MB时按需加载:component: () => import('@/pages/city/index')

 CityAlphabet:() => import('./components/Alphabet')



18、localStorage的使用以及try…catch应用场景

在需要保存某些页面信息的时候,可以用localStorage保存,隐私信息用cookie

但是在vue中为了代码不受浏览器以及浏览器配置影响,在外层需包裹try…catch

例: 
let defaultCity = '成都'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}
export default {
  city: defaultCity
}


19、使用git bash上传本地文件到gitee仓库

1.在gitee新建一个仓库。在本地新建一个文件

2.右键选择git bush 使用初始化
  git init
  
3.在git bush建立链接
  git remote add origin 远程仓库地址
  
4.使用 git pull origin master 命令,将码云上的仓库pull到本地文件夹
  git pull origin master  
  
5.将要上传的文件拷贝到新建的这个文件里面,然后输入命令
  git add .
  
6.添加文件描述 
  使用git commit -m  '新添加的文件内容描述' 
  
7.将本地仓库推送到远程仓库 
  git push origin master
 (期间会要求登录git,输入账号和密码,就是你注册gitee的账号和密码)
  
这个时候去gitee仓库就能发现刚上传的文件了


20、elementUI 弹窗组件全局和局部 弹入弹出动画效果实现

 1.全局设置

如要设置左侧或上下弹出,只需全局样式 处粘贴如下代码:

@keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%,0 , 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%,0 , 0);
  opacity: 0;
  }
}
其中 translate3d(x,y,z) 我这是修改的x(第一位)的值100%到0的切换,如果想实现上下弹出,只需修改y处(第二位)的值


2.局部设置

<el-dialog custom-class="way" >  标签上添加  custom-class="自定义类名" ,然后通过自定义类名设置指定弹窗的动画效果
,然后全局样式处粘贴代码如下:
.dialog-fade-enter-active .el-dialog.way{
  animation: anim-open .3s;
}
.dialog-fade-leave-active .el-dialog.way{
  animation: anim-close .3s;
}
@keyframes anim-open {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes anim-close {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}

21、编译出现scss错误  ./pages/login.vue?vue&type=style&index=0&lang=scss&

执行下面两个命令

npm  install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass


22、vue-element-admin npm install 报错path git npm ERR! code ENOENT

it <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://git@github.com/sohee-lee7/Squire.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.

去git官网下载一下git安装上再执行npm install 即可

分享给朋友:

相关文章

HTTP之安全的https以及实战操作

HTTP之安全的https以及实战操作

证书机构:证书颁发机构、服务端网址、机构私钥加密(服务端公钥)、机构私钥加密(证书签名)1、https协议概述HTTPS可以认为HTTP +TLS.,TLS是传输层加密协议,它的前身是SSL协议.HT...

meta标签功能之兼容主流浏览器

meta标签功能之兼容主流浏览器

其实一般新手估计都不会注意这个问题,新手大多都会迫不及待的为了实现网页而去重视代码,往往忽视最重要的meta标签,我就是这样,我也是做了两年的前端才算发现这个里面有很大的学问我最近在一个人独自开发一个...

HTTP之功能追加协议以及升级http2.0

HTTP之功能追加协议以及升级http2.0

1、影响http网络请求的因素带宽 延迟2、http协议的瓶颈一条连接上只可发送一个请求请求只能从客户端开始,客户端不可以接受除响应以外的指令请求/响应头部冗余,不经压缩就发送每次互相发送相...

js基础之video视频、audio音频属性及API

js基础之video视频、audio音频属性及API

1、video 视频video支持三种格式 mp4 webm ogvvideo 里可放source标签,如果播放失败会继续检查下一个source标签,直到兼容不同浏览器差异safafi 只认mp4格式...

使用Javascript对图片进行定宽或定高压缩处理

使用Javascript对图片进行定宽或定高压缩处理

使用Javascript对图片进行定宽或定高压缩处理本文参考了以下链接https://www.jb51.net/article/182078.htm https://www.cnblogs....

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信