【Vue | initial】 创建初始化项目

chuang'jian'chu创建初始化

1. 使用命令创建

官方官网快速上手

npm create vite@latest 

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:

• 询问是否继续 ；请填写项目名

• 是否要添加 ts （typescript）

• 选择其他依赖

• 跳过

• 是否选择示例代码

初始化完成

因此，我们可以采用“架构师视角” 较为自动化的初始化

架构师视角

# 架构师写在公司自动化脚本里的命令，瞬间生成标准项目
 npm create vue@latest my-company-project -- --ts --router --pinia --eslint --prettier

2. 进入创建的目录中，安装依赖（基础依赖）

Once the project is created, follow the instructions to install dependencies and start the dev server:

cd <your-project-name>
npm install
npm run dev

粗心粗心？？？

基础依赖 npm install 是根据这个文件进行执行安装的package.json

You should now have your first Vue project running!

3. 安装“全家桶”依赖

安装“全家桶”依赖 npm install axios element-plus @element-plus/icons-vue

4.安装并配置 Tailwind CSS V4

npm install tailwindcss @tailwindcss/vite

5. 配置 vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),  // register the plugin
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})