VUE2目前炙手可热,因为它既有angular的模板特性,也有React的单向数据流特性,最重要的是它非常的小巧。对于小巧功能却又强大的库来说,是我完全无法拒绝的。换句话说,对于VUE2工程来说,你既可以使用它的模板功能,也可以通过它搭建大规模的组件工程。
兼容性
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
介绍
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
安装
独立版本
直接下载并用 <script>标签引入,Vue会被注册为一个全局变量。重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。
CDN
推荐:unpkg, 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue/ 浏览 npm 包资源。
也可以从 jsdelivr 或 cdnjs 获取,不过这两个服务版本更新可能略滞后。
AMD-模块加载器
独立下载版本或通过 Bower 安装的版本已用 UMD 包装,因此它们可以直接用作 AMD 模块。
NPM安装
在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
安装命令行工具的注意事项:确保nodejs是4.x+版本,6.x+是首选
命令行工具的模板如下:
- webpack - 一个功能齐全的Webpack + vue-loader设置,具有热重装,linting,测试和css提取。
- webpack-simple - 一个简单的Webpack + vue-loader设置快速原型。
- browserify - 一个全功能的Browserify + vueify设置,具有热重装,棉绒和单元测试。
- browserify-simple - 一个简单的Browserify + vueify设置快速原型。
- simple - 在单个HTML文件中最简单的Vue设置
vue-cli是一个很人性化的工具,可以借助它将自己搭建的工程模板上传到自己的github上,之后可以通过vue init username/repo my-project就可以下载自己模板作为项目。
vue-cli的模板制作可以根据webpack-simple提供的内容仿照的来制作,template存放纯粹的文件夹结构和配置文件,再配置meta.json即可。
我在自己的github上发布了vue-cli能使用的模板,感兴趣的可以去下载使用。
vue2-webpack-gulp-template
安装调试工具vue-devtools
vue-devtools是和react-devtools一样的调试工具,在调试多组件时很方便。安装此调试工具有两种方法:
- chrome商店安装。下载地址,不过我的网络似乎访问不了chrome的商店。
- 下载源码自己打包。
- 第一步进入vue-devtools的gitbug,并下载源码
- 第二步确保自己的机器上有nodejs6.0+和npm3.0+的环境,本人在编译的时候就很烦,因为我机器上的nodejs是4.2.4版本,npm是2.0+版本,显然是编译不了的,于是我找了一台新机器在这个机器上安装了nodejs6.5和其自带的npm3.0+
- 第三步通过命令行进入源码的文件夹执行npm install 这个过程有点慢,当然取决于自己的网络环境。
- 第四步安装完之后就要开始编译了,继续在此文件夹下执行npm run build,这个过程很快,正常来说都会顺利的编译成功。之后把vue-devtools-master\shells\chrome文件夹拷贝走代用。
- 第五步上述所说bulid是在其他的机器上,把编译的chrome文件夹拷贝到自己的电脑的某一个文件夹中,我拷贝了到了e:/chrome-ext/文件夹下并把文件名改成了vue-devtools
- 第六步打开chrome浏览器,在地址栏中输入:chrome://extensions 打开扩展程序页面并勾选右上角的"开发者模式"。在出现的按钮中,选择加载已解压的扩展程序按钮,并选择编译好的vue-devtools目录,即:e:/chrome-ext/vue-devtools
执行上面的六步后,发现vue-devtools安装成功了,打开一个vue项目,并点击f12打开调试工具,你会发现在调试工具的最后一栏多出了一个vue的tab,这个tab就是vue-devtools
开发工具
本人习惯使用atom进行开发,但是默认的atom没有对.vue文件的语法高亮。所以需要安装atom的扩展。
language-vue-component
安装方法很简单,只要你的atom安装了插件客户端即可,运行cmd,在里面直接敲入下面代码即可,之后就是等待其安装完毕。这样atom就有.vue的语法高亮了。
apm install language-vue-component