欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

文摘  Vue.js框架的介绍和安装

JS框架 本站 1211 0评论

一、Vue.js 是什么?


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

官网:https://cn.vuejs.org/ 

中文文档:https://cn.vuejs.org/v2/guide/ 


Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架https://cn.vuejs.org/v2/guide/comparison.html  )。


如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。


当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。


二、安装和使用Vue.js


兼容性

Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用的 ECMAScript 5 特性在 IE8 无法模拟。Vue.js 支持所有兼容 ECMAScript 5 的浏览器


更新日志

最新稳定版本:2.5.17

每个版本的详细更新日志见 GitHub


Vue Devtools

在使用 Vue 时,我们推荐你在浏览器中安装 Vue Devtools ,可以通过更加友好的用户界面,来审查和调试你的 Vue 应用程序。


1、直接引入 <script> 标签

通过 script 标签直接下载并引入,Vue 会被注册为一个全局变量。

在开发环境,不要使用最小压缩版本。因为开发版本中,所有常见错误的警告会更加友好!

a.开发环境版本(包含完整的警告和调试模式): http://vuejs.org/js/vue.js 

b.生产环境版本(删除警告,30.90KB min+gzip): http://vuejs.org/js/vue.min.js 


2、使用 CDN 方法

尝试 Vue.js 最简单的方法是使用 JSFiddle Hello Worldhttps://jsfiddle.net/chrisvfritz/50wL7mdz/  )示例。你可以在浏览器新标签页中打开它,跟着基础示例学习一些基本用法。或者你也可以在本地创建一个 index.html 文件,然后通过如下方式引入 Vue:

<!-- 开发版本,包含有用的控制台警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或:

<!-- 生成版本,对于体积和速度进行优化 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

示例:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>


以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js 

unpkg:https://unpkg.com/vue/dist/vue.js  , 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js 


3、NPM 方法

由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像


npm 版本需要大于 3.0,如果低于此版本需要升级它:

# 查看版本

$ npm -v

2.3.0


#升级 npm

cnpm install npm -g


# 升级或安装 cnpm

npm install cnpm -g


在用 Vue.js 构建大型应用时推荐使用 NPM 安装:

# 最新稳定版

$ cnpm install vue


我们比较推荐的方式是,链接到可以手动修改的指定版本上:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>


你可以在 https://cdn.jsdelivr.net/npm/vue/   浏览 npm 包的源码。

还可以使用 unpkg(https://unpkg.com/vue@2.5.17/dist/vue.js  ) 和 cdnjs(https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js  ) 来获取 Vue(cdnjs 需要一段时间才能同步,所以可能会无法获取最新版本)。


请务必阅读 Vue 不同构建版本的解释说明,并且在你发布的网站中使用生产环境版本,也就是将 vue.js 替换为 vue.min.js。

这是一个为了更快速的执行,而进行更小体积优化的构建版本,并不是为了好的开发体验。


可以查看官网安装页面(https://vue.docschina.org/v2/guide/installation.html  )来了解安装 Vue 的其他选项。注意:我们不推荐新手从 vue-cli 开始项目,特别是当你对基于 Node.js 的构建工具不够熟悉时。


如果你更喜欢交互式,可以查看 Scrimba 系列教程https://scrimba.com/playlist/pXKqta  ),它可以为您提供屏幕录制和代码试验场,并且可以随时暂停和播放。


命令行工具 (CLI)


Vue 提供了一个官方的CLI(https://github.com/vuejs/vue-cli  ),为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档(https://cli.vuejs.org/  )。


CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南(https://cn.vuejs.org/v2/guide/  ),在熟悉 Vue 本身之后再使用 CLI。


# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
   vue-cli · Generated "my-project".
   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack


进入项目,安装并运行:

$ cd my-project

$ cnpm install

$ cnpm run dev

 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

56219E04-D156-43EC-AC59-BFE7E38A62C3.jpg


在 Cloud Studio 中运行 Vue.js


下面我们介绍如何在 Cloud Studio 中安装、使用 Vue.js:

step1:访问 Cloud Studio,注册/登录账户。

step2:在右侧的运行环境菜单选择:"Node.js"

step3:在左侧代码目录中新建 html 目录,编写你的HTML代码,例如 index.html

212a55fb-94b6-4e66-b410-35863605d7a4.jpg


step4: 我们推荐链接到一个你可以手动更新的指定版本号:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。 Vue 也可以在 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。


step5:在用 Vue 构建大型应用时推荐使用 NPM 安装:

# 最新稳定版

$ npm install vue


step6:Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

# 全局安装 vue-cli

$ cnpm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 这里需要进行一些配置,默认回车即可


进入项目,安装并运行:

$ cd my-project

$ cnpm install

$ cnpm run dev

 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080


step7:点击最右侧的【访问链接】选项卡,在访问链接面板中填写端口号为:8080(和刚才配置文件中的端口号一致),点击创建链接,即可点击生成的链接访问我们刚刚编写的代码,查看 Vue.js 效果。

56219E04-D156-43EC-AC59-BFE7E38A62C3.jpg


参考网址:

http://www.runoob.com/vue2/vue-tutorial.html 

http://www.cnblogs.com/keepfool/p/5619070.html 

https://blog.csdn.net/qq_33269520/article/details/79852124 


转载请注明: ITTXX.CN--分享互联网 » Vue.js框架的介绍和安装

最后更新:2018-11-30 18:28:15

赞 (1) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