Vue3+Vite+Vant+Pina 快速搭建钉钉应用

使用 DingTalk Design CLI 快速搭建 Vue3+Vite+Vant+Pina 钉钉应用

想要快速搭建基于 Vue3+Vite+Vant+Pina 的钉钉应用？本文将带你一步步实现。

准备工作

• 确保已安装 Node.js 和 npm。

步骤

1. 安装 DingTalk Design CLI

   bash npm install -g @dingtalk/design-cli

2. 创建项目

   bash mkdir my-dingtalk-project cd my-dingtalk-project design init

   在选择模板时，选择 'Vue3'，并按照提示操作完成项目初始化。

3. 安装依赖

   bash npm install vant@next pina

   这将安装 Vant UI 库最新版本和 Pina 状态管理库。

4. 创建 Vite 配置文件

   在项目根目录下创建 vite.config.js 文件，并添加以下内容：

   
   export default defineConfig({     plugins: [vue()],   })   ```
   
   

5. 配置 main.js

   修改 main.js 文件，添加 Vant 和 Pina 的导入及 Vue 配置：

   
   const app = createApp(App)   app.use(router)   app.use(store)   app.use(vant)   app.use(pina)   app.mount('#app')   ```
   
   

6. 启动开发服务器

   bash npm run dev

   这将在本地启动开发服务器，并在浏览器中打开你的项目。

恭喜！ 你已成功使用 DingTalk Design CLI 创建了一个包含 Vue3、Vite、Vant 和 Pina 的钉钉应用。接下来，你可以根据你的需求进行开发和定制。