🎙座右铭：得之坦然，失之淡然。
💎擅长领域：前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
目录
一. 简单汇总一下创建过程和步骤 【这个能解决你的问题】
- 输入命令“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 --save import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus)
四. 添加Vant
yarn add vant --save import 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', // 配置后端接口 URL method: '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项目的全过程。每一步都有很多细节和选项，具体取决于你的项目需求和个人偏好。
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
