零基础入门：搭建 vue3 + webpack5 + element-plus 开发环境，构建你的第一个实战项目

使用 Vue.js 3 + Webpack 5 + Element Plus 搭建项目模板

项目准备

• Node.js ：>= 14
• npm ：>= 7
• 代码编辑器或 IDE ：推荐 Visual Studio Code

项目结构

├── node_modules
├── package.json
├── src
│   ├── App.vue
│   ├── index.js
│   ├── main.js
│   ├── router
│   │   ├── index.js
│   │   └── routes.js
│   └── views
│       ├── About.vue
│       ├── Home.vue
│       └── NotFound.vue
├── public
│   ├── index.html
│   ├── favicon.ico
├── .gitignore
└── webpack.config.js

安装依赖项

npm install vue@next webpack webpack-cli webpack-dev-server @vue/cli-plugin-babel @vue/cli-service -D
npm install element-plus@next

配置项目

package.json

{
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack"
  }
}

运行项目

npm run dev

结语

恭喜你，你已经创建了一个 Vue.js 3 + Webpack 5 + Element Plus 项目模板。这个模板可以作为你未来项目的基石，帮助你快速构建复杂的前端应用。现在，让我们更深入地探讨一下这个模板。

常见问题解答

1. 如何在项目中使用 Element Plus 组件？

在 src/main.js 中导入 Element Plus：

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

Vue.use(ElementPlus);

2. 如何使用路由？

在 src/router/index.js 中定义路由：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/*',
    component: NotFound
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. 如何添加自定义 CSS 或 JavaScript？

在 src/index.js 中引入 CSS 或 JavaScript 文件：

import './main.css';
import 'my-custom-script.js';

4. 如何部署项目？

使用 npm run build 构建项目，然后将 dist 文件夹部署到你的服务器上。

5. 如何获取帮助？

请访问 Vue.js 和 Webpack 的文档，或在社区论坛上寻求帮助。