当前位置: 首页 > news >正文

vue简易项目流程思路简述

\(^o^)/~

1、首先得创建一个vue项目
cnpm install @vue/cli -g
安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
vue create myapp 或 vue ui
或者直接找一个打包好的项目解压即可

2、创建基本结构(抽离页面组件和底部组件)
共同组件例如Footer抽离至comonents中,在views中那个需要在现实的地方加上视图组件即可
在App.vue中删掉页面组件和注册的方法

3、完成基本路由跳转(vue-router)
@vue/cli脚手架在创建项目时,选择了vue-router,所以无需再次安装,但是如果你没有选择,可以使用 cnpm i vue-router -S 安装
在router.js中引入页面并配置路由
eg: import Home from ‘./views/Home.vue’
router: [
{
path: ‘/’,
name: ‘home’,
components: {
default: () => import(’@/views/home/index.vue’),
footer: Footer
}
}
]

4、在App.vue中删掉原先页面头部和底部的区域代码
使用以下代码来代替

5、多注册几个路由,在浏览器地址栏输入地址查看效果(localhost:8080/home或者其他kind等等)

6、将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
创建好项目时会自动生成一个文件 router.js。
如果没有的话,执行以下步骤
cnpm / npm i vue-router -S
创建src/router.js
构建 vue-router 的基本文件结构

7、控制路由的变化,

默认会被渲染为<a></a>,可加一个tag属性来生成目标标签 router-link通过增加一个to属性来指定链接 eg: <router-link to="/" tag="li"></router-link>

8、请求数据,填充页面(axios)
cnpm npm i axios -S
axios.get(“url”).then(res => { console.log(res.data )})

先把首页的基本布局完成,在使用axios请求数据 再把首页请求完的数据传给Prolist.vue export default { data () { return { prolist: [] ]} }) } 用组件间传值的方式进行传值。

9、如果数据是图片,可能会出现图片显示的问题
此时在public/index.html 添加如下代码即可

10、再添加各种效果
例如轮播图、电影评分、产品详情、登录注册、懒加载
上拉加载及下拉刷新、回到顶部
其中可能会涉及到ui库的使用、导航守卫、及状态管理器的应用

http://www.jsqmd.com/news/1280991/

相关文章:

  • 2014-2025年各省市区县分年二氧化氮NO2面板数据
  • JAVA计算机毕设之基于 SpringBoot+Vue 的影像服务数字化预约与档案管理系统 光迹摄影门店线上接单与运维管理系统(完整前后端代码+说明文档+LW,调试定制等)
  • 爬虫经验做AI项目,为什么权限和日志最先失效?
  • MySQL数据库知识
  • 【Vue原理】Render - 源码版 之 静态 Render
  • RSS技术生态解析:从传统到现代的演进与实践
  • 荣耀将阿莱电影工作流融入机器人手机
  • 求k阶斐波那契第m项的值
  • 2026指南:成都净味环保科技有限公司——新房除味道服务品牌机构实力解析 - 卓企推荐
  • NBM7100A与PIC18LF4620在低功耗物联网设备中的应用
  • 物联网设备硬件级安全防护:SE050与PIC18F实战指南
  • 物联网设备安全芯片SE050与TM4C1294集成方案详解
  • 物联网设备硬件安全方案与SE050开发实践
  • 【JAVA课程设计/毕业设计】基于物联网的仓储物资智能化管理系统 基于 SpringBoot+Vue 的智能仓储环境感知与物资调度管理平台【附源码、数据库、万字文档】
  • 从零打造遥控氦气球:浮力、动力与控制的轻量化工程实践
  • TPIC7710EVM评估模块:汽车电子ASIC功能验证与系统集成实战指南
  • 089、YOLOv8改进实战:IoU损失函数演进全解——从GIoU到Shape-IoU的数学本质与代码实现
  • Linux 内核调优选型对比:BBR vs cubic、swappiness 三档策略与大页内存的适用场景
  • 权限和日志失效后,测试工程师如何证明大模型价值?
  • 输出链表倒数节点
  • 兴趣电商内容策略:从算法逻辑到品牌实践
  • 动态规划背包问题
  • Godot引擎集成AI代码生成:加速游戏原型开发实践
  • 超声波焊接机市场格局解析:国际一线品牌与国产技术中坚如何选择? - 品牌推荐大师
  • ABAQUS盾构隧道下穿施工模拟技术与工程实践
  • Hashcat实战:五种方法破解NTLM哈希与掩码规则速查
  • AI降噪工具千笔:专业降低AI生成内容机械感
  • Unity光照Shader实战:从Blinn-Phong原理到URP自定义实现与优化
  • HF Patch:一键解锁《恋活!》200+插件,打造终极游戏体验
  • 职场周报撰写指南:结构、技巧与优化建议