VueJs 填坑日记

通过上一篇博文的学习，我们其实已经完成了我们设想的项目的开发。但是，我们做好的这套东西，是基于 nodejs 开发的。而我们最终希望，我们开发的项目，生成好一堆文件，然后随便通过任何一个 http 服务就能跑起来，也就是，还原成我们熟悉的 html+css+js 的模式。这章，我们来讲解这部分内容。

上一篇博文我们整合了Amaze ui，并且调整了一个头部header和底部footer文件，其实做起来也很简单，只要按照步骤来做，完全没有问题。今天我们来重新调整一下列表页面和内容页面，使我们做的后台管理系统更有范儿。

上一篇博文，我们把jQuery集成到了项目中，今天我们来集成Amaze ui（妹子UI）。先来介绍一下妹子UI。Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。最主要是妹子UI的性能好，轻量级。

首先呢，jQuery 是提供了 npm 的安装包的。我们的 vue-cli 脚手架，也是支持引入的。不过设置比较麻烦，如果你对使用这种方法比较敢兴趣，可以直接参考下面的内容。好，我们不说这种方式引入 jQuery 而是引用文件的方式引用。

其他的内容，我们在列表页面已经见过了。这里第一次出现 这个东西。同样是渲染内容， v-html 和 v-text 有什么区别呢？其实区别非常简单，v-text 会把所有的内容当成字符串给直接输出出来。而 v-html 会把字符串给转换为 html 标记语言给渲染出来。

在上一篇博文中，我们对vue组件有了一个简单的认识和大概的理解。在之前认识项目结构的时候，我们在/src目录中创建了一个components的文件夹，而今天就要用到了，这个文件夹的作用就是放置我们的自定义组件。

首先，我们用 vue-cli 脚手架搭建的项目，里面我们已经遇到了很多，如 index.vue 或者 App.vue 这一的文件了。这到底是个什么东西？如果是初次接触 vue 开发的同学，可能之前没有见过这个东西。*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块

那么如何解决这个问题呢？其实很简单，要知道 跨域不是接口的限制 而是浏览器为了保障数据安全做的限制。因此，一种方法可以解决，那就是打开浏览器的限制，让我们可以顺利的进行开发。但是无奈的是，最新的 chrome 浏览器好像已经关闭了这个选项，那么我们只能采用另外一种方法了——将接口代理到本地。

支持ajax请求的工具很多，像superagent和axios。今天我们用的就是axios，因为听说最近网上大部分的教程书籍都使用的是axios，本身axios这个工具就已经做了很好的优化和封装，但是在使用时，还是比较繁琐，所以我们来重新封装一下。

上一篇博文，我们搭建了一套基础的vuejs的环境，首先安装node.js，然后利用npm包管理器，安装vue-cli，设置淘宝镜像，初始化项目，安装依赖，运行。在这一篇，我们将认识vuejs项目里的各个目录结构。