vue3 vite

### Vue3 与 Vite 的集成及使用方法 #### 1. 创建项目 通过 `Vite` 可快速创建一个基于 Vue3 的开发环境。执行以下命令初始化一个新的项目： ```bash npm create vite@latest my-vue-app --template vue cd my-vue-app npm install ``` 安装完成后，可以通过运行 `npm run dev` 启动本地服务器。 --- #### 2. 配置 Less 支持 为了在项目中使用 Less 编写样式，需要安装相应的依赖包并进行配置： ##### 安装依赖 ```bash npm install less less-loader --save-dev ``` ##### 修改 `vite.config.js` 编辑项目的 `vite.config.js` 文件，添加对 Less 的支持： ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], css: { preprocessorOptions: { less: { javascriptEnabled: true, }, }, }, }); ``` 此设置允许在 `.vue` 文件中直接编写 Less 样式[^1]。 --- #### 3. 使用 `vite-plugin-vue-setup-extend` 如果希望在 `<script setup>` 中直接定义组件名称而不需要额外的 TypeScript 或 JavaScript 语法，则可以引入 `vite-plugin-vue-setup-extend` 插件。 ##### 安装插件 ```bash npm install vite-plugin-vue-setup-extend --save-dev ``` ##### 更新 `vite.config.js` 修改 `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(), // 添加插件 ], }); ``` 完成以上步骤后，可以在模板中如下方式定义组件名： ```vue <template> <div>Example Component</div> </template> <script setup name="ExampleComponent"> // 组件逻辑... </script> ``` 这种方式简化了组件命名的过程[^1]。 --- #### 4. 整合 Pinia 状态管理工具 Pinia 是 Vue3 推荐的状态管理库之一，适合替代 Vuex。以下是其基本集成流程： ##### 安装 Pinia ```bash npm install pinia @pinia/vue ``` ##### 初始化 Store 在 `src/stores/counter.js` 文件中定义状态存储： ```javascript import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; }, }, }); ``` ##### 在应用中注册 Pinia 更新入口文件 `main.js` 如下： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import { createPinia } from 'pinia'; const app = createApp(App); app.use(createPinia()); app.mount('#app'); ``` 现在即可在任意组件中访问和操作全局状态[^3]。 --- #### 5. 构建生产环境 当准备部署应用程序时，可利用 Vite 提供的强大构建能力优化资源。运行以下命令生成最终产物： ```bash npm run build ``` 默认情况下，输出目录位于 `dist` 下。还可以进一步扩展配置以满足特定需求，例如代码分割、Tree Shaking 和 CSS 压缩等[^4]。 --- #### 6. Babel 配置（可选） 对于某些旧版浏览器兼容性问题，可能需要用到 Babel 转译器。此时应新增或调整现有的 Babel 设置文件 `babel.config.json`： ```json { "presets": [ ["@babel/preset-env", { "targets": "> 0.25%, not dead" }] ] } ``` 这样能够确保更广泛的设备支持[^5]。 ---