本次IDE使用Codebuddy，为方便前端学习使用live server插件方便web浏览
image.png
Vue3获取
1、官方地址
https://unpkg.com/vue@3.5.20/dist/vue.global.js
2、CDN
* **Staticfile CDN（国内）** : [https://cdn.staticfile.net/vue/3.0.5/vue.global.js](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](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](https://unpkg.com/vue@3/dist/vue.global.js), 会保持和 npm 发布的最新的版本一致。
* **cdnjs** : [https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js](https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js)
demo0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>
image.png
3、NPM 方法
需要nodejs环境
-
使用 create-vue（Vue3 官方工具）
npm init vue@latest
# 等同于
npm create vue@latest
image.png
其中，不同选项对应如下
🔷 TypeScript
作用: 为 JavaScript 添加静态类型检查
优势: 提供更好的代码提示、错误检测、重构支持
适用: 大型项目、团队开发、需要更严格类型约束的项目
示例: let message: string = "Hello Vue"
🔷 JSX Support
作用: 支持在 Vue 中使用 JSX 语法（类似 React）
区别: Vue 默认使用模板语法，JSX 是另一种组件编写方式
适用: 熟悉 React 的开发者，或偏好 JSX 语法的场景
🔷 Router (SPA development)
作用: Vue Router，用于单页应用的路由管理
功能: 页面跳转、路由守卫、动态路由等
适用: 多页面的单页应用
示例: /home, /about, /user/:id
🔷 Pinia (state management)
作用: Vue3 官方推荐的状态管理库（替代 Vuex）
功能: 全局状态管理、数据共享
适用: 组件间需要共享复杂状态的应用
优势: 更简单的 API，更好的 TypeScript 支持
🔷 Vitest (unit testing)
作用: 单元测试框架，专为 Vite 优化
功能: 测试组件、函数的功能是否正确
适用: 需要保证代码质量的项目
特点: 快速、现代化的测试体验
🔷 End-to-End Testing
作用: 端到端测试（通常是 Cypress 或 Playwright）
功能: 模拟用户操作，测试完整的用户流程
适用: 需要测试完整用户体验的项目
区别: 比单元测试更接近真实用户使用场景
🔷 ESLint (error prevention)
作用: 代码质量检查工具
功能: 发现潜在错误、统一代码风格
适用: 几乎所有项目都建议使用
示例: 检查未使用的变量、语法错误等
🔷 Prettier (code formatting)
作用: 代码格式化工具
功能: 自动格式化代码，保持一致的代码风格
适用: 团队开发，保持代码风格统一
配合: 通常与 ESLint 一起使用
cd vue-project
npm install
npm run dev
当准备将应用发布到生产环境时，运行：
npm run build
此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。关于将应用上线生产环境的更多内容
image.png
-
安装 Vue CLI（传统方式）图形化界面
# 全局安装 Vue CLI
npm install -g @vue/cli
# 安装完成后就可以使用
vue ui
image.png
image.png
Vite（最现代的方式）
现在 Vue3 官方更推荐使用 create-vue 或 Vite。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。
npm init vite-app <project-name>
cd vue-vite-project
npm install
npm run dev
当准备将应用发布到生产环境时，运行：
npm run build
此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。关于将应用上线生产环境的更多内容
image.png
