Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

下面介绍三种 Vue.js 的安装方法:

1.独立版本

我们可以在Vue.js的官网上直接下载vue.js,在html中通过<script>标签引用,使用<script>标签中的src属性实现 <script src = ../vue.js> </script>

Vue.js

2.使用CDN方法

以下推荐国外比较稳定的两个 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

Staticfile CDN(国内)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p>{{msg}}</p></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>new Vue({el:'#app',data:{msg:'Hello Vue.js',},})</script>
</body>
</html>

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 构建大型应用时推荐使用 cnpm 安装:

# 最新稳定版
$ cnpm install vue

命令行工具

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

# 全局安装 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? Yesvue-cli · Generated "my-project".To get started:cd my-projectnpm installnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

进入项目,安装并运行:

$ cd my-project
$ cnpm install
$ cnpm run devDONE  Compiled successfully in 4388ms> Listening at http://localhost:8080

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

Vue.js安装方式相关推荐

  1. Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细)

    Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) 目录 一.安装Node(npm)需要的环境和版本发布信息 (1).Node版本和npm版本关系 (2).支持 ...

  2. 【Vue.js安装】

    Vue.js 安装 直接下载并使用 官方网站:https://cn.vuejs.org/ https://cn.vuejs.org/v2/guide/installation.html 选择 &quo ...

  3. vue.js — 安装Webpake创建一个完整的项目并上传至码云

    vue.js - 安装Webpake创建一个完整的项目并上传至码云 今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...

  4. Vue.js安装使用教程

    一.说明 上大学前,请的都是前端JavaScript.后端ASP/PHP/JSP.前后端代码混杂:上大学时,请的都是前端Jquery.后端SSH.前后端代码分离通过模板关联:大学出来后,请的都是前端三 ...

  5. vue.js安装与配置

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  6. Vue.js安装方法

    两种安装方法 1.独立版本 在Vue.js的官网上直接下载vue.js,并在<script>标签中引用.->  <script src = ../vue.js> < ...

  7. Vue.js 安装及其环境搭建,webpack-simple支持热更新

    1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网:https://nodejs.org/en/ 2.安装git Git的官网:https://git-scm. ...

  8. Vue.js安装教程

    目的: 记录使用npm安装方式 安装Vue.js的过程,方便参考和借阅 No 1. 安装Node.js (如果电脑上已经安装了npm环境的同学,就不用再次安装,可以跳过此步骤 直接到No.2) 1.1 ...

  9. vue.js安装过程(npm安装)

    一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...

最新文章

  1. parseInt 与 parseFloat 解析
  2. C++下的DLL编程入门
  3. 为什么选择图形数据库,为什么选择Neo4j?
  4. SD-WAN的四个价值—Vecloud微云
  5. 目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto
  6. Pixhawk之姿态解算篇(3)_源码姿态解算算法分析
  7. 数据结构(单链表的相关操作)
  8. 给程序员的10条建议,句句经典
  9. 浅谈_依赖注入 asp.net core
  10. java实现面向对象编程_java实现面向对象编程
  11. JQuery学习记录——jQuery对象和DOM对象的转换
  12. ncnn DataReaderExtractorblob
  13. lync显示无法找到服务器,Lync 中的用户联系人照片未正确显示
  14. 关于QRCode生成二维码(背景图、Logo)
  15. 【附源码】计算机毕业设计Python安卓基于安卓的校园跑腿代购476ww(源码+程序+LW+调试部署)
  16. PTA习题 7-4 定义抽象类Person、派生类Student和类Teacher
  17. 二十、哈希表的基础知识
  18. 未转变者服务器3.26物品id,Unturned未转变者3.21版本物品ID代码汇总
  19. php s3 创建bucket,AWS管理控制台:五步创建S3 bucket策略
  20. WebRTC 实现P2P音视频通话——搭建信令服务器

热门文章

  1. 《Java Concurrency in Practice》之可见性(Visibility)
  2. 公有云平台专题《电信云平台,NB-IoT模组对接电信CTWing平台》
  3. Retrofit 使用 一
  4. c++ 继承的同名成员以及同名函数的处理方式
  5. postgres内存上下文
  6. 接口自动化测试从入门到高级实战(最新干货)
  7. java敏感词关键词过滤
  8. Oracle小数点保留问题
  9. 袁毓林 李强:怎样用物性结构知识解决“网球问题”?(下)
  10. 2万字系统总结,带你实现 Linux 命令自由?还不赶紧进来学习