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请求的封装和使用**

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