摘要：最近在研究的相關(guān)知識，最好的學(xué)習(xí)方法莫過于自己開發(fā)一個，這樣帶著問題來學(xué)習(xí)，進步自然飛速。在首頁里，我們會用寫一個導(dǎo)航，通過的路由導(dǎo)航到不同的應(yīng)用。我們在文件夾里創(chuàng)建一個新的組件。

最近在研究vue的相關(guān)知識，最好的學(xué)習(xí)方法莫過于自己開發(fā)一個SPA，這樣帶著問題來學(xué)習(xí)，進步自然飛速。于是邊查邊寫差不多花了2周寫完了一個todo-list，功能不夠完備，但是麻雀雖小，卻也是五臟俱全，基本功能是可以滿足的了。話不多說，直接來看項目吧。

vue全家桶(vue、vuex、vue-router)

webpack實現(xiàn)打包和熱加載

ES6

UI框架用的是bootstrap

rem方法完成適配移動端

localstorage實現(xiàn)數(shù)據(jù)的保存

node和npm(真是零基礎(chǔ)啊，npm都是現(xiàn)學(xué)現(xiàn)賣的...)

以上。

接下來就是代碼分析了。

這一個步驟沒什么好說的，網(wǎng)上教程一大堆，隨便找一個照著走就好了。
完成后，你應(yīng)該有一個項目的文件夾，里面應(yīng)該有這幾個文件：
README.md、build、config、index.html、package.json、src、static
嗯，就這樣。

先安裝依賴，命令行到對應(yīng)根目錄文件夾執(zhí)行如下命令（推薦VS code，自帶命令行輸入，方便！）

npm install

稍等片刻完成（如果太慢，推進啊淘寶鏡像的cnpm安裝）
安裝好之后，繼續(xù)安裝：

npm install vuex vue-router bootstrap --save

安裝完成后，需要配置以下文件，確保能夠使用。
打開：xx（項目文件夾）-src-main.js
如下：

import Vue from "vue"
import VueRouter from "vue-router"

import App from "./App"

import "bootstrap/dist/css/bootstrap.css"

Vue.use(VueRouter)

const routes=[
  {
    path:"/",
    component:Home
  },
  {
    path:"/todolist",
    component:todolist
  }
];

const router=new VueRouter({routes});

/* eslint-disable no-new */

const app=new Vue({
  router,
  el:"#app",
  render:h=>h(App)   //ES6語法 
})

這里配置了vue-router和bootstrap，項目中可以使用了，接著我們還需要配置vuex和jQuery。

首先在根目錄創(chuàng)建一個文件夾，命名為vuex，在里面創(chuàng)建一個store.js文件，
配置如下：

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

const state={
    
}
const getters={
    
}
const mutations={
   
}

export default new Vuex.Store({
  state,
  getters,
  mutations
})

const是ES6的語法，這里getters，state，mutations都不急著用，先配置好。
配置好store.js，回到main.js繼續(xù)配置。
增加一些內(nèi)容：

import Vue from "vue"
import VueRouter from "vue-router"
import store from "./vuex/store"

import App from "./App"
import Home from "./components/Home.vue"
import todolist from "./components/todolist.vue"

import "bootstrap/dist/css/bootstrap.css"

Vue.use(VueRouter)

const routes=[
  {
    path:"/",
    component:Home
  },
  {
    path:"/todolist",
    component:todolist
  }
];

const router=new VueRouter({routes});

/* eslint-disable no-new */

const app=new Vue({
  router,
  store,
  el:"#app",
  render:h=>h(App)   //ES6語法 
})

好了，vuex就配置完了。接著我們配置JQuery，因為bootstrap依賴JQuery，所以這里也必須放上去。
老規(guī)矩，先用npm安裝JQuery。

npm install jquery --save

打開xx-build-webpack-base.conf.js,在module.exports里面添加如下代碼：

plugins:[
    new webpack.optimize.CommonsChunkPlugin("common.js"),
    new webpack.ProvidePlugin({
         jQuery: "jquery",
         $: "jquery"
    })
  ]

打開main.js配置JQuery和bootstrap的動效。
添加一點內(nèi)容：

import $ from "jquery"
import "bootstrap/dist/js/bootstrap.min.js"

OK，至此，所有的前期配置就完成了，可以開始正式的代碼書寫了。

Vue最碉堡的地方就是它的組件式開發(fā)，所以這個思想是我們在寫代碼式要時刻注意的，如何合理的劃分自己的組件，是一件很需要思考的事，接下來我將詳細介紹我的組件內(nèi)容和實現(xiàn)的功能。

下面是我的組件結(jié)構(gòu)：
在src文件夾里，有一個主組件：app.vue，有一個組件文件夾：conponents，在這里面我放了4個組件，如下：
Home.vue ———— 首頁
todolist.vue ———— todolist 應(yīng)用主頁面
sidebar.vue ———— todolist任務(wù)列表
editor.vue ———— todolist任務(wù)編輯
我會一個個介紹功能。

在首頁里，我們會用bootstrap寫一個導(dǎo)航，通過vue-router的路由導(dǎo)航到不同的應(yīng)用。
代碼如下：

首頁的上部分是一個導(dǎo)航，導(dǎo)航的UI和樣式用的是bootstrap，導(dǎo)航用路由實現(xiàn)鏈接到不同的應(yīng)用，要注意的是，不同的應(yīng)用我們用不同的組件封裝，比如這個待辦事項的應(yīng)用，我們用的是todolist.vue。還要注意的是，這些組件的注冊和路由鏈接都需要在main.js中配置。不要忘記了。
返回查看main.js看看代碼是怎么寫的。
配置完后，我們的主頁面上只有一個導(dǎo)航。接著我們配置主頁。

我們在xx-src-components文件夾里創(chuàng)建一個新的組件：Home.vue。這個組件是我們的首頁內(nèi)容，這里我放了一張圖，和一句話：歡迎！這里有你需要的App。這里同樣用到了bootstrap的柵格系統(tǒng)，這樣就可以兼容移動端了。
看代碼：