从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架

以下是搭建一个使用Vue 3、Typescript、Pinia、Vite、Tailwind CSS和Element Plus的项目的步骤：

1. 确保你已经安装了Node.js和npm。

2. 安装或升级Vue CLI到最新版本：

   
   
   
   npm install -g @vue/cli

3. 创建一个新的Vue 3项目：

   
   
   
   vue create my-vue3-project

   在提示选择预设时，选择“Manually select features”。然后选择“TypeScript”、“Progressive Web App (PWA) Support”、“Vue Router”、“Vuex”和“CSS Pre-processors”（确保选择Tailwind CSS）。

4. 安装Pinia：

   
   
   
   cd my-vue3-project
   vue add pinia

5. 集成Vite：

   
   
   
   npm uninstall vue-cli-service
   npm install vite

   修改package.json中的scripts部分：

   "scripts": {
     "serve": "vite",
     "build": "vite build",
     "lint": "vue-tsc --noEmit && eslint --ext .js,.vue,.ts,.tsx --fix"
   }

   JSON

   Copy

6. 安装Tailwind CSS：

   
   
   
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

   修改tailwind.config.js以包含正确的路径。

7. 安装Element Plus：

   
   
   
   npm install element-plus

8. 在main.ts中引入Element Plus和Tailwind CSS：

   import { createApp } from 'vue'
   import App from './App.vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import './styles/tailwind.css'
   
   const app = createApp(App)
   app.use(ElementPlus)
   app.mount('#app')

   JavaScript

   Copy

9. 运行项目：

   
   
   
   npm run serve

这样，你就拥有了一个基于Vue 3、使用Typescript、Pinia、Vite、Tailwind CSS和Element Plus的开发脚本。