vue-cli + mintUl的移动端练习项目总结（基础点）

最新推荐文章于 2024-06-26 21:03:00 发布

森林的尽头是阳光

最新推荐文章于 2024-06-26 21:03:00 发布

阅读量569

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/sinat_41904410/article/details/104170958

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

项目中使用的知识点，及问题

1、如果不小心添加了eslint又不想用怎么修改？
config/index.js，搜索useEslint:true ,修改为false即可

2、饿了么组件 mintUI
安装 npm i mint-ui -S
使用：在main.js中引入并注册,(建议如果用的不多的话，按需引入，比较小点)

// 配置mintUi（按需引入的话就是在mint-ui/lib中找到需要的组件引入）
import MintUI from 'mint-ui'
// 引入css
import 'mint-ui/lib/style.css'
// 安装插件  注册全局组件及挂载属性
Vue.use(MintUI)

3、vue+axios请求本地json文件
（1）本地json文件需要放在static文件夹中
（2）json文件中要写图片地址的话，图片也需要放在static中，并且引入地址需要加上项目启动地址，比如：http://localhost:8080/static/1.jpg

4、v-for
v-for作用于组件，必须添加key值，否则会报错

5、关于vue模板中的变量和常量
带冒号的属性后面的值表示变量，不带表示常量

// xxx为常量
<nav-bar title="xxx"/>
// xxx为变量
<nav-bar :title="xxx"/>

6、style 的 scoped
<style scoped></style>
表示只对当前组件生效，加上之后可以从浏览器看出，给当前组件都增加了一个自定义属性用于区分
在这里插入图片描述

7、v-html插入的dom的样式设置
通过v-html插入的dom，不能在设置了scoped的style中修改样式，不起作用
原因是组件的渲染和装载样式的时机不对
解决方法：
（1）可以通过引入外部css文件，在外部css中设置
（2）把style 的scoped属性去掉（不建议这么做）

8、钩子函数
created(){} 钩子函数用于获取参数，发送axios请求
mounted(){} 用于操作dom，比如更改dom的高度等等
9、v-lazy 图片懒加载

<img v-lazy="img.img_url" alt=""/>
<style scoped>
 /* 图片懒加载样式 */
    image[lazy=loading]{
        width:40px;
        height:300px;
        margin:auto;
    }
</style>

10、路由导航守卫（路由钩子)用来做权限控制

（1）全局守卫(前)：前端的权限控制中 next() next(false)
（2）后置路由（没什么用)
路由独享的
组件内的路由钩子函数
（1）进入前，根据过来的组件路由做判断，让组件做不同显示
beforeRouteEnter
next(vm=>vm.xxx = 123)

 //路由确认前，组件渲染前的守卫函数
beforeRouteEnter(to,from,next){
   // 1、判断from  为空表示粘贴地址栏
   //   1.1、继续判断，根据to来设置title
   // 2、如果from 是新闻列表，就给title为新闻详情
   // 3、如果from是商品详情，就给title是商品图文介绍
   let title="";
   if(from.name == null){
       if(to.name === 'news.detail'){
           title = '新闻详情'
       } else if(to.name == 'photo.info'){
           title = "商品图文介绍"
       }
   } else if(from.name == 'news.list'){
       title = '新闻详情'
   }else if(from.name == 'goods.detail'){
       title = '商品图文介绍'
   }
   //最终都放行，大不了赋值一个title为空字符串
   next(vm=>{  // vm就是未来组件对象的this
       vm.title = title; 
   })
}

（2）路由更新（组件created不会被调用）
beforeRouteUpdate
路由参数的改变触发： ?id=xxx /xxx/:id

beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo:id,在/foo/1和foo/2之间跳转的时候，
    // 由于会渲染同样的Foo组件，因此组件实例会被复用
    // 而这个钩子就会在这个情况下被调用
    // 可以访问组件实例this
    // 总结：路由复用，但参数改变触发，参数指的是：query||params
    this.loadImgById(to.params.categoryId);// 这个是根据id获取数据的函数
    next();//影响着锚点值改变
},

（3）路由离开前（用户离开前的询问及相关保存)
beforeRouteLeave

// 离开购物车前保存当前删掉或者增加的商品
beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 this 
    if(confirm('亲，真的要离开吗？')){
      // 保存当前的剩余购物车
      let obj={};
      this.shopcart.forEach(goods=>{
        obj[goods.id] = goods.num;
      })
      GoodsList.saveGoods(obj);
      next();// 用于放行
    }else{
      next(false);// 取消导航行为
    }
  }

11、mint-ui的 Toast组件，提示框
使用 this.$toast('没有数据了~')

12、缩略图插件 vue-preview
安装：npm i vue-preview -S

// 图片预览插件
import VuePreview from 'vue-preview';
Vue.use(VuePreview); //内部运行

//使用  imgs是图片列表（有一定的数据格式，src图片地址，w宽h高）
<vue-preview :slides="imgs"></vue-preview>

13、样式
父子组件之间样式互相不牵扯
全局css控制所有

14、拦截器
用于实现数据返回前增加一个loading
一般全局配置，在main.js中

// 配置请求拦截器，显示loading
Axios.interceptors.request.use(function(config){
  //mint-ui的loading插件
  MintUI.Indicator.open({
    text:'玩命加载中...'
  })
  return config;
})
//配置相应拦截器，关闭loading
Axios.interceptors.response.use(function(response){
  // response.config类似上面request的config
  MintUI.Indicator.close()
  return response;
})

