分类
vue

2.vue实战涉及知识点

1.git操作

1.上传本地文件到远程git上,打开git bash 执行以下三步
git add .
git commit -m ‘project initialized(操作步骤注释)’
git push

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 函数

3.axios的使用

1.安装axios
在使用页面或者main.js引入
import axios from ‘axios’
在methods如下使用
getHomeInfo () {
      axios.get(‘/api/index.json?city=’ + this.city)
        .then(this.getHomeInfoSucc)
    },

2.安装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版本,请到官网下载最新版本的安装包进行升级。

作者:河畔一角
链接:https://www.imooc.com/article/290942
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作

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中滚动行为出现的

加在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
}

20.vue2核心知识介绍

1.数据绑定
2.vue文件开发方式
3.render方法
4.API重点-生命周期方法

21.使用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仓库就能发现刚上传的文件了

发表评论

电子邮件地址不会被公开。 必填项已用*标注