Crispin's Blog

vue项目的骨架及常用组件介绍

前端
About 9 min read ( 17 Words , 3 Photos )
Reads

vue项目基础结构

一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的”页面”，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态SPA网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。

  1. vue-cli：搭建基本的vue项目骨架，脚手架工具
  2. sass-loader&node-sass：使用sass作为样式的预编译工具，两者缺一不可
  3. postcss：实现响应式布局的关键，px=>rem
  4. vuex：管理复杂的数据流向，状态机工具，特化的Flux
  5. vuex-persistedstate：将vuex中state持久化的工具
  6. vue-router：实现SPA间”页面”之间的跳转
  7. vue-lazyload：实现图片的懒加载，优化http传输性能
  8. vue-awesome-swiper：轮播功能的实现及一些特殊切换效果的完成
  9. better-scroll：实现列表滚动及父子组件间的滚动问题
  10. axios：http工具，实现向API请求数据，以及拦截器的实现
  11. fastclick：解决300ms延迟的库

以上这些，都是我觉得一个中大型的vue项目需要用到的，还有一些比如我在实现图片上传中用到了jsx的语法，需要babel-jsx这样的东西，不具有普适性，就不例举了。

下面简述一下上面说到的这些东西，有的东西会单独的来出来细说：

1. vue-cli

https://github.com/vuejs/vue-cli

脚手架工具，当我们选择vue作为我们的开发技术栈以后，就要开始为我们的项目搭建目录及开发的环境。安装好node以后，通过以下命令进行安装：

1
2
npm install -g vue-cli          # 将vue-cli安装到全局环境
vue init webpack my-vue-demo    # 创建基于webpack模板的vue项目

这里的模板有6种，不过我们比较常用的就是webpack了。

期间你会看到有一些例如e2e这样的单元测试的工具和ESLint检测代码质量的工具，我觉得都是可以不必安装的。

那么，其实我们最关心的就是在src文件夹下面的内容了。可以看下图：

vue项目目录结构示意图

上图就是一个在刨除vue-cli的基本结构，在项目上比较成熟的vue骨架了。

2&3. sass, postcss

直接写css的洪荒时代已经过去了，预编译的样式处理器帮助我们解放了生产力，提高了效率。sass、less、stylus各有优缺，也各有信徒。

要使用sass的话，你需要安装sass-loader和node-sass，不过node-sass不是很好装，被墙的厉害，建议还是用taobao的镜像。如果安装完成后还是报错无法解析的话，你可能就需要去webpack.base.conf.js里去看看是否设置好了对应的loader。

postcss的常用功能：

  • px2rem：可以帮助我们实现px到rem单位的转换，只需要你定义好相应的转换标准就可以了。
  • autoprefixer：兼容性的处理postcss也可以帮我们处理好。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vue-loader.conf.js
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction,
  }),
  postcss: [
    require("autoprefixer")({
      browsers: ["iOS >= 7", "Android >= 4.1"],
    }),
    require("postcss-px2rem")({ remUnit: 64 }),
  ],
};

4, 5. vuex, vuex-persistedstate

https://github.com/robinvdvleuten/vuex-persistedstate

一个中大型的vue项目，肯定有复杂的状态需要去管理。简单的event bus已经不再适用了。

特化的Flux架构，vuex就迎头顶上。简而言之：他就是我们处理无论是用户操作、API返回、URL变更等多重操作的状态管理工具。

用过vuex的人，会发现一个很痛苦的地方，就是vuex里面的state，只要我们去刷新，它就被释放掉了。vuex-persistedstate帮我们解决了这样的问题，它帮我们直接把state映射到了本地的缓存环境，我们可以在computed里面用vuex提供的mapState辅助函数，来动态的更新local里面的数据。而不需要持久化的state，我们依旧可以刷新来释放掉。

6. vue-router

当我们使用vue来构建SPA的应用时，就等于说我们完全的分离了前后端。后端仅仅提供数据，任何的逻辑都在前端实现。vue-router就帮我们做了这样的事情，他提供给了路由守卫给我们，我们可以设置全局的、组件内的路由守卫，来实现特定的业务逻辑，提供过渡动画等等。

7. vue-lazyload

https://github.com/hilongjw/vue-lazyload

实现图片的懒加载。这是前端性能优化的一个必须面对的问题：图片。懒加载可以减少请求的数量，而且在很直观的视觉上，也有一个良好的过渡。当然，图片我们也是需要去做一些处理的，使用webp格式来减小图片的质量，或者通过oss来对图片作处理。

8. vue-awesome-swiper

https://github.com/surmon-china/vue-awesome-swiper

通过它可以实现基本轮播、横轴的切换、横轴的列表滚动等。

vue-awesome-swiper tab切换示意图

例如我要去实现四个tab切换这样的功能，但是简单的display这样的效果我又觉得不是很满意。那么我们就可以通过swiper来实现，每次tab里面的content都会对应swiper的一个swiper-item。切换的tab，其实就是swiper里面的next page或者before page。

1
2
3
4
5
6
7
8
9
10
11
data(){
  return{
    swiperOption: {
      slidesPerView: 'auto',
      direction: 'horizontal',
      freeMode: true,
      loop: false,
      spaceBetween: 20,
    },
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<swiper :options="swiperOption" ref="swiper" v-if="list && list.length !== 0">
  <swiper-slide v-for="(item,index) in list" :key="index" class="hot-item">
    <router-link
      :to="{name:'quickCar',params:{carID:item.CarID}}"
      class="description_car"
    >
      <img
        v-lazy="item.Attachments.length !==0 && item.Attachments[0].FilePath"
      />
      <span>&yen;{{item.price}}/日</span>
    </router-link>
  </swiper-slide>
</swiper>
<p class="noData" v-else></p>

9. better-scroll

https://github.com/ustbhuangyi/better-scroll

实现纵轴列表的滚动，以及当有嵌套的路由的时候，通过better-scroll来实现禁止父路由随着子路由滚动的问题。

better-scroll其实也可以去实现横轴的滚动，但是为什么不使用better-scroll来处理呢？这是因为在better-scroll实现横轴滚动的时候，我们无法在better-scroll的content的内容区域里去向下拉动我们的页面。所以导致的一个Bug就是，在better-scroll横轴滚动的区域里，页面动不了了。

better-scroll横轴滚动bug示意图

如上图：横轴滚动下面还有内容，但是在图片所示的区域里面，无法向下拉动。所以横轴的滚动其实也是通过vue-awesome-swiper来实现的。

10. axios

基本功能就是通过axios来请求后台接口的数据。并且axios可以配合router更好的实现类似后台的拦截器的功能，例如处理token过期这样的问题。因为当token过期的时候，仅仅通过vue-router的router.beforeEach来处理就有点无能为力了。这时候就需要配合后台响应返回的code来进行url的处理。

11. fastclick

解决点透和点击延时的问题。

具体可以看钗神的源码分析：https://www.cnblogs.com/yexiaochai/p/3442220.html

Vue 前端