很多时候搭建好了环境,但是不知道怎么入手去开发。
下面我们通过简单案例说明如何快速入门开发模块:
例1:开发helloworld模块
搭建好环境,新建项目以后,进入项目所在文件夹,依次进入src/components,这里存放我们页面模板,进入src/router,编辑index.js,找到path: ‘/’, 这里是路径也就是url访问的显示,当前默认的是根目录,也就是首页访问才会出现helloworld模块的内容,将path改为path: ‘/HelloWorld’,通过url访问http://www.xiangmu.com:8082/#/helloworld,出现了我们想要的结果。如图1:
图2 helloworld 效果图
开发步骤:
1)导入 import HelloWorld from ‘@/components/HelloWorld’
2)注册
注意首字母大写,驼峰法命名;
例2:新闻列表
图2 文章列表效果图
News.vue代码:
编辑src/router/index.js
path和name是否首字母大写没有关系,完全可以直接复制粘贴News,这样就不必改变首字母大写了。
在文章列表点击需要传递ID编号到详情页,
router-link用法:
如何传递多个参数呢?
query: {id: item.id, catid: cat}
详情页获取参数:this.$route.query.id
图3 文章详情页效果图
如何去掉router-link下划线:
直接设置a css样式 a{text-decoration:none}
如何使用公共的头部和底部文件:
打开src下app.vue
template内添加 <Footer></Footer><Header></Header>,然后下边import导入,components注册,components文件夹内新建header.vue,footer.vue。
头部代码:
图4 demo首页
tp6用来写接口(用于和html页面的交互):
返回文章列表示例:
使用域名重定向:
打开项目内config>index.js。vue默认的网址是localhost,端口是8080,我们可以改变为自己好记的网址,例如:www.xiangmu.com,打开C:WindowsSystem32driversetchosts,结尾处添加127.0.0.1 www.xiangmu.com,这样我们就可以使用网址加端口访问我们的vue网站,端口号在我们运行项目的时候会提示项目的访问网址。
这里说一个小技巧:直接打开项目所在文件夹,在地址栏点击直接输入cmd,相比运行,打开cmd,然后cd进入目录会方便点。
基本的规范
很多的警告,并不影响我们使用,但是也不建议忽视,只有严格按照要求来写代码,才能使我们的程序更加规范。
很多的时候都是出现了应该有空格,我们没有加上,按照提示加上空格就可以,越是按照要求写代码,我们的代码就会越规范。
微信号:sansui663(长安复制)
本文由知识库于2021-12-20发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/18617.html
上一篇led显示屏控制软件有哪些(led显示屏控制软件大全)
下一篇网络组建与维护(互联网基础知识入门)
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台