本项目是基于 vue3 框架集成各种前端组件示例。
- 确保你安装了最新版本的 Node.js
验证环境：
node -v
npm -v
本地环境验证示例：
# 本地采用的版本示例
node -v
v22.11.0
npm -v
10.9.0切换Nodejs环境：
# 环境切换
nvm use 22.11.0 # 使用此版本，对应vue3
nvm use 18.16.0 # 使用此版本，对应vue2
# 查看环境
node -v
npm -v进入某个项目模块，安装依赖包:
# 进入某个项目
cd <your-project-name>
# 安装依赖包
npm install本地运行：
npm run dev当你准备将应用发布到生产环境时，请运行：
# 生成生产环境代码
npm run build本地快速预览：
# 本地预览-生成的生产环境代码
npm run preview-
强烈推荐 Visual Studio Code (VS Code)，因为它对 TypeScript 有着很好的内置支持。
-
Vue - Official (之前是 Volar) 是官方的 VS Code 扩展，提供了 Vue 单文件组件中的 TypeScript 支持，还伴随着一些其他非常棒的特性。
注意：
Vue - Official 扩展取代了我们之前为 Vue 2 提供的官方 VS Code 扩展 Vetur。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。
-
-
WebStorm 对 TypeScript 和 Vue 也都提供了开箱即用的支持。其他的 JetBrains IDE 也同样可以通过一个免费插件支持。从 2023.2 版开始，WebStorm 和 Vue 插件内置了对 Vue 语言服务器的支持。你可以在设置 > 语言和框架 > TypeScript > Vue 下将 Vue 服务设置为在所有 TypeScript 版本上使用 Volar 集成。默认情况下，Volar 将用于 TypeScript 5.0 及更高版本。
- 参考官网-快手上手
同样，确保你的系统上已经安装了 Node.js 和 npm。可以通过以下命令检查：
node -v
npm -v如果没有安装，请前往 Node.js 官网 下载并安装最新版本。
# For npm
npm create vue@latest
# For pnpm
pnpm create vue@latest
# For Yarn Modern (v2+)
yarn create vue@latest
cd <your-project-name>
npm install
npm run dev你现在应该已经运行起来了你的第一个 Vue
项目！请注意，生成的项目中的示例组件使用的是组合式 API 和
<script setup>，而非选项式 API。下面是一些补充提示：
- 推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展 。如果使用其他编辑器，参考 IDE 支持章节。
- 更多工具细节，包括与后端框架的整合，我们会在工具链指南进行讨论。
- 要了解构建工具 Vite 更多背后的细节，请查看 Vite 文档。
- 如果你选择使用 TypeScript，请阅读 TypeScript 使用指南。
npm run build
pnpm run build
yarn build此命令会在 ./dist
文件夹中为你的应用创建一个生产环境的构建版本。关于将应用上线生产环境的更多内容，请阅读生产环境部署指南。
这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs 。当然，你也可以下载此文件并自行提供服务。
下面的链接使用了全局构建版本的 Vue，该版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。这里有一个使用全局构建版本的例子：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const {createApp, ref} = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>在本文档的其余部分我们使用的主要是 ES 模块 语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：
<div id="app">{{ message }}</div>
<script type="module">
import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>注意我们使用了 <script type="module">，且导入的 CDN URL 指向的是 Vue 的 ES 模块构建版本。
npm create vue@latest
如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖。
运行项目:
cd <your-project-name>
npm install
npm run dev当你准备将应用发布到生产环境时，请运行：
npm run build# 安装组件
npm install vue-router
# 安装组件(指定版本)
npm install vue-router@4.0.0
npm install vue-router@4.0.0-beta.4
# 卸载组件
npm uninstall vue-router
# 更新组件
npm update vue-router
# 搜索组件
npm search vue-router
# 查看组件信息
npm view vue-router
# 查看组件版本
npm view vue-router versions
# 查看组件依赖
npm view vue-router dependencies
# 查看组件依赖树
npm view vue-router dependencies --json | jq .dependencies