一、Vue.js 简介
1、Vue.js 是什么?
- Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
- Vue 只关注视图层, 采用自底向上增量开发的设计。
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- Vue 学习起来非常简单,本教程基于 Vue3 以上版本测试。
2、Vue.js 的特点和优势
- 轻量级:Vue.js 的核心库非常小巧(大约 20KB),加载速度快。
- 渐进式框架:Vue 可以自下而上逐层应用。你可以在一个已有项目中使用 Vue 作为一个简单的视图层库,也可以使用 Vue 来管理整个前端应用。
- 易于学习:Vue 的设计非常直观,适合前端初学者,文档也非常详尽。
- 高性能:Vue 的虚拟 DOM 和高效的差异化算法,使其具有良好的性能表现。
- 组件化:Vue 允许使用组件构建应用程序,组件可以复用并且易于维护。
- 双向数据绑定:Vue 提供了简洁易用的双向数据绑定机制,使得数据和视图之间的同步变得非常简单。
二、Vue3 安装
1、 使用 CDN 方法
- Staticfile CDN : https://cdn.staticfile.net/vue/3.0.5/vue.global.js
- 字节跳动 CDN : https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js
- unpkg:https://unpkg.com/vue@3/dist/vue.global.js
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello RUNOOB!'
}
}
}).mount('#app')
</script>
</body>
</html>
2、NPM 方法
(1)、npm 版本需要大于 3.0,如果低于此版本需要升级
# 查看版本
$ npm -v
2.3.0
(2)、由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
$ npm install -g cnpm --registry=https://registry.npmmirror.com
推荐使用 cnpm 安装,cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用。
# 升级或安装 cnpm
npm install cnpm -g
使用 cnpm 命令来安装模块
#升级 npm
cnpm install npm -g
然后在命令行中运行以下命令:
# 最新稳定版
$ cnpm init vue@latest
这将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具:
C:\Users\pc>cnpm init vue@latest
Need to install the following packages:
create-vue@3.11.1
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
√ 请输入项目名称: ... testvue
√ 是否使用 TypeScript 语法? ... 否 / 是
√ 是否启用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是
√ 是否引入 Pinia 用于状态管理? ... 否 / 是
√ 是否引入 Vitest 用于单元测试? ... 否 / 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是
正在初始化项目 C:\Users\pc\testvue...
项目初始化完成,可执行以下命令:
cd testvue
npm install
npm run dev
在项目被创建后,通过以下步骤安装依赖并启动开发服务器:
cd testvue
npm install
执行后如下:
C:\Users\pc\testvue>npm install
added 183 packages in 2m
41 packages are looking for funding
run `npm fund` for details
npm run dev
执行后如下:
VITE v5.4.9 ready in 483 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
➜ press h + enter to show help