用Vue搭建一个应用盒子（一）：todo-list

最近在研究vue的相关知识，最好的学习方法莫过于自己开发一个SPA，这样带着问题来学习，进步自然飞速。于是边查边写差不多花了2周写完了一个todo-list，功能不够完备，但是麻雀虽小，却也是五脏俱全，基本功能是可以满足的了。话不多说，直接来看项目吧。

技术栈

• vue全家桶(vue、vuex、vue-router)
• webpack实现打包和热加载
• ES6
• UI框架用的是bootstrap
• rem方法完成适配移动端
• localstorage实现数据的保存
• node和npm(真是零基础啊，npm都是现学现卖的…)
  以上。

接下来就是代码分析了。

一、用vue-cli配置一个项目

这一个步骤没什么好说的，网上教程一大堆，随便找一个照着走就好了。
完成后，你应该有一个项目的文件夹，里面应该有这几个文件：
README.md、build、config、index.html、package.json、src、static
嗯，就这样。

二、安装相关依赖和一堆玩意。

配置vue-router和bootstrap

先安装依赖，命令行到对应根目录文件夹执行如下命令（推荐VS code，自带命令行输入，方便！）

npm install

稍等片刻完成（如果太慢，推进啊淘宝镜像的cnpm安装）
安装好之后，继续安装：

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。

配置vuex和jQuery

首先在根目录创建一个文件夹，命名为vuex，在里面创建一个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继续配置。
增加一些内容：

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，所以这里也必须放上去。
老规矩，先用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的动效。
添加一点内容：

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

OK，至此，所有的前期配置就完成了，可以开始正式的代码书写了。

三、组件结构和实现

Vue最碉堡的地方就是它的组件式开发，所以这个思想是我们在写代码式要时刻注意的，如何合理的划分自己的组件，是一件很需要思考的事，接下来我将详细介绍我的组件内容和实现的功能。

下面是我的组件结构：
在src文件夹里，有一个主组件：app.vue，有一个组件文件夹：conponents，在这里面我放了4个组件，如下：
Home.vue ———— 首页
todolist.vue ———— todolist 应用主页面
sidebar.vue ———— todolist任务列表
editor.vue ———— todolist任务编辑
我会一个个介绍功能。

app.vue

在首页里，我们会用bootstrap写一个导航，通过vue-router的路由导航到不同的应用。
代码如下：

<template>
  <div id="app">
    <!--nav start-->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-home"></i></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><router-link to="/todolist">Todo List</router-link></li>
            <li><a href="#">开发中...</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!--nav end-->

    <!--content-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{

    }
  }
}
</script>

<style>
</style>

首页的上部分是一个导航，导航的UI和样式用的是bootstrap，导航用路由实现链接到不同的应用&