02《Vue 入门教程》Vue 的安装
liuian 2025-01-05 18:41 167 浏览
1. 前言
本小节将带领大家学习一下如何安装 Vue。包括独立版本、CDN、NPM、CLI 工具四种不同的安装方法。
2. 独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用<script>标签引入。
下载Vue.js
安装步骤:
- 打开Vue.js下载地址并拷贝所有代码。
- 创建vue.min.js文件,并将拷贝的源码粘贴进去。
- 创建index.html并通过<script>标签引入。
- 打印Vue验证是否成功。
//文件结构
└─ lession
├─ index.html
└─ vue.min.js
实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
Hello Imooc !
</div>
</body>
<script src="./vue.min.js"></script>
<script type="text/javascript">
console.log(Vue)
</script>
</html>
123456789101112131415161718
"运行案例" 可查看在线运行效果
## 打印结果
? wn(e){this._init(e)}
3. 使用 CDN 方法
使用 CDN 的方式引入Vue更加方便、快捷。以下推荐几个比较稳定的 CDN。
- https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- https://unpkg.com/vue/dist/vue.js
- https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
- https://cdn.jsdelivr.net/npm/vue/dist/vue.js
实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
Hello Imooc !
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script type="text/javascript">
console.log(Vue)
</script>
</html>
"运行案例" 可查看在线运行效果
4. 使用NPM的方法
使用NPM的方法进行安装需要先在本地安装Node环境。
3.1、Windows 上安装 Node.js
32 位安装包下载地址 64 位安装包下载地址 下载对应的安装包后,双击安装包,傻瓜式下一步安装就好了。
3.2、Mac 上安装 Node.js
1、在官方下载网站下载 pkg 安装包,直接点击安装即可。 2、使用 brew 命令来安装:brew install node
brew install node
代码块1
# 查看本地node环境
$ node -v
v10.16.0
代码块123
在用 Vue 构建大型应用时推荐使用 NPM 安装。当然,仅仅使用npm install是不能完整搭建Vue开发环境的。还需要webpack或 Browserify 等模块打包器配合使用。
# 创建项目目录
$ mkdir demo
# 进入项目文件夹
$ cd demo
$ npm init -y
# 最新稳定版
$ npm install vue
# 安装指定版本Vue
$ npm install vue@2.6.3
代码块123456789101112
安装完成后可以查看到demo目录下多了 node_module/vue 文件夹。说明Vue成功安装。
5. 命令行工具(CLI)
当然,看过 Vue 官网的同学肯定都知道 Vue 提供了一个官方的 CLI,为我们快速搭建大型单页应用。我们并不建议同学们在一开始就使用 Vue-cli 来构建项目,因为这需要同学们对 Node.js、Webpack 等技术有所了解。在熟悉了 Vue 的语法之后,我们将有一个完整的章节来学习和使用 Vue-cli。
6. 小结
本小节我们介绍了 Vue 安装的几种方式。作为初学者,我们建议同学们先使用第一、第二种方式进行学习。在对 Vue 有一定的了解之后再学习脚手架工具 Vue-Cli 的使用。在接下来 Vue 基础的章节中我们都将使用 <script src="https://unpkg.com/vue/dist/vue.js"></script> 的方式进行代码演示。关于脚手架工具 Vue-Cli 的学习,我们将在最后一个章节中一起探讨。
相关推荐
- 10种常见的MySQL错误,你可中招?
-
【51CTO.com快译】如果未能对MySQL8进行恰当的配置,您非但可能遇到无法顺利访问、或调用MySQL的窘境,而且还可能给真实的应用生产环境带来巨大的影响。本文列举了十种MySQL...
- MySQL主从如何保证数据一致性
-
MySQL主从(主备)搭建请点击基于Spring的数据库读写分离。MySQL主备基本原理假设主备切换前,我们的主库是节点A,节点B是节点A的备库,客户端的读写都是直接访问节点A,节点B只是将A的更新同...
- MySQL低版本升级操作流程
-
(关注“数据库架构师”公众号,提升数据库技能,助力职业发展)0-升级背景MySQL5.5发布于2010年,至今已有十年历史,官方已经停止更新。2008年发布的MySQL5.1版本,在2018年...
- MySQL数据库知识
-
MySQL是一种关系型数据库管理系统;那废话不多说,直接上自己以前学习整理文档:查看数据库命令:(1).查看存储过程状态:showprocedurestatus;(2).显示系统变量:show...
- Mysql 8.4数据库安装、新建用户和数据库、表单
-
1、下载MySQL数据库yuminstall-ywgetperlnet-toolslibtirpc#安装wget和perl、net-tools、libtirpcwgethtt...
- mysql8.0新功能介绍
-
MySQL8.0新特性集锦一、默认字符集由latin1变为utf8mb4在8.0版本之前,默认字符集为latin1,utf8指向的是utf8mb3,8.0版本默认字符集为utf8mb4,utf8默...
- 全网最详细解决Windows下Mysql数据库安装后忘记初始root 密码方法
-
一、准备重置root的初始化密码Win+R键启动命令输入窗口;输入cmd打开命令执行窗口;##界面如下##输入命令:netstopmysqld#此操作会停止当前运行的...
- 互联网大厂面试:MySQL使用grant授权后必须flush privilege吗
-
从我上大学时,数据库概论老师就告诉我,MySQL使用grant对用户授权之后,一定记得要用flushprivilege命令刷新缓存,这样才能使赋权命令生效。毕业工作以后,在很多的技术文档上,仍然可以...
- # mysql 8.0 版本无法使用 sqlyog 等图形界面 登录 的解决方法
-
30万以下的理想L6来了##mysql8.0版本无法使用sqlyog等图形界面登录的解决方法当我们在cmd下登录mysql时正常时,用sqlyog等图形界面连接数据库时却...
- MySQL触发器介绍
-
前言:在学习MySQL的过程中,可能你了解过触发器的概念,不清楚各位是否有详细的去学习过触发器,最近看了几篇关于触发器的文档,分享下MySQL触发器相关知识。1.触发器简介触发器即trigg...
- 管理员常用的MySQL命令汇总(一)
-
以下是管理员常用的MySQL命令:以管理员身份连接到MySQL:mysql-uroot-p创建新的MySQL用户:CREATEUSER'username'@'...
- Linux(CentOS) 在线安装MySQL8.0和其他版本,修改root密码
-
一:安装MySQL数据库1),下载并安装MySQL官方的YumRepositorymysql官方仓库地址:https://dev.mysql.com/downloads/repo/yum/选择自...
- 解决 MySQL 8.0 一直拒绝 root 登录问题
-
Accessdeniedforuser'root'@'localhost'(usingpassword:YES)这个错误在网上搜一下,能看到非常多的此类...
- 大模型MCP之MYSQL安装
-
前言学习大模型的时候需要一个mysql,原因还是在公司使用电脑的时候不允许按照Docker-Desktop,我的宿主机其实是MAC,我习惯上还是在centsos上面安装,就发现这件过去很简单的事情居然...
- MySQL ERROR 1396
-
ERROR1396(HY000):OperationCREATEUSERfailedfor'usera'@'%'问题描述mysql>create...
- 一周热门
-
-
Python实现人事自动打卡,再也不会被批评
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架,真香
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
系统C盘清理:微信PC端文件清理,扩大C盘可用空间步骤
-
飞牛OS入门安装遇到问题,如何解决?
-
10款高性能NAS丨双十一必看,轻松搞定虚拟机、Docker、软路由
-
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)