1.莫名的冲动

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 包资源。
也可以从 jsdelivrcdnjs 获取,不过这两个服务版本更新可能略滞后。

AMD-模块加载器

独立下载版本或通过 Bower 安装的版本已用 UMD 包装,因此它们可以直接用作 AMD 模块。

NPM安装

在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 WebpackBrowserify 模块打包器配合使用。 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一样的调试工具,在调试多组件时很方便。安装此调试工具有两种方法:

  1. chrome商店安装。下载地址,不过我的网络似乎访问不了chrome的商店。
  2. 下载源码自己打包。
  • 第一步进入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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,408评论 4 371
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,690评论 2 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,036评论 0 255
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,726评论 0 221
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,123评论 3 296
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,037评论 1 225
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,178评论 2 318
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,964评论 0 213
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,703评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,863评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,333评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,658评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,374评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,195评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,988评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,167评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,970评论 2 279

推荐阅读更多精彩内容

  • 个人基于对 Vuejs 的学习制作了一个 Todo 单页应用 Lightodo,功能包括:添加待办事项卡片,对卡片...
    AlessiaLi阅读 21,479评论 16 308
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,444评论 4 43
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,236评论 4 31
  • 春意盎然,枝丫上开满了花万众瞩目,它们都一展芳华但我不去赞扬,因为我的眼里只留得孤独我也没空欣赏,因为我又想起我的...
    牟三幺阅读 320评论 10 6
  • 在我们的日常生活中,存在大量需要我们说服别人的情境,在短短一天中,我们可能就有意无意地进行了好几次说服性沟通:工作...
    刘清明70后阅读 371评论 1 0