vue2.0構建的一個文章閱讀應用（一）

本文主要是記錄下我使用 vue 構建這樣一個文章閱讀小應用的具體通過吧，能力有限，有些問題可能表述不正確，望指教。

步驟一,安裝 vue-cli，建立webpack項目

npm i -g vue-cli
vue init wepack vue-article-app

步驟二，下載相關依賴項

cd vue-article-app
npm i
npm run dev     //運行項目， webpack會編譯項目文件，啓動服務器，而後咱們在 http://localhost:8080/ 中就能看到一個歡迎頁

在命令行中鍵入 Ctrl+C 先停掉服務，繼續安裝須要應用到的一些資源

npm i vue-router --save       //路由
npm i vue-resource --save     //XHR請求
npm i bootstrap --save        //bootstrap做爲UI庫
//上面的三個依賴項也能夠使用一個命令行就搞定 npm i vue-router vue-resource bootstrap --save

這樣須要用到的就都準備好了，接下來就是編碼了

步驟三，初始化

main.js 將會做爲入口文件，而 App.vue 將會做爲應用的初始化組件。先看下目錄結構再分別來完善一下這兩個文件

├── main.js
├── App.vue
├── components
│   ├── ArticleDetail.vue
│   ├── ArticleList.vue
│   ├── MainNavbar.vue
│   ├── NormalNavbar.vue
│   ├── NotFoundComponent.vue
│   ├── Recommend.vue
│   └── ArticleList.vue
└── store
    ├── index.js         
    ├── actions.js      
    ├── mutations.js

下面是main.js

//首先分別引入要用的資源與組件
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';

import App from './App';
import ArticleList from './components/ArticleList';
import ArticleDetail from './components/ArticleDetail';
import Recommend from './components/Recommend';
import MainNavbar from './components/MainNavbar';
import NotFoundComponent from './components/NotFoundComponent';

import store from './store';
import 'bootstrap/dist/css/bootstrap.css'; 
import moment from 'moment/moment.js';    //一個時間轉換插件,安裝命令 npm i moment --save

Vue.use(VueRouter);
Vue.use(VueResource);

//vue.js中容許使用過濾器來進行文本格式化，如下三個主要是利用 moment.js 格式化時間的哈
Vue.filter('transTime', function (value) {
    return moment.unix(value).format('YYYY-MM-DD');
});
Vue.filter('transTimeFull', function (value) {
    return moment.unix(value).format('YYYY-MM-DD HH:mm:ss');
});
Vue.filter('transMin', function (seconds) {
   seconds = seconds || 180;
    return Math.ceil(seconds/60);
});

//這一塊是路由，路由的一些寫法用法就要具體參考vue-router的文檔了，這裏就不細說了哈
const routes = [{
  path : '/',
  components : {
    default: ArticleList,
    mainNavbar:MainNavbar
  }
},{
  path : '/articleList',
  components: {
    default: ArticleList,
    mainNavbar: MainNavbar
  }
},{
    path: '/article-detail/:articleId',
  name: 'article-detail',
    component: ArticleDetail,
  },{
  path: '/recommend',
  component : Recommend,
  
  }];

const router = new VueRouter({
  // mode: 'history',
  routes
});

/* eslint-disable no-new */
// 實例化咱們的Vue
var app = new Vue({
  el: '#app',
  router,
  store,
  ...App,
});

上面就是 main.js 文件啦，下面是 App.vue

<template>
  <div id="wrapper">
    <router-view name="mainNavbar"></router-view> /*這個是一個頂欄，具體看以後的MainNavbr.vue*/
    <transition :name="transitionName">     /*這裏具體用到過渡效果，能夠查看文檔來學習具體用法,這裏我給他綁定了一個名字，這是爲了設定路由過渡效果用的*/
        <router-view></router-view>
    </transition>
  </div>
</template>

<style>
    img{ width: 100%; }
    .slide-up-enter-active {
        transition: all .3s ease;
    }
    .slide-up-enter, .slide-up-leave-active {
        transform: translateY(310px);
    }
</style>

<script>
    export default {
        data(){
            return {transitionName: ''}
        },
/*這裏使用 watch 來監測路由的，若是路由指向'/recommend' 那就使用 'slide-up' 的過渡效果，若是不是的話就不綁定效果*/
        watch: {
            '$route' (to, from) {
                if(to.path == '/recommend') {
                    this.transitionName = 'slide-up'
                }else{
                    this.transitionName = ''
                }
            }
        }
    }
</script>

內容寫得其實不夠詳細，可是看註釋應該能看得明白，有時間了再細細按步驟寫。上面初始化以後，其實就是分別建好要用的一些組件，而後再是拿數據，處理數據驅動頁面變化啊之類的。

這裏算是挖了個坑吧，寫的實在是太不詳細了，項目地址先放上來[vue-article-app]