安装vue3 vite

### 如何在 Mac 上安装 Vue.js 和 Vite 构建工具 #### 准备工作 为了顺利安装 Vue.js 和 Vite，在开始之前需确认已安装 Node.js 及 npm 或 yarn。可以通过终端命令 `node -v` 和 `npm -v` 来验证版本。 #### 安装 Vue CLI 工具 通过 npm 全局安装 Vue CLI，这有助于创建新的项目并管理现有项目的依赖项。 ```bash npm install -g @vue/cli ``` #### 创建新项目 利用 Vue CLI 创建一个新的 Vue 项目结构，此过程会引导设置包括选择预设配置等选项。 ```bash vue create my-vue-app ``` 进入刚创建的应用目录： ```bash cd my-vue-app ``` #### 添加 Vite 支持 对于希望采用 Vite 进行构建的新项目来说，可以选择初始化时就选用 Vite 模板；而对于已有项目，则可通过如下方式集成 Vite[^1]。 移除默认的 webpack 配置文件（如果存在），然后安装 vite 插件以及其对应的适配器： ```bash npm uninstall --save-dev vue-cli-service npm install --save-dev vite @vitejs/plugin-vue ``` 编辑 package.json 文件中的脚本部分以适应 Vite 的启动命令： ```json { "scripts": { "dev": "vite", "build": "vite build" } } ``` #### 启动开发服务器 完成上述步骤之后，即可运行下面的命令来启动本地开发服务器： ```bash npm run dev ``` 此时应该能够在浏览器中访问到正在运行的应用程序，默认地址通常是 http://localhost:3000。 #### 使用 VSCode 调试配置 (可选) 为了让调试体验更佳，可以在 `.vscode/launch.json` 中定义适合 Chrome 浏览器的调试配置[^3]: ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "sourceMaps": true, "protocol": "inspector" } ] } ```

### Vite with Vue3 Setup and Usage Vite 是一个现代化的前端构建工具，结合 Vue3 可以快速搭建高效的应用程序。以下是关于使用 Vite 和 Vue3 的详细设置和用法。 #### 1. 创建项目 首先需要安装 Vite 并创建一个新的 Vue3 项目。可以通过以下命令完成： ```bash npm create vite@latest my-vue-app --template vue cd my-vue-app npm install ``` #### 2. 配置 Vite 插件 为了增强开发体验，可以引入一些插件。例如 `vite-plugin-vue-setup-extend` 插件支持在 `<script setup>` 中直接定义组件的 `name` 属性[^1]。 在 `vite.config.js` 文件中添加插件配置： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueSetupExtend from 'vite-plugin-vue-setup-extend' export default defineConfig({ plugins: [ vue(), VueSetupExtend() ] }) ``` #### 3. 使用 Less 样式 如果希望在项目中使用 Less 编写样式，需要安装相关依赖并进行配置。安装 Less 和其 loader： ```bash npm install less less-loader --save-dev ``` 然后可以在 `.vue` 文件中直接使用 `<style lang="less">` 来编写样式[^1]。 #### 4. 集成 UI 框架 对于 UI 框架的选择，可以根据需求选择 Element Plus 或 Naive UI 等。以 Naive UI 为例，可以通过按需加载的方式引入组件，减少打包体积[^3]。 安装 Naive UI 和按需加载插件： ```bash npm install naive-ui npm install unplugin-vue-components -D ``` 在 `vite.config.js` 中配置插件： ```javascript import Components from 'unplugin-vue-components/vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ Components({ resolvers: [NaiveUiResolver()] }) ] }) ``` #### 5. 组件定义与使用 Vue3 的 `<script setup>` 语法简化了组件的定义方式。可以直接在模板中使用组件而无需显式导入[^5]。 示例组件 `HelloWorld.vue`： ```vue <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script setup> defineProps({ msg: String }) </script> <style lang="less"> .hello { color: red; } </style> ``` #### 6. 构建与优化 在生产环境中，可以通过 Rollup 插件进行打包分析，确保资源优化[^3]。在 `vite.config.js` 中添加以下配置： ```javascript import visualizer from 'rollup-plugin-visualizer' export default defineConfig({ build: { rollupOptions: { plugins: [ visualizer({ open: true, gzipSize: true, brotliSize: true }) ] } } }) ``` --- ###