蓝色科技企业网站模板免费下载企业网站页面设计
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
目录
一. 简单汇总一下创建过程和步骤 【这个能解决你的问题】
二. 添加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 --saveimport 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项目的全过程。每一步都有很多细节和选项，具体取决于你的项目需求和个人偏好。
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！