初始化 Vue 项目

[zhnoah]

初始化 Vue 项目

创建项目

1. 利用 create-vue(vite) 创建项目

npm create vue@latest

2. 更改 npm 源

创建 .npmrc 更改 npm 源加速包的安装

3. 安装依赖

yarn install

4. 启动项目

yarn dev

添加 TailwindCSS

1. 添加依赖

yarn add -D tailwindcss autoprefixer

2. 初始化

npx tailwindcss init -p

Note: 如果使用 shadcn-vue 则后续步骤可省略

3. 更新配置

file: tailwind.config.js

content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
],

4. 添加引用

file: assets/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

添加 shadcn-vue

1. 初始化

npx shadcn-vue@latest init

Note: 如果出现 node:internal/modules/esm/resolve:207 错误，则执行以下命令

npm i shadcn-vue@latest --no-package-lock

2. 添加组件

npx shadcn-vue@latest add

3. 引用组件

import { Button } from '@/components/ui/button'

优化开发环境

1. 推荐 vscode 安装 tailwindcss 插件

file: .vscode/extensions.json

bradlc.vscode-tailwindcss

3. 自动 tailwindcss class 排序

安装依赖

yarn add -D prettier-plugin-tailwindcss

添加配置

file: .prettierrc.json

"plugins": ["prettier-plugin-tailwindcss"]

Note: 如果无效注意检查系统级的格式化设置