vue2.0构建全栈项目(前后分离实践,路由简介,工具类使用)【3】

个人网站地址 www.wenghaoping.com

Vue + express + Mongodb构建 请大家多支持一下。

项目地址

关于路由,大神给了一个方案 在router下,多了2个Js _import_development.js

// src/router/_import_development.js
module.exports = file => require('@/views/' + file + '.vue').default;  
复制代码

_import_production.js

// src/router/_import_production.js
module.exports = file => () => import('@/views/' + file + '.vue');
复制代码

index.js

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
const _import = require('./_import_' + process.env.NODE_ENV);

Vue.use(Router);

export default new Router({
  routes: [
    {path: '/', name: 'index', component: _import('index/index')},
    {path: '/creatPlan', name: 'creatPlan', component: _import('creatPlan/creatPlan')}
  ]
});
复制代码

因为用到了懒加载,可以希望在首屏加载中速度更快,所以将懒加载进行了封装, 但是又因为用到了懒加载,所以在项目开发中,用到热更新时,会将所有项目更新一边,这样热更新就会很慢,所以采用两种加载方式,一种是在开发时,不使用懒加载,只在线上采用懒加载,以上2个JS说明了这两点

关于工具类的编写

目前写在src/utils 文件夹下 全局工具类 举例formData.js 格式化数据

// src/utils/formData.js
// 格式化时间
export function CurentTime () {
  var now = new Date();
  var year = now.getFullYear();       // 年
  var month = now.getMonth() + 1;     // 月
  var day = now.getDate();            // 日
  var hh = now.getHours();            // 时
  var mm = now.getMinutes();          // 分
  var clock = year + '年';
  if (month < 10) { clock += '0'; }
  clock += month + '月';
  if (day < 10) { clock += '0'; }
  clock += day + '日';
  if (hh < 10) { clock += '0'; }
  clock += hh + ':';
  if (mm < 10) clock += '0';
  clock += mm;
  return (clock);
}// 若要显示:当前日期加时间(如:2009-06-12 12:00)
复制代码

使用时,引入js

<script type="text/ecmascript-6">
import { CurentTime } from '@/utils/formData';// 在此应用,写法参考ES6语法以及CMD模块化开发
    export default {
      props: [],
      data () {
        return {
          loading: false,
          formData: {
            name: '',
            introduce: ''
          }
        };
      },
      computed: {},
      mounted () {},
      // 组件
      components: {},
      methods: {
        save () {
          const plan = {
            avatar: 'https://i.imgur.com/LIvj3YT.jpg',
            name: this.formData.name,
            introduce: this.formData.introduce,
            date: CurentTime() // 使用获取当前时间工具=========
          };
          // 添加计划
          this.$store.dispatch('savePlan', plan);
          this.$router.go(-1);
        }
      },
      // 当dom一创建时
      created () {},
      watch: {}
    };
</script>
复制代码

本次的话,关于前端的所有都写完了,下一期开始写关于后端Node的搭建,以及Mongodb的使用,和前端AXIOS请求的封装和使用**

因为前端目前也会慢慢庞大,所以建议,分模块,将请求按照业务模块分开,讲请求地址分开,将工具类按照功能类别分开,还有公共组件的分开和业务组件的分开.想到什么,再加吧

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值