前阵子部门分享提到了vue框架，正好自己最近也在看，稍微了解了一些基础知识，趁此机会做个学习总结，顺便参照部门的周报填写系统做个简单的小项目练练手。（前置知识需要去官网看下入门文档，node、npm的简单操作）

why VUE?

先看下一个最最传统的页面开发，在写一个展示性页面时，在写好html个css完成布局后，下一步就是从后台获取数据，将数据渲染到页面中。假如我们要在id为ul1的容器中渲染一些新闻，首先我们需要用js去获取需要增加内容的容器，即ul1，然后再将获取的后台数据通过循环分别放到我们用js创建的li元素中，再将这些li元素依次放到dom中。 至此，我们会发现，一个简单的列表渲染工作，竟然充斥着大量的dom操作（获取dom，创建dom，插入dom），从开发一个网页的工程师的角度来看，我们更想关注的是页面效果以及数据，但上述的操作又不得不让我们花费大量的时间去做一些dom操作。那么有什么办法能够让我们更加专注于数据，而不用花费太多精力在dom操作上呢？

到这里，我们引入vue的第一个特性--数据驱动

vue可以算是一个MVVM框架，简单来说，可以用下图来解释

可以看出，View和ViewModel，ViewModel和Model之间的通信都是双向的，而View和Model不发生联系，他们之间通过ViewModel来通信，他们的变动也会通过ViewModel来影响到对方，这样就把数据和DOM分离开来，避免了用户对DOM的直接操作与。而vue就充当了中间的VewModel这个角色，它将我们从繁重的dom操作中解放出来，更加关注数据。

vue的第二个特性--组件化

这边为了文章结构，先抛出vue的第二个特性，那么什么是组件化呢？ 先来看看一个常规页面

如果有一个这样的页面给我们让我们进行重构，相信大部分前端工程师脑子显示对页面进行了一个简单的结构划分，比如这个魔兽官网，我们可以将其分为几个部分来进行重构，如图

我将其分为头部，广告内容，底部三个部分，如果点开某个二级页面，可能这个二级页面的头部和首页的头部是一样的，那么这个头部就可以考虑将其提取成一个单独的组件以便复用。 其实vue的组件化特点也是这个意思，在vue中，可以将所有的dom片段看成组件，实际组件划分还是要看应用场景，毕竟没有最好的解决方案，只有最合适的。

关于vue的特性就简单介绍到这里，俗话说，学习一个框架，最好的方法就是不要怂，直接就是干！话不多说，直接开始。这里我使用vue官方提供的一个脚手架工具 vue-cli，这个工具就是可以让我们直接去写页面而不用配一些烦人的配置，具体介绍请移步官网

接下来就开始我们的代码编写（你需要知道npm和node的简单命令和使用，还有git的简单使用，如果你不知道这些，那你要抓紧去学了！）

vue-cli脚手架搭建

怎么搭建呢？当然是去官网看demo啊！ 第一步，打开你的命令行工具，windows建议使用git bash，因为自带的命令行就是shit，mac可以直接用终端，确保你的电脑装好了node!输入如下命令全局安装vue-cli，网络不好的请选择cnpm安装

npm install -g vue-cli
复制代码

安装完脚手架工具后，进入想要生成项目的目录下，输入如下命令搭建一个vue脚手架，这里选择webpakc模板，webpack不是这个文章的主角，你只需要知道，webpack贼6！

vue init webpack weekly-report-demo
复制代码

这边我把目录名称设为weekly-report-demo，然后会有一些提示信息需要你来确认,这边我们不需要用到路由、单元测试等，所以不需要的地方填n，其他都是填y或回车就行，最终配置如下

基本配置完成后，我们会发现vue-cli非常友好的提示我们下一步操作，那就照着做呗,这边window下命令行可能会卡主不退出导致不能输入命令，其实配置工作已经完成了，遇到这种情况直接按ctrl+c退出当前步骤即可

cd weekly-report-demo
// 进入目录后执行如下命令
npm install
复制代码

执行npm install 后会将脚手架所需的依赖全部下载下来，所以会等一阵子，和上面一样，网不好就用cnpm

依赖下载完成后，脚手架就算搭建完成了，运行提示的命令，效果如下

npm run dev
复制代码

至此，脚手架搭建完成。下面的更新都会提交到github

需要关心的目录结构

执行完上面一系列的操作后，我们得到一个目录结构，其中，源文件在src目录下，index.html则是默认页面，main.js是js的入口文件。其他的后面依次介绍。先来看看index.html的内容

