使用Vite创建项目
使用Vite创建项目，项目并不像Vue CLI创建的项目那样，可以选择Router、Vuex等，而是直接创建一个空项目，然后再根据需要安装依赖。
安装pnpm (可选) 创建vite项目
pnpm 是一个快速、高效的包管理器，它可以在一个项目中安装多个版本的相同包。它还可以在一个项目中安装多个不同版本的相同包。
npm install -g pnpm
pnpm create vite
选择Vue和TypeScript
? Project name: Demo
? Select a framework: vue
? Select a variant: vue-ts
安装依赖启动项目
cd Demo
pnpm install
pnpm dev
添加tsx支持
pnpm add -D @vitejs/plugin-vue-jsx
- 在
vite.config.ts中plugins.plugins添加vueJsx()。
添加router
pnpm add vue-router
- 在
src目录下创建router目录，创建index.ts文件。
import { createRouter, createWebHistory } from 'vue-router'
const routes = []
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
- 在
main.ts中引入router并使用。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
- 在
App.vue中使用<router-view />。 - 添加别名
@指向src目录。
// vite.config.ts
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': '/src',
},
},
})
- tsconfig.json中添加
"baseUrl": "."和`"paths": { "@/": ["src/"] }
添加pinia
pnpm add pinia
- 在
src目录下创建store目录，创建index.ts文件。
import { createPinia } from 'pinia'
export const pinia = createPinia()
- 在
main.ts中引入pinia并使用。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { pinia } from './store'
createApp(App).use(router).use(pinia).mount('#app')
添加tailwindcss
pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest
- 初始化tailwindcss配置文件。
pnpm tailwindcss init -p
VSCode安装插件Tailwind CSS IntelliSense。
- 在
tailwind.config.js中添加purge。
// tailwind.config.js
module.exports = {
purge: ['./src/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
- 在
index.css中引入tailwindcss。
@tailwind base;
@tailwind components;
@tailwind utilities;
Unknown at rule @tailwind解決方式
VSCode安装插件PostCSS Language Support。
- 全局引入tailwindcss
// main.ts
import './index.css'
