前言
一直没有找到一个合适的展示个人项目的模板，所以自己动手使用 Vue 写了一个。该模板基于 Markdown 文件进行配置，只需要按一定规则编写 Markdown 文件，然后使用一个 在线工具 转为 JSON 文件即可。下面是该项目的在线地址和源码。本文主要记录一下项目中用到的相关知识。
在线演示 源码
效果程序最终的效果如下图所示：
整个项目只包含两个组件：项目介绍 和 侧边导航，逻辑比较简单，十分适合入门。
环境配置这里我们使用 Gulp 和 Webpack 用作项目构建工具。初次使用 Gulp 和 Webpack 可能不太适应，因为它们的配置可能让你看的一头雾水。不过不用担心，这两个毕竟只是一个工具，在初始时没有必要特别的了解它们的工作原理，只要能运行起来就可以。等到使用了一段时间之后，自然而然的就知道该如何配置了。这里主要记录一下项目中使用的配置，如果想要系统的学习如何使用这两个工具，可以参考下面的文章：
Gulp 和 Webpack 集成一个比较简单的方式就是将 Webpack 作为 Gulp 的一个 task，如下面的形式：
webpack .(callback) config __dirname __dirname (config.)[ 'webpack']);
下面我们分别介绍一下 gulp 和 webpack 的配置
Gulp 配置Gulp 中主要配置了两个任务：webpack 和 browserSync，这里主要说一下 browserSync。browserSync 主要用来自动刷新浏览器。首先我们配置需要监听的文件，当这些文件发生改变后，调用 browserSync 使浏览器自动刷新页面。下面是具体的配置
browserSync .() ) .() ....]);
Webpack 配置我们使用 webpack 进行资源打包的工作，就是说将各种资源（css、js、图片等）交给 Webpack 进行管理，它会将资源整合压缩，我们在页面中只需引用压缩之后的文件即可。webpack 的基础配置文件如下所示
(callback) config [ new ExtractTextPlugin("../css/[name].css") ]__dirname __dirname [ ] .join(__dirname, "/node_modules/vue/dist/vue.min.js") [] (config.);
webpack 的相关配置说明可以参考前面的给出的文章，下面说一下使用 webpack 2 遇到的坑：
extract-text-webpack-pluginextract-text-webpack-plugin 会将 css 样式打包成一个独立的 css 文件，而不是直接将样式打包到 js 文件中。下面是使用方法
[[.) .)
这里需要注意的地方就是，extract-text-webpack-plugin 在 webpack 1 和 webapck 2 中的安装方式不同，需要根据使用的 webpack 版本来安装：
# for webpack 1 npm install --save-dev extract-text-webpack-plugin # for webpack 2 npm install --save-dev extract-text-webpack-plugin@beta 压缩文件使用 UglifyJsPlugin 插件可以压缩 css 和 js 文件，但是一开始时总是无法压缩文件，后来查阅了一下资料，大概是因为下面几个原因：
npm install mishoo/UglifyJS2#harmony --save
js plugins: [ new webpack.LoaderOptionsPlugin({ minimize: true }) ]
如果按上面的修改了还是不能压缩文件，可以试着将 node_modules 删除，然后重新安装依赖。
Vue本部分主要记录一下程序中用到的 Vue 语法，如果想要系统的学习一下 Vue.js，可以参考下面的文章：
我们首先来看一个最简单的 Vue 示例：
Vue Demo{{ message }} app ()
每个 Vue 应用都会创建一个 Vue 的根实例，在根实例中需要传入 html 标签的 id，用来告诉 Vue 该标签中的内容需要被 Vue 来解析。上面是一个简单的数据绑定的示例，在运行实 {{ message }} 会被解析为 "Hello Vue!"。
基础本节参考自 Vue 中文文档，略有修改
在写 Vue 应用之前，我们要熟悉一下 Vue 的基本语法，主要包括数据绑定、事件处理、条件、循环等，下面我们依次看下相关的知识。
数据绑定Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。下面是 Vue.js 数据绑定的相关语法：
文本
数据绑定最常见的形式就是使用 "Muestache" 语法（双大括号），如下面的形式：
<span>Message: {{ msg }} </span>
Muestache 标签会被解析为对应对象上的 msg 属性值。当 msg 属性发生改变之后，Muestache 标签处解析的内容也会随着更新。
通过使用 v-once 指令，我们可以执行一次性解析，即数据改变时，解析的内容不会随着更新。需要注意的是 v-once 会影响该节点上的所有数据绑定
This will never change: {{ msg }}</span>
Raw HTML
不论属性值是什么内容，Muestache 标签里的内容都会被解析为纯文本。如果希望将绑定的值解析为 HTML 格式，就需要使用 v-html 指令：
属性值
Mustache 语法不能用在 HTML 的属性中，如果想为属性绑定变量，需要使用 v-bind 指令：
假设 dynamicId=1，那么上面代码就会被解析为
另外 v-bind 指令可以被缩写为 :，所以我们在程序中经常看到的是下面的语法形式：
表达式
对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持，如下面的形式：
// 加法 {{ number + 1 }} // 三元表达式 {{ ok ? 'YES' : 'NO' }} // JS 库函数 {{ message.split('').reverse().join('') }} // 指令中使用表达式
通过使用 v-on 指令可以监听 DOM 事件来触发 JS 处理函数，下面是一个完整的示例：
Vue Demo增加 1app (() )
通常情况下，v-on 会被简写为 @，所以我们在程序中一般是看到下面的形式
增加 1增加 1</button>
条件指令 v-if通过 v-if 指令我们可以根据某些条件来决定是否渲染内容，如下面的形式
Yes</h1>
我们通常将 v-if 和 v-else 结合起来使用，如下所示：
Now you see me Now you don't </div>
在 Vue 2.1.0 中新增了一个 v-else-if 指令，可以进行链式判断：
A B C Not A/B/C </div>
循环指令 v-for通过 v-for 指令，我们可以根据一组数据进行迭代渲染，下面是一个基本示例：
{{ item.message }} </li> </ul>
([ ] } })
上面是一个简单的对数组迭代的示例，我们还可以针对对象进行迭代，如果只使用一个参数，就是针对对象的属性值进行迭代：
{{ value }} </li> </ul>
如果传入第二个参数，就是针对对象的属性值以及属性名进行迭代，注意这里二个参数表示的是属性名，也就是 key
{{ key }} : {{ value }} </div>
如果再传入第三个参数，第三个参数就表示索引
{{ index }}. {{ key }} : {{ value }} </div>
组件
相关文章
精彩导读
热门资讯
关注我们
