当前位置：首页 > news >正文

Vue前端项目构建教程

news 来源：原创 2025/6/1 1:38:36

文章目录

1. 引言
2.环境准备
- 2.1 请自行查找资料安装以下开发工具
- 2.2 安装cnpm
3. 创建Vue3项目
- 3.1 安装依赖
- 3.2 项目结构
4. 配置Vue项目
- 4.1 在项目根目录下添加环境变量文件
- 4.2 添加环境变量
5. 常用插件和工具
总结

1. 引言

本前端项目将使用Vue3 + Vite4构建。

Vue3是目前最流行的前端开发框架之一，vite4是Vue3项目的构建工具，提供了编译、打包、开发用前端服务器和热部署等功能。Vue 的核心库专注于视图层，易于与其他库或现有项目集成。

2.环境准备

2.1 请自行查找资料安装以下开发工具

安装Node.js
安装vscode，并为其安装vue3插件：在vscode扩展中，搜索Vue Langu
age Features (Volar)并安装

2.2 安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

3. 创建Vue3项目

利用以下命令，通过vite在当前目录构建Vue3项目

cnpm create vite@latest <项目名称> -- --template vue

3.1 安装依赖

进入项目目录安装依赖

cnpm i axios vue-router@4 element-plus @element-plus/icons-vue uuid path

3.2 项目结构

my-vue-app/
├── node_modules/       # 项目依赖
├── public/             # 静态资源
├── src/                # 项目源代码
│   ├── assets/         # 图片、字体等资源
│   ├── components/     # 组件
│   ├── views/          # 页面视图
│   ├── App.vue         # 根组件
│   ├── main.js         # 项目入口文件
├── .gitignore          # Git 忽略文件
├── babel.config.js     # Babel 配置
├── package.json        # 项目依赖和脚本
├── README.md           # 项目说明文档
└── vue.config.js       # Vue 项目配置

4. 配置Vue项目

4.1 在项目根目录下添加环境变量文件

在根目录下添加文件.env.development，内容均如下：

VITE_API_BASE_URL=/api
VITE_SERVER_URL=http://localhost:9999
VITE_LOCAL_TOKEN_NAME=X-TOKEN
VITE_HEADER_TOKEN_NAME=WDOA-TOKEN
VITE_LOGIN_URL=false

4.2 添加环境变量

使用提供的vite.config.js（项目根目录下）、router（src目录下）、request（src目录下）、App.vue（src目录下）、constants.js（src目录下）、main.js（src目录下）、style.css（src目录下）覆盖项目中对应的目录或文件

5. 常用插件和工具

src/views/test.vue
测试：

<template>
    <div style="font-size: 50px;color: blueviolet;text-align: center;margin-top: 100px;">这是一个测试</div>
</template>

src/router/route.js 中配置路由：

import component from "element-plus/es/components/tree-select/src/tree-select-option.mjs";

const routes = [
    {
        path:'/test',
        name:'Test',
        name: 'Test',
        component: () => import("@/views/test.vue")
    }
];
export default routes;