vue入门实例-基于vue&vue-router重写Cnode社区
发布于 7 年前 作者 ChenJiaH 6727 次浏览 来自 分享

最近开始尝试使用vue搭建项目,看见cnode提供API,便迫不及待上手来一发。

项目介绍

线上实例Demo

涉及到的技术包括但不限于:vuevue-routerwebpackzeptofastclickscss

Tips:vue&vue-router这里使用的是2.0版

文档

文档

Github

Github地址:vue-cnode

线上地址:Demo实例地址

项目开始之前的乱七八糟

最初的设想是完完全全由自己构建,这样能够熟悉全部的过程。

  • 创建项目目录层级(按照脚手架)

  • 创建package.json,然后安装什么babel,各种loader等等一大堆乱七八糟

  • 创建webpack.config.js,配置入口js,生成文件路径,预加载和加载资源等等

  • 引入webpack plugins,通过这个webpack-hot-middleware实现重载

配置了一大堆之后,发现还有问题,然后还需要考虑build的配置,遂,猝,享年1小时。然后果断选择vue官网脚手架入手。

好了,下面进入正题。

开发步骤

通过vue官网提供的命令行工具快速搭建一个应用

Github文档

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

这个时候你会发现my-project项目已经自动创建,文件路径大致如下 Alt text

取Cnode社区最常用的主题页相关入手

大概可以分为主题页,主题详情页,评论点赞等设计到登录的这里暂时跳过,至于为什么?别问我,就是任性。

我这里全部采用单文件组件方式开发,即*.vue

什么是单文件组件?

与vue相关的资源全部放在src文件夹下,无需vue渲染的资源放到static文件夹下,附上开发文件目录

Alt text

  • 我们先来看看main.js
// 引入vue
import Vue from 'vue';
// 引入zepto
import $ from 'webpack-zepto';
// 引入vue-router
import VueRouter from 'vue-router';
// 引入路由配置文件
import routes from './routes.js';
//  引入fastclick
import FastClick from 'fastclick';
// 引入页面入口文件,其实这个可以不要,我这里引入的唯一目的就是在App.vue下加载全局通用css
import App from './App.vue'

// ajax设置跨域
$.ajaxSettings.crossDomain = true;

/* eslint-disable no-new */

// 安装VueRouter插件
Vue.use(VueRouter);

// 创建一个router的实例对象
var router = new VueRouter({
  routes
});
// 移动端修复点透和延时
FastClick.attach(document.body);

// 创建一个Vue实例对象
var vm = new Vue({
  el: "#app",   // 挂载元素,这里挂载到index.html中id为app的元素上
  router,   // 引入路由,等于router: router
  template: '<App/>',   // 注意:这里如果使用了template,那么<App></App>将会替换你整个id为app的元素,除非里面含有slot标签,你想用render也是一个道理
  components: { // 组件引入,App对应的就是<App></App>
    App
  }
});
  • 接下来看看路由配置routes.js
// 引入路由对应的组件
import preLoader from './assets/view/preLoader.vue';
import all from './assets/view/all.vue';
import topic from './assets/view/topic.vue';
import about from './assets/view/about.vue';

export default [
  {
    path: "/",  // 路由路径,当页面路径为.../#/的时候使用组件preLoader去渲染页面
    name: "home",   // 可以理解为key
    component: preLoader    // 组件
  },
  {
    path: "/all",
    name: "all",
    component: all
  },
  {
    path: "/topic/:id",
    name: "topic",
    component: topic
  },
  {
    path: "/about",
    name: "about",
    component: about
  }
];
  • 如何实现页面跳转,我们来看看根页面的组件preLoader.vue
// template里面就是等待渲染html结构
<template>
  <div id="pageLoader" v-show="show"><img src="~assets/images/preLoad.gif" alt=""></div>
</template>
<script>
    // 不习惯export写法可以用 module.exports = {}
    export default {
      name: 'preLoader',
      data (){
        return {
          show: true
        }
      },
      mounted: function () {
        // 往this.$router里push一个name为all的对象,意味着路由将跳转到/#/ + all => /#/all,这里还有其他的模式,不论
        setTimeout (() => {
          this.$router.push({
            name: 'all'
          });
          this.show = false;
        },1314);
      }
    }
</script>
// 这里如果要使用scss的话必须加上lang="scss",为了让ide不报错,给style加上rel跟type如下就可以了
// 注意:vue-cli默认最后是编译处理css的,这里想使用scss必须安装style-loader和vue-style-loader,不需要改webpack配置
<style rel="stylesheet/scss" type="text/css"  lang="scss">
  .main-wrap { position: relative; max-width: 750px; min-width: 320px; margin: 0 auto; width: 100%; min-height: 100%;}
  #pageLoader { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) translateZ(0); width: 160px; height: 20px;}
