新建Vue3项目流程（推荐使用Visual Studio (VS) ）

​一、环境准备​​

创建Vue3项目前，需确保系统安装以下工具：

• •

  ​​Node.js​​：建议使用LTS版本（≥18.3），可通过node -v命令检查是否安装成功；

• •

  ​​包管理工具​​：推荐使用npm（Node.js自带）​

二、使用Vite创建项目​​

Vite是Vue3官方推荐的现代构建工具，采用原生ES模块，启动速度极快（几乎无需等待），适合快速迭代的中型/小型项目。

​​1、创建项目​​

运行以下命令，替换my-vue3-project为你的项目名称： 

npm create vite@latest my-vue3-project

​​2、进入项目并安装依赖

cd my-vue3-project
npm install

3、启动开发服务器​

npm run dev
或
npm run serve

三、后续步骤（可选）​​

项目创建后，可根据需求添加以下功能：

• 
  

  ​​路由​​：安装vue-router@4（Vue3专用版本），配置路由文件（如src/router/index.js），并在main.js中引入；

• 
  

  ​​状态管理​​：推荐使用Pinia（Vue3官方推荐的状态管理库），安装pinia并配置；

• 
  

  ​​UI组件库​​：如Element Plus（桌面端）、Vant（移动端），通过npm install安装并全局注册；

• 
  

  ​​代码规范​​：安装ESLint（代码检查）、Prettier（代码格式化），配置.eslintrc.js和.prettierrc文件。

以上步骤覆盖了Vue3项目创建的核心流程，可根据项目规模和团队习惯选择合适的工具。新手建议从Vite开始，体验更快的开发速度；复杂项目可选择Vue CLI，享受更完善的配置支持

四、Vue3 + Element Plus 组件库集成与使用指南

1、Element Plus 简介：Element Plus 是基于 Vue 3 的桌面端 UI 组件库；https://element-plus.org/zh-CN

2、安装 Element Plus：Element Plus 依赖 Vue 3，需确保项目已安装 Vue 3

npm install element-plus --save

3、配置与引入

A: 全局引入：在 main.js（或 main.ts）中全局注册 Element Plus，无需手动导入组件

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // 必须导入样式

const app = createApp(App);
app.use(ElementPlus); // 全局注册
app.mount('#app');

B:按需引入（优化打包体积），对于大型项目，建议使用按需引入减少打包体积。需安装 unplugin-vue-components 和 unplugin-auto-import 插件：

npm install -D unplugin-vue-components unplugin-auto-import

　　修改 vite.config.js（Vite 项目）：

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';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()], // 自动导入组件
    }),
    Components({
      resolvers: [ElementPlusResolver()], // 自动注册组件
    }),
  ],
});

　　配置完成后，可直接在组件中使用 el-button、el-table 等组件，无需手动导入。

4、常用组件示例

　　A. 按钮组件

<template>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</template>

通过 type 属性设置按钮类型，支持 primary、success、warning、danger 等。

　　B. 表格组件

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column label="操作">
      <el-button type="primary" size="small">编辑</el-button>
      <el-button type="danger" size="small">删除</el-button>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  { name: '张三', age: 25, address: '北京市朝阳区' },
  { name: '李四', age: 30, address: '上海市浦东新区' },
]);
</script>

:data 绑定表格数据，el-table-column 定义列属性（prop 对应数据字段，label 为列名）。

　　C. 表单组件

<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({ username: '', password: '' });

const submitForm = () => {
  console.log('提交数据:', form.value);
};

const resetForm = () => {
  form.value = { username: '', password: '' };
};
</script>

:model 绑定表单数据对象，el-form-item 定义表单项，el-input 实现输入框。

五、主题定制

Element Plus 支持通过 SCSS 变量定制主题，步骤如下：

　　1. 创建变量文件

在 src/styles 下创建 element.scss，覆盖默认变量：

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #409eff, // 修改主色调
    ),
  )
);

　　2. 修改 Vite 配置

在 vite.config.js 中引入自定义变量文件：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element.scss" as *;`,
      },
    },
  },
});

配置完成后，重新启动项目即可生效。

六、注意事项

1. 版本兼容性：确保 Element Plus 版本与 Vue 3 版本匹配（如 Element Plus 2.x 适配 Vue 3.2+）。
2. 样式导入：全局引入时必须导入 element-plus/dist/index.css，否则组件样式不生效。
3. 图标使用：Element Plus 使用 SVG 图标，需安装 @element-plus/icons-vue 包：

   npm install @element-plus/icons-vue

   使用时直接引入组件：

   <template>
     <el-icon><Edit /></el-icon>
   </template>
   
   <script setup>
   import { Edit } from '@element-plus/icons-vue';
   </script>

   按需引入优化：大型项目务必使用按需引入，可将打包体积减少 50% 以上。