vue基础教程

前置条件

• node.js
• Tauri 前置条件

创建项目模版

Vite项目模板清单

模板创建方式：

• Tauri 创建项目
• create-vue 脚手架
• create-vite 脚手架
• Vant 模板
  • vue3-vant-mobile 文档
• fantastic-admin模板
• Tauri 即时通讯系统模板

初始化Tauri

• Tauri 创建项目
• Vite 配置

Vite启动流程：

相关框架

• sass 安装
  • npm install -D sass
• vue-router 安装
  • pnpm add vue-router@4
• pinia 安装
• vueuse 安装
• axios 安装
• vant 安装
• element-plus 安装
• echarts 安装

按需导入（减少打包体积）：

• unplugin-vue-components: 按需导入 Vue 组件
• unplugin-auto-import: 按需自动导入 Vue3 API
• unplugin-icons: 按需导入图标

性能优化：

• vite-plugin-pwa: 让 Vue 变成 PWA 应用

其他框架：

• tailwindcss
• daisyUI
• vuetify
• bootstrap

创建示例

1. 通过模板创建项目

   npx tiged easy-temps/vue3-vant-mobile demo-vant
   cd demo-vant
   pnpm install
   pnpm dev  # 启动项目
   pnpm build  # 生产构建
   pnpm preview  # 生产预览
   pnpm install element-plus

2. 模板配置选项
   • 根据vue3-vant-mobile 清单调整配置
   • 启动项目并查看vue3-vant-mobile 文档配置
3. 配置element-plus 按需导入
4. Tauri 项目初始化