Vue3 从0到1搭建前端基础框架 - 01_vue3从0-1搭建项目步骤-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44749275/article/details/138137362

本文详细介绍了如何使用Vue3和vite框架创建项目，包括配置TypeScript、JSX、VueRouter、Pinia状态管理，引入ElementPlus库，处理SVG图标和SCSS样式，以及遵循ESLint、Prettier和Stylelint的代码规范，同时涉及环境变量的配置和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建一个 Vue 应用

1.基于 vite 创建具体操作如下（点击查看[官方文档])

## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3-test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  Yes
## 是否添加pinia环境
√ Add Pinia for state management?  Yes
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  Yes

然后创建了一个基础文件
在这里插入图片描述
浏览器访问 localhost:5173 预览

二、Element Plus 引入

1.执行 npm install element-plus --save [（点击查看[官方文档])]

自动导入

 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
`npm install -D unplugin-vue-components unplugin-auto-import`    
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

vite.config.ts - 自动导入配置

先创建好 /src/types 目录用于存放自动导入函数和组件的TS类型声明文件，再进行自动导入配置
// vite.config.ts

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

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [
    vue(),
    AutoImport({
   
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      resolvers: [ElementPlusResolver()],
      eslintrc: {
   
        enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false
        filepath: './.eslintrc-auto-import.json' // 指定自动导入函数 eslint 规则的文件
      },
      dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts')