创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

一. 简单汇总一下创建过程和步骤【这个能解决你的问题】

二. 添加router的方式

三. 添加Element-plus的方式

四. 添加Vant

五. 添加Ant Design Vue

六. 添加网络请求Axios

一. 简单汇总一下创建过程和步骤【这个能解决你的问题】

输入命令“node -v”查看Node.js环境是否已安装，如果没有安装则需先安装Node.js
输入命令“npm install yarn -g”安装yarn
输入命令“yarn -v”查看yarn是否安装成功
为yarn设置镜像地址：yarn config set registry https://registry.npmmirror.com
验证镜像地址是否设置成功：yarn config get registry
切换目录，在该目录下创建项目：yarn create vite <项目名称>
项目创建完成后，执行如下命令进入项目目录，启动项目：

cd vue-demo

yarn

yarn dev

8. 项目启动后，可以使用URL地址http://127.0.0.1:5173/进行访问。

二. 添加router的方式

yarn add vue-router@4 --save

import router from './router.js'app.use(router)

在src中创建一个router.js

src\router.js

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({history: createWebHashHistory(),//#的形式routes: [{path:'/',redirect:'/Login'},//重定向{path:'/Login',name:'Login',component:()=>import('./components/Login2.vue'),meta:{title:'登录界面'}},{path:'/MainPage',name:'MainPage',component:()=>import('./components/MainPage.vue'),meta:{isAuth:true,title:'果蔬系统'},//子路由children:[{path:'/',redirect:'/GoodsTable'},{path:'WorkInfo',name:'WorkInfo',component:()=>import('./pages/WorkInfo.vue')},{path:'WorkNew',name:'WorkNew',component:()=>import('./pages/WorkNew.vue'),meta:{title:'新闻推文'},children:[{path:'WorkNewDetail/:newid/:newtitle/:newcontent?/:img1?/:img2?/:img3?/:img4?',props:true,name:'WorkNewDetail',component:()=>import('./components/WorkNewDetail.vue')}//传递占位符，？代表可以不用传，没有？的一定要传（:/传递名称）]},{path:'WorkBusiness',name:'WorkBusiness',component:()=>import('./pages/WorkBusiness.vue')},{path:'AboutMe',name:'AboutMe',component:()=>import('./pages/AboutMe.vue')},{path:'Addus',name:'Addus',component:()=>import('./pages/Addus.vue')},{path:'GroupNumber',name:'GroupNumber',component:()=>import('./pages/GroupNumber.vue')},{path:'OtherLink',name:'OtherLink',component:()=>import('./pages/OtherLink.vue'),meta:{title:'供应商管理'}},{path:'MainChild',name:'MainChild',component:()=>import('./pages/MainChild.vue')},{path:'GoodsTable',name:'GoodsTable',component:()=>import('./pages/GoodsTable.vue'),meta:{title:'商品列表'}},{path:'Togoodsstore',name:'Togoodsstore',component:()=>import('./pages/Togoodsstore.vue'),meta:{title:'商品入库'}},{path:'NowUser',name:'NowUser',component:()=>import('./pages/NowUser.vue'),meta:{title:'个人用户'}},{path:'mainPage',name:'mainPage',component:()=>import('./pages/mainPage.vue'),meta:{title:'首页'}},]//mete自定义的属性},]
})//后置路由守卫
router.afterEach((to,from,next)=>{document.title = to.meta.title//改变网页名称
})export default router

三. 添加Element-plus的方式

yarn add element-plus@2.2.19 --saveimport ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'app.use(ElementPlus)

四. 添加Vant

yarn add vant --saveimport Vant from 'vant'
import 'vant/lib/index.css'app.use(Vant)

五. 添加Ant Design Vue

yarn add ant-design-vue --save在main.js中import AntDesignVue from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'app.use(AntDesignVue)

六. 添加网络请求Axios

yarn add axios@1.2.1 --save

在src创建axios\request.js

import axios from 'axios'const request = axios.create({timeout: 2000, // 请求超时时间
})
export default request

要使用请求是在使用的组件导入

import request from '../axios/request.js'

使用方法

 request({url: '/mock/getGoodsList',method: 'get',}).then((res) => {// gdata.value = res.data.data 从json获取到数据gdata.value = store.state.GoodsList // 从vuex的GoodList获取数据（在本地电脑实现了持久化） console.log('++++++++++++++')console.log(gdata.value);// store.commit('setGoodsList', gdata.value)}).catch((err) => {console.log(err);})request({url: '/mock/updateGoods', // 配置后端接口 URLmethod: 'post', // 假设是 POST 请求，根据实际情况配置data: rowindex, // 发送需要更新的商品信息}).then((res) => {console.log('商品属性更新成功', res);if (res.data.code == 200) {ElMessageBox.alert('商品属性更新成功', '提示', {confirmButtonText: '确定',})} else {ElMessageBox.alert('商品属性更新失败', '提示', {confirmButtonText: '确定',})}request({url: '/mock/deleteGoods', // 配置后端接口 URL，假设使用 RESTful 风格的接口method: 'delete', // 假设是 DELETE 请求，根据实际情况配置data: id}).then((res) => {console.log('商品删除成功', res);if (res.data.code == 200) {ElMessageBox.alert('商品属性删除成功', '提示', {confirmButtonText: '确定',})} else {ElMessageBox.alert('商品属性删除失败', '提示', {confirmButtonText: '确定',})}

在main.js 写入