使用Vite创建Vue 3项目： 1）创建项目：名称为myapp（可自拟） 2）安装依赖：npm install 3）项目启动：npm run dev，查看项目运行效果 4）查看生成的项目结构

### 选项式API & 组合式API #### 1. 创建项目 - 使用 Vite 创建一个 Vue 3 项目（假设已在前面的实验中创建，项目名为 `myapp`）。 #### 2. 选项式API - **文件**: `src/components/OptionAPI.vue` **代码示例**: ```vue <template> <div> <p>当前计数: {{ count }}</p> <button @click="increment">点击增加</button> </div> </template> <script> export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } } }; </script> <style scoped> /* 添加一些样式 */ </style> ``` #### 3. 组合式API - **文件**: `src/components/CompositionAPI.vue` **代码示例**: ```vue <template> <div> <p>当前计数: {{ count }}</p> <button @click="increment">点击增加</button> </div> </template> <script setup> import { ref } from 'vue'; const count = ref(0); function increment() { count.value++; } </script> <style scoped> /* 添加一些样式 */ </style> ``` #### 注册组件并使用 - 在 `src/main.js` 中注册这两个组件，并在 `src/App.vue` 中使用它们。 **`src/main.js`**: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import OptionAPI from './components/OptionAPI.vue'; import CompositionAPI from './components/CompositionAPI.vue'; createApp(App) .component('OptionAPI', OptionAPI) .component('CompositionAPI', CompositionAPI) .mount('#app'); ``` **`src/App.vue`**: ```vue <template> <div id="app"> <h1>选项式API与组合式API示例</h1> <OptionAPI /> <CompositionAPI /> </div> </template> <script> export default { name: 'App' }; </script> <style> /* 添加一些全局样式 */ </style> ``` #### 运行项目 - 启动项目：`npm run dev` - 查看页面效果，确保两个组件都能正常显示并实现按钮点击自加的功能。 通过以上步骤，你可以成功地在 Vue 3 项目中实现选项式API和组合式API的按钮点击自加功能。

你可以按照以下步骤使用 Rollup 打包 Vue 3 Vite 项目： 1. 首先，确保你已经安装了 Rollup 和相关的插件。可以使用以下命令进行安装： ```shell npm install --save-dev rollup rollup-plugin-vue@next rollup-plugin-terser ``` 2. 在项目根目录下创建一个 `rollup.config.js` 文件。 3. 在 `rollup.config.js` 文件中，导入必要的插件和模块： ```javascript import { defineConfig } from 'rollup'; import vue from 'rollup-plugin-vue'; import { terser } from 'rollup-plugin-terser'; ``` 4. 定义 Rollup 配置： ```javascript export default defineConfig({ input: 'src/main.js', // 入口文件路径 output: { file: 'dist/bundle.js', // 输出文件路径 format: 'iife', // 输出模块格式 name: 'MyApp', // 全局变量名称（可选） }, plugins: [ vue(), // 处理 .vue 单文件组件 terser(), // 压缩代码（可选） ], }); ``` 这里的 `input` 配置应该指向你项目中的入口文件，一般是 `main.js` 或者 `index.js`。`output` 配置指定了打包后的输出文件路径和格式，这里使用了立即执行函数（IIFE）格式，你可以根据需要选择其他格式。`name` 可选，它指定了全局变量名称，如果你希望在浏览器中直接引入打包后的文件，可以设置该值。 5. 在项目的 `package.json` 文件中添加一个脚本命令以运行 Rollup： ```json { "scripts": { "build": "rollup -c" } } ``` 6. 运行以下命令进行打包： ```shell npm run build ``` 打包完成后，你将在 `dist` 目录下找到打包后的文件。 这样，你就可以使用 Rollup 打包 Vue 3 Vite 项目了。如果需要更详细的配置，可以参考 Rollup 和相关插件的文档。