用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 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 navigationspan>
<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 Listrouter-link>li>
<li><a href="#">开发中...a>li>
ul>
div>
div>
nav>
<router-view>router-view>
div>
template>
<script>
export default {
name: 'app',
data(){
return{
}
}
}
script>
<style>
style>首页的上部分是一个导航，导航的UI和样式用的是bootstrap，导航用路由实现链接到不同的应用，要注意的是，不同的应用我们用不同的组件封装，比如这个待办事项的应用，我们用的是todolist.vue。还要注意的是，这些组件的注册和路由链接都需要在main.js中配置。不要忘记了。
返回查看main.js看看代码是怎么写的。
配置完后，我们的主页面上只有一个导航。接着我们配置主页。
Home.vue
我们在xx-src-components文件夹里创建一个新的组件：Home.vue。这个组件是我们的首页内容，这里我放了一张图，和一句话：欢迎！这里有你需要的App。这里同样用到了bootstrap的栅格系统，这样就可以兼容移动端了。
看代码：
<template>
<div class="Home">
<div class="container">
<div class="col-sm-8">
<div class="jumbotron">
<img src="../assets/home-l-img.jpg">
div>
div>
<div class="col-sm-4">
<div class="jumbotron">
<h2>欢迎你！h2>
<p>这里有你需要的appp>
div>
div>
div>
div>
template>
<script>
export default {
name: 'Home',
data () {
return {
}
}
}
script>
<style scoped>
.col-sm-8 .jumbotron{
padding: 0;
}
.jumbotron img{
width: 100%;
}
style>代码不复杂，就不解释了。接下来就是重头戏了。
todolist.vue
这是这个应用的主组件，在这个组件里还会包含两个子组件：sidebar.vue和editor.vue，所以在这个组件里，我们要实现的是一个新建任务的功能。新建的任务会显示在左边的任务列表sidebar.vue组件里，然后点击某个任务的编辑按钮，我们可以在右边的任务编辑editor.vue组件里修改。这就是这个应用的架构思路。下面来看看代码：
<template>
<div class="todolist">
<div class="container addInput">
<input type="text" v-model="taskText" class="form-control col-sm-12" placeholder="新建一个任务" v-on:keyup.enter="addTask">
div>
<div class="container">
<div class="col-sm-6">
<sidebar>sidebar>
div>
<div class="col-sm-6">
<editor>editor>
div>
div>
div>
template>
<script>
import sidebar from './sidebar.vue'
import editor from './editor.vue'
export default {
name: 'todolist',
data(){
return{
taskText:''
}
},
components: {
sidebar,
editor
},
methods:{
addTask(){
if(this.taskText==''){
alert('请输入具体任务内容！')
}else{
this.$store.commit('addTask',this.taskText);
this.taskText=''
}
}
}
}
script>
<style scoped>
.addInput {
margin-bottom: .75rem;
}
style>代码量不算大，除了一个输入框之外就是两个组件的标签
要注意的点：
1.两个子组件要在父组件里面注册引入才能使用。
2.这里开始涉及到了Vuex的功能，简单说明一下，我们在输入任务后，这个任务的相关数据会被保存到状态管理store里面，然后通过mutations的操作，把输入的内容保存在子组件sidebar里。
显然设置完这里还是无法使用新建任务的，我们还需要两步操作。
第一步：设置sidebar.vue：
这个子组件是完成任务列表的渲染。看代码：
<template>
<div class="sidebar">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="text-left">
任务列表
<i class="glyphicon glyphicon-refresh pull-right">i>
h4>
div>
<div class="panel-body sidebar-context">
<div>
<div v-for="(item,index) in items" class="panel panel-default">
<div class="panel-heading">
<h4>
<input type="checkbox">
{{item.task}}
<i class="glyphicon glyphicon-remove pull-right">i>
<i class="glyphicon glyphicon-edit pull-right">i>
h4>
div>
<div class="panel-body">
<p>
{{item.setTime}}<br>
{{item.details}}
p>
div>
div>
div>
div>
div>
div>
template>
<script>
export default {
name: 'sidebar',
data() {
return {
}
},
computed:{
items(){
return this.$store.getters.items;
}
},
methods:{
}
}
script>
<style scoped>
ul {
list-style: none;
}
.sidebar-context{
max-height: 8rem;
overflow: scroll;
}
i.glyphicon{
font-size: .275rem;
cursor: pointer;
margin-left: .25rem;
}
style>可以仔细考虑一下代码的书写，在