15、mint-ui 组件 loadmore上拉获取更多数据

loadmore使用的时候需要去除index.html中的<!DOCTYPE html>，因为严格模式不支持移动端的某些东西

<mt-loadmore 
          :auto-fill='false' 
          :bottom-method="loadBottom"
          ref="loadmore"
          :bottom-all-loaded = "isAllLoaded"  // loadmore的禁止函数调用的属性来控制,isAllLoaded自定义true/false,表示是否加载更多
        >
        需要加载的dom
</mt-loadmore>

this.$refs.loadmore.onBottomLoaded();//下拉通知元素重新定位,用于到底了没数据提示

this.$refs.loadmore.onTopLoaded()// 上拉

需要给父元素一个高度(不让loadmore将父元素撑开)：
（1）设备高度 - 头 - 尾 = 中间的高度（loadmore父元素的高度）
（2）app中给头尾添加 ref=“appHeader” ref=“appFooter”
（3）通过给 router-view 设置自定义属性 :apprefs="refs" 将这两个组件传递给子元素，用通过this.apprefs.appHeader.$el获取该元素

let headerHeight = this.apprefs.appHeader.$el.offsetHeight;
let footerHeight = this.apprefs.appFooter.$el.offsetHeight;
this.boxHeight = document.body.clientHeight - headerHeight - footerHeight;

loadmore的重点、实现思路（图片并非原创来源网络）

16、本地图片的引入
需要告诉webpack要把引入的图片移动到未来的dist目录下，要不然会导致图片找不到

// 引入
import ImgSrc from '../asset/xxx.png';
// 使用
<img :src='ImgSrc' />

17、slot 坑给子组件传入Dom的时候也可以指定坑名

<span slot="xx">1</span>
子组件内声明 <slot name="xx"></slot>

18、内置组件

keep-alive 缓存频繁的创建和销毁的组件 =>停用与激活
transition 给元素或组件添加过渡效果（js + css）

17、vue过渡的使用

包裹组件（组件更替的显示）
mode = “out-in” 当前元素先进行过渡，完成后新元素过渡进入
mode = “in-out” 新元素先过渡，完成后当前元素过渡离开


<transition name="rv" mode="out-in">
      <router-view class="tmpl"></router-view>
</transition>

样式（给元素设置进入离开动画）

<style scoped>
.rv-enter-active,.rv-leave-active{
  transition: opacity .5s;
}
.rv-enter,.rv-leave-to{
  opacity: 0;
}
</style>

20、特殊函数

this.$nextTick(fn) 在vue生成dom以后Dom操作行为
比如：当前this.isExist = true;立即操作这个元素不行
需要在$nextTick()中，因为当前代码执行的时候元素还未存在
this.$set(obj,key,value);
手动通知vue数据响应式
this.$refs.xxx => ref='xxx'
元素获取的就是元素对象
组件获取的就是组件对象， xxx.$el 获取的是DOM对象

21、computed计算属性，用于监视数据
用于计算购物车总数，总价

数据使用

<p>一选择商品{{paymenet.count}}件，总价￥{{paymenet.price}}元</p>

计算属性定义

computed:{
    paymenet(){
      let price = 0;
      let count = 0;
      this.shopcart.forEach(goods=>{
        if(goods.isSelected){ //选中的话再计算
          count += goods.num;
          price += goods.num * goods.sell_price;
        }
        
      })
      return{
        count,price
      }
    }
  },

22、EventBus
就是一个new Vue

$emit(xxx,数据)
$on(‘xxx’,fn)
$once(‘xxx’,fn)
$off(‘xxx’)
使用：
(1) 新建一个EventBus.js(内容如下)

import Vue from 'vue';

// bus公交车，基于事件的同一个载体对象
let EventBus = new Vue();

// $on(事件名,function(){})  ->  $emit('事件名', 数据)

export default EventBus;

(2) 子组件引入，传值

import EventBus from '@/EventBus.js';
 //通知App组件增加数量
EventBus.$emit('addShopcart',this.pickNum);

(3) 父组件接值执行

import EventBus from './EventBus.js'

created(){
   EventBus.$on('addShopcart',data=>{
     console.log(data);
     console.log(this);
     this.num += data;
   })
 }

23、打包 npm run build

dis目录，默认会生成有带.map的文件
在config/index.js中有个productionSourceMap改为false即可

在这里插入图片描述
24、路由懒加载
路由懒加载按需加载路由，节省流量
只用于路由相关的组件（全局组件不行）
（1）router/index.js中修改引入方式（其他的不变）

const Home = () => import( '@/components/Home/Home');
const Member = () => import( '@/components/Member/Member');

（2）安装 babel

npm i --save-dev babel-plugin-syntax-dynamic-import

（3）配置babel，.babelrc文件中，增加plugins syntax-dynamic-import

"plugins": ["syntax-dynamic-import"],

附带项目demo链接：
demo提取码：gh0a

森林的尽头是阳光

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue-cli + mintUl的移动端练习项目总结（基础点）

项目中的问题1、如果不小心添加了eslint又不想用怎么修改？config/index.js，搜索useEslint:true ,修改为false即可2、饿了么组件 mintUI安装 npm i mint-ui -S使用：在main.js中引入并注册,(建议如果用的不多的话，按需引入，比较小点)// 配置mintUi（按需引入的话就是在mint-ui/lib中找到需要的组件引入）...
复制链接

扫一扫

专栏目录