一、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

Vue3 学习笔记（一）Vue3 介绍及环境部署_vue3

使用 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



Vue3 学习笔记（一）Vue3 介绍及环境部署_vue3_02