如何快速搭建一个Vue3前端项目

目录

一．创建项目

1.打开目标文件夹，输入cmd打开命令行并输入npm init vite 用于创建vite工具以及创建一个vue3项目

2.将路径选择到项目文件下（cd test_project），并输入npm install来下载vue框架

3.安装router:在命令行输入yarn add vue-router -S来下载router的生产版本

4.在src文件夹下再创建一个router文件夹，并在router文件夹下创建一个index.js文件用于设置路由属性，index.js里面的代码结构如下：

5.并在vite.config.js文件下设置路径名称处理，代码如下：

6.同时还要在入口文件main.js中注册router

7.下载安装elementPlus步骤

7.1在项目文件中命令行输入npm install element-plus --save

7.2 在命令行中输入npm install -D unplugin-vue-components unplugin-auto-import 来安装自动导入工具

7.3在vite.config.js文件下插入以下代码：（官网）

二、各个部分划分

1.创建views文件夹，并在里面存放各个组件

2.定义路由

三、小结

---

一．创建项目

1.打开目标文件夹，输入cmd打开命令行并输入npm init vite 用于创建vite工具以及创建一个vue3项目

2.将路径选择到项目文件下（cd test_project），并输入npm install来下载vue框架

3.安装router:在命令行输入yarn add vue-router -S来下载router的生产版本

4.在src文件夹下再创建一个router文件夹，并在router文件夹下创建一个index.js文件用于设置路由属性，index.js里面的代码结构如下：

5.并在vite.config.js文件下设置路径名称处理，代码如下：

6.同时还要在入口文件main.js中注册router

7.下载安装elementPlus步骤

7.1在项目文件中命令行输入npm install element-plus --save

7.2 在命令行中输入npm install -D unplugin-vue-components unplugin-auto-import 来安装自动导入工具

7.3在vite.config.js文件下插入以下代码：（官网）

二、各个部分划分

1.创建views文件夹，并在里面存放各个组件

整体结构如下：每个部分下面都有一个index.vue

2.定义路由

在router里面的index.js来定义路由

同时要在app中去使用routerview标签（不然地址怎么变都没用）

三、小结

该文章主要面向刚入门前端的小伙伴快速搭建一个Vue3前端项目，分享不易，还请点赞收藏支持一下谢谢！