Vue介绍及vue-devtools的安装

最近准备学习一下vueJs，把一些准备工作和基础的东西总结记录下！欢迎指正！

---

一. vueJs是什么

Vue(读音 /vju: /, 类似于view)是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

暂时不太理解什么是“渐进式框架”和“自底向上逐层应用”，搜索了很多的资料，理解的是”渐进式框架”就是不用上来就使用整个vue全家桶，开发者可以根据场景，一步步去搭建，自主的去选择合适的框架。随着一点点学，相信后面应该会有更深入的理解吧！

二. 如何使用和安装vue

跟正常的jquery用法一样，可以直接将vue.js文件引入到页面里，直接使用即可！

//开发环境版本，包含了用帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生成环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

构建大型应用时推荐使用NPM安装。NPM能够很好的和webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件 (Vue-Cli)。

$ npm install vue

三. 在浏览器上安装Vue Devtools

1.先在github上找到vue-devtools的项目，下载到本地。可以使用git clone

git clone https://github.com/vuejs/vue-devtools.git

2.解压下载好的文件，进入到vue-devtools目录，安装项目所需要的依赖包

$ cd vue-devtools
$ npm install

3.编译项目文件

$ npm run build

4.修改安装目录vue-devtools\shells\chrome中的manifest.json文件。persistent参数改为true

5.添加到浏览器，步骤：进入扩展页面–>点击“加载已解压的扩展程序“–>选择vue-devtools>shells目录下面的chrome 文件夹

6.打开Vue项目进行调试，就可以看到Vue扩展图标

---

好了，这就是全部的内容了。。有借鉴其他同学写的文章，如有雷同，勿喷！谢谢！只是用来自己总结！