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

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

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

目录

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

 二. 添加router的方式

三. 添加Element-plus的方式

四. 添加Vant 

 五. 添加Ant Design Vue

 六. 添加网络请求Axios

 

---

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

1. 输入命令“node -v”查看Node.js环境是否已安装，如果没有安装则需先安装Node.js

2. 输入命令“npm install yarn -g”安装yarn

3. 输入命令“yarn -v”查看yarn是否安装成功

4. 为yarn设置镜像地址：yarn config set registry https://registry.npmmirror.com

5. 验证镜像地址是否设置成功：yarn config get registry

6. 切换目录，在该目录下创建项目：yarn create vite <项目名称>

7. 项目创建完成后，执行如下命令进入项目目录，启动项目：

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 写入

import axios from 'axios';

创建一个Vue项目通常涉及以下几个步骤：

• 安装Node.js和npm/yarn：

• Vue CLI需要Node.js和npm/yarn来运行。确保你的计算机上安装了Node.js和npm/yarn。

• 安装Vue CLI：

• 打开终端或命令提示符，输入以下命令来全局安装Vue CLI：

• 创建Vue项目：

• 使用Vue CLI创建一个新的Vue项目：

• 按照提示选择预设配置，或者自定义配置。

• 进入项目目录：

• 创建项目后，进入项目目录：

• 安装依赖：

• 项目创建后，会自动安装依赖。如果没有，可以运行：

• 运行开发服务器：

• 使用以下命令启动开发服务器，并在浏览器中查看应用：

• 默认情况下，Vue CLI会在`localhost:8080`上启动开发服务器。

• 开发应用：

• 现在你可以开始开发你的Vue应用了。Vue CLI提供了一个热重载服务器，当你修改代码时，浏览器会自动刷新。

• 构建生产版本：

• 当你完成开发并准备部署时，运行以下命令来构建生产版本：

• 构建文件将被输出到`dist/`目录。

• 部署应用：

• 将`dist/`目录中的内容部署到你的服务器或静态文件托管服务。

• 添加路由和状态管理（可选）：

• 如果你的应用需要，你可以添加Vue Router和Vuex来管理路由和状态。

• 使用ESLint和Prettier（可选）：

• 为了保持代码质量和一致性，你可以集成ESLint和Prettier。

• 单元测试和端到端测试（可选）：

• 你可以添加单元测试（使用Jest或Mocha）和端到端测试（使用Cypress或Nightwatch）。

• 持续集成/持续部署（CI/CD）（可选）：

• 设置CI/CD流程，自动化测试和部署。

• 性能优化（可选）：

• 根据需要，你可以进行代码分割、懒加载、服务端渲染（SSR）等性能优化。

• 发布和维护：

• 发布你的应用，并根据用户反馈进行维护和更新。

以上是创建Vue项目的全过程。每一步都有很多细节和选项，具体取决于你的项目需求和个人偏好。

 

---

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

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！