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請求的封裝和使用**

由於前端目前也會慢慢龐大，因此建議，分模塊，將請求按照業務模塊分開，講請求地址分開，將工具類按照功能類別分開，還有公共組件的分開和業務組件的分開.想到什麼，再加吧