摘要：最近在研究的相关知识，最好的学习方法莫过于自己开发一个，这样带着问题来学习，进步自然飞速。在首页里，我们会用写一个导航，通过的路由导航到不同的应用。我们在文件夹里创建一个新的组件。
最近在研究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
嗯，就这样。
先安装依赖，命令行到对应根目录文件夹执行如下命令（推荐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任务编辑
我会一个个介绍功能。
在首页里，我们会用bootstrap写一个导航，通过vue-router的路由导航到不同的应用。
代码如下：
首页的上部分是一个导航，导航的UI和样式用的是bootstrap，导航用路由实现链接到不同的应用，要注意的是，不同的应用我们用不同的组件封装，比如这个待办事项的应用，我们用的是todolist.vue。还要注意的是，这些组件的注册和路由链接都需要在main.js中配置。不要忘记了。
返回查看main.js看看代码是怎么写的。
配置完后，我们的主页面上只有一个导航。接着我们配置主页。
我们在xx-src-components文件夹里创建一个新的组件：Home.vue。这个组件是我们的首页内容，这里我放了一张图，和一句话：欢迎！这里有你需要的App。这里同样用到了bootstrap的栅格系统，这样就可以兼容移动端了。
看代码：
todolist