明明什么都没有，只有一个div，怎么最终运行在浏览器的页面上有那么多东西呢？客官莫慌，webpakc会自动为页面引入编译后的代码，实际到浏览器的时候，页面的结构其实已经变成这样了

这中间是怎么实现的，就不做过多说明，我们只需要知道这是webpack在背后做的事情，而开发者只需要把精力放在页面的开发上即可，这就是脚手架出现的原因--因为人是懒惰的。。

回到main.js，我们可以看到一个vue的实例，如果你看过官方文档，就不难理解了，这里将vue的实例挂载在html中的id为app的div上，还引入了一个app组件，这里还设置了Vue.config.productionTip = false来关闭生产模式下给出的提示

继续看app组件，我们可以将app组件理解成一个大的组件，其中可以包括其他子组件，vue的一大特点是组件化，而其组件都可以放在一个.vue的文件中，并且有其自身的写法，主要包含三个片段：

template 组件的html模板，且必须包含在一个块级元素内！ script 组件的script内容，包括组件的数据、逻辑处理、交互等 style 组件的样式

有没有觉得很熟悉，不就是一个html文件换换样子嘛。。 在app组件中我们看到引用了components文件夹下的hello组件，继续看下这个hello组件，这边我们就看到了，通过npm run dev编译出来的页面上面的内容原来来自这个hello组件，尝试着改一下内容看看 尝试修改hello组件的内容 这时就会发现，修改的内容在页面上动态更新了，而不需要我们手动刷新页面，有兴趣的可以去google下热重载来了解更多，此处不多做赘述

接下来，就可以参照这个示例的写法，来实现一个周报填写小demo

需求分析

在开始编写代码前，先简单分析一下需求，大概界面如下

左边是编辑区，右边是预览区，编辑区可以选择人员，选择任务类型，输入内容，而右边则是把内容展现出来。这边我们可以分别将两块内容提取成两个组件，分别为editor和preview，为了省事，这里在build/webpack.base.config.js中把eslint对vue文件的语法检查规则注释掉，否则会遇到很多语法报错（注意，修改了配置文件后，需要ctrl+c退出，并重新运行npm run dev） 新增两个组件，取消语法检查

至此，可以看到添加的两个组件已经出现在页面上了，就是没有样式比较丑，接下来增加一些样式。 在增加样式之前，针对不同的浏览器，在日常工作中通常会引入一个类似common.css的文件来取消各个浏览器的默认样式，以确保我们的样式在不同浏览器下表现一致。在本次项目中，也需要引入这样一个东西--reset.css,运行如下命令安装reset.css依赖

npm i --s reset.css
复制代码

在main.js中引入reset.css 引入reset.css，删除多余样式

css语法使用stylus，这样层次比较分明，也可以直接用css 输入如下命令安装stylus依赖

npm i --save-dev stylus stylus-loader
复制代码

引入stylus并测试

至此，页面是这个样子

接下来，增加布局样式 基本布局样式

至此，页面是这个样子

接下来，完善编辑区，编辑区包含两部分，人员信息部分和内容输入部分，其中人员信息部分的大致需求如下

1. 选择人员
2. 新增人员
3. 删除人员

输入部分的的功能如下：

1. 选择任务类型
2. 输入任务内容
3. 任务内容可编辑
4. 删除任务内容
5. 保存

先完成人员选择部分，可以使用下拉框选择，这里可以引入一个基于vue2.x的组件库element-ui，引入这个组件库后一些常用的组件可以直接使用这个组件库提供的样式，便于开发。根据官网的指南,执行以下命令引入element-ui,安装完成后，直接全部引入组件（图省事儿。。）再从官网示例扒一个select组件

npm i element-ui -s
复制代码

在main.js中引入element-ui

至此，页面是这个样子

接下来再完善内容输入部分，由于任务类型有五类，可以选择使用tab来切换类别，每个类别下可以输入对应的内容，这边再插一个细节，每个tab可以使用图标字体，这样看起来会好看一点，图标字体可以在阿里巴巴图标字体库中找素材，图标字体的使用可以参考官网，简单步骤如下

1. 将选好的图标字体文件打包下载下来 2.打开demo-symbol.html参考上的面的示例将对应的文件放到项目文件中

增加样式，引入图标字体并测试

至此，页面是这样的，已经成功引入图标字体了

因为vue是数据驱动的，需要填写的任务类型有五个，每个类型又分别对应一个自己的icon图表，接下来就来配置vue的数据，并让其体现在页面上，并实现一个点击切换的效果，这里用到了es6的模板字符串，有兴趣的可以去mdn上看看

下篇下次写，拜拜