</style>

  • 页面跳转之后进入到主题的列表页all.vue,template跟style没什么好说的,正常写吧,来看看script部分
  // 引入组件
  import $ from 'webpack-zepto';
  import backTop from '../components/backtop.vue';
  export default {
    name: "all",
    components: {
      backTop,
    },
    filters: {
      getFreeTime: function (time) {    // 这里是自定义过滤器,由于vue2.0干掉了默认提供的filters,所以要使用的话需要自行编写
        // Code
        return time
      }
    },
    data (){
      return {
        SCROLL_LOCK: false, // 滚动锁,在ajax触发之后完成之前保证不会再次发出请求
        menuShow: false,    // menu菜单控制器
        topics: [], // 数据
        params: {   // 请求参数
          page: 1,
          limit: 20,
          tab: 'all',
          mdrender: true
        }
      }
    },
    mounted: function () {  // 当结构挂载之后
      // 这里就是我们要做的事情了...

      // 先判断是否存在tab
      if (this.$route.query && this.$route.query.tab) {
        this.params.tab = this.$route.query.tab; // 当前所在类别
        $(".menu-list a").eq(this.getTitle(this.$route.query.tab).idx).addClass("active").siblings("a").removeClass("active");
      } else {
        $(".menu-list a").eq(0).addClass("active").siblings("a").removeClass("active");
      }
      // 请求数据,这里提为一个methods了,因为存在多次调用
      this.getTopics();
      $("body").removeClass("os-mode");

      // 滚动
      var self = this;
      $(window).on("scroll", function () {
        self.getScrollData()
      })
    },
    methods: {
      getTitle: function (val) {
        // 获取动态的标题
        return obj;
      },
      getTopics: function (type) {  // 请求数据
        var self = this;
        $.get("https://cnodejs.org/api/v1/topics", self.params, function (res) {
          if (res && res.data) {  // 如果查到数据
            self.SCROLL_LOCK = true;
            self.topics = res.data;
          }
        })
      },
      // 滚动加载数据
      getScrollData() {
        if (this.SCROLL_LOCK) {
          var totalheight = $(window).height() + $(window).scrollTop();
          if ($(document).height() <= totalheight + 200) {
            this.SCROLL_LOCK = false;
            this.params.limit += 20;
            this.getTopics();
          }
        }
      },
      // 显示sidebar
      openMenu: function () {
        this.menuShow = true;
        $("body").addClass("os-mode");
      },
      // 收起sidebar
      closeMenu: function () {
        this.menuShow = false;
        $("body").removeClass("os-mode");
      },
    },
    computed: { // 计算属性,适用于频繁变动
      title: function () {
        return this.getTitle(this.params.tab).title;
      },
      getOpenClass: function () {
        if (this.menuShow) {
          return "open";
        } else {
          return "";
        }
      }
    },
    watch: {    // 监听器
      $route: function (to, from) {     // 这里是核心,监听$route(路由的配置对象),一旦这玩意变了,就肯定有情况
        // 如果是当前页面切换分类的情况
        if (to.query && to.query.tab) {
          this.params.tab = to.query.tab;
          $(".menu-list a").eq(this.getTitle(to.query.tab).idx).addClass("active").siblings("a").removeClass("active");
        } else {
          $(".menu-list a").eq(0).addClass("active").siblings("a").removeClass("active");
        }
        this.getTopics();
        // 隐藏导航栏
        this.menuShow = false;
        $("body").removeClass("os-mode");
      }
    }
  }
  • 一个完整的组件就大概是上述几个步骤了,按照源码安装编写试试吧

版本

1.0.0

缺点与小尾巴

缺点

  • 其实里面组件分的并不细,比如header、sidebar都可以单独抽出来作为组件存在,可以减少代码量

  • 还可以拓展评论,登录,用户信息等一些列CNode API提供的功能页面

  • 如果没有脚手架,直接上手开发复杂度不低

  • 这里还没有引入vuex做状态管理,如果涉及到非父子组件通信建议使用

写在结尾的话

CNode项目还是比较建议作为一个vue&vue-router的入门级练手项目,因为里面实际上涉及到了单页路由的切换管理,同时也实现了日常开发的一些基本功能:包括tab页签切换,ajax请求数据,能够满足日常项目的基本要求。

特别简单的页面不建议使用,正常html+css+js的效率远高于使用vue.


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢! 转载请注明出处:http://mcchen.club/


2 回复

以后个人项目的开发打算基于vue2.0,不再在1.0的基础上做拓展了。 计划利用空闲之间无偿跟志同道合小伙伴共同开发,交流,进步:

  • nodejs + express + vue2.0 为基础的整套移动端项目
  • vue2.0 为基础的框架开发 有规划有项目的小伙伴可以私聊我呀~无偿呦~
回到顶部