当前位置：首页 > news >正文

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

news 2024/10/22 12:15:20

一、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) yVue.js - The Progressive JavaScript Framework√ 请输入项目名称： ... testvue
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是正在初始化项目 C:\Users\pc\testvue...项目初始化完成，可执行以下命令：cd testvuenpm installnpm run dev

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd testvue

npm install

执行后如下：

C:\Users\pc\testvue>npm installadded 183 packages in 2m41 packages are looking for fundingrun `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

在这里插入图片描述