成都企业如何建网站,4秒网站建设,网站资源整合与建设,弹幕网站是怎么做的#x1f399;座右铭#xff1a;得之坦然#xff0c;失之淡然。
#x1f48e;擅长领域#xff1a;前端
是的#xff0c;我需要您的#xff1a;
#x1f9e1;点赞❤️关注#x1f499;收藏#x1f49b;
是我持续下去的动力#xff01;
目录
一. 简单汇总一下创建…座右铭得之坦然失之淡然。
擅长领域前端
是的我需要您的
点赞❤️关注收藏
是我持续下去的动力
目录
一. 简单汇总一下创建过程和步骤 【这个能解决你的问题】 二. 添加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-router4 --save
import router from ./router.jsapp.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-plus2.2.19 --saveimport ElementPlus from element-plus
import element-plus/dist/index.cssapp.use(ElementPlus)
四. 添加Vant
yarn add vant --saveimport Vant from vant
import vant/lib/index.cssapp.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.cssapp.use(AntDesignVue) 六. 添加网络请求Axios
yarn add axios1.2.1 --save
在src创建axios\request.js import axios from axiosconst 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项目的全过程。每一步都有很多细节和选项具体取决于你的项目需求和个人偏好。 座右铭得之坦然失之淡然。
擅长领域前端
是的我需要您的
点赞❤️关注收藏
是我持续下去的动力
