移动iOS开发框架
678
2022-12-02
一个vue小demo代码介绍
上篇文章说道,前段时间忙里偷闲,试了一下vue,搞了个小demo作为练习。原本以为很简单,但实际上耗费时间超出我的想象。如果有客观原因,是vue有自己的私货,另外一个就是缺乏完整的示例,帮助文档搞成手册形式,例子很少,即使有也是支离破碎。再就是所谓免费开源的东西,内容和版本都有点随心所欲,很容易就不被支持,玩似的。
闲话休提。先给出demo的样子。demo很简单,就2个页面,再加一个弹窗,但麻雀虽小,demo里也包含了母版页,部件,路由,以及使用了jquery和国产界面框架layUI。
一、成果
1、首页
3、弹出窗口
二、代码文件结构
三、项目搭建
demo最初的基本结构和代码,我是用vue ui命令来生成的。具体可看这个教学视频
四、代码介绍
主页面
public/index.html
这个页面是脚手架自动生成的。这里面有些类似JSP,ASP的标记“<% %>”,似曾相识,再一次印证了前端开发后端(服务器端)化的感觉。里面的值,大概来自于 /vue.config.js。这个文件也是脚手架生成的。里面的值稍做修改。
// /vue.config.jsmodule.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/',//直接给出一个路径也可以,如:'/res' chainWebpack: config => { config .plugin('html') .tap(args => { args[0].title= '资源索引' return args }) }}
主程序
/src/main.js
import Vue from 'vue'import router from './routes'import notfound from './pages/404.vue'const app = new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, computed: { ViewComponent() { const matchingView = router[this.currentRoute] return matchingView ? () => import('' + matchingView) : notfound } }, render(h) { return h(this.ViewComponent) }})//浏览器直接输入地址处理window.addEventListener('popstate', () => { app.currentRoute = window.location.pathname})
里面的代码,主要与路由有关
路由
/src/routes.js
export default { '/': './pages/Home.vue', '/test': './pages/Test.vue'}
这路由代码超简单。但我在路由上花得时间最多。因为许多例子给的都是vue-router,但我试来试去,页面总是出不来,怀疑是vue-router在我安装的各种包里不被支持。官方文档里好像也没提到这个插件,最后只能放弃了。
路由文件虽然简单,但主要由主文件main.js(见上面的主程序)里加载:
import router from './routes'const app = new Vue({ 。。。 data: { currentRoute: window.location.pathname }, computed: { ViewComponent() { const matchingView = router[this.currentRoute] return matchingView ? () => import('' + matchingView) : //最主要的一句 notfound } }, 。。。})
官方给出的例子中,使用require("...")来加载页面,用-的例子运行的确可以,但移植到我这个项目里,却不行,一模一样的代码。猜测是包的问题。我是用脚手架生成的,代码下来以后,就npm install了,官方这个例子,也许依赖的各种包不一样,所以导致require在我这里就不行,非要import。
官方例子
路由应用,应用了自定义的VLink.vue
模板页
/src/layouts/Main.vue,无非就是放置了一个页头、页脚部件。
子页
/src/pages/Home.vue
简单,应用了模板页,以及使用了部件List.vue
部件1)列表/src/components/List.vue,读取/public/data/里的json文件数据,再显示出来
json文件没什么特别的
[ {"id":"1","url":" {"id":"2","url":" {"id":"3","url":" {"id":"4","url":"/src/components/VLink.vue
7、应用第三方框架layUI layUI是个国产的UI框架,短小精悍,尤其是弹出窗口,可谓经典。怎么与vue结合呢?有人弄了个layui-layer,可以用上layUI的弹窗功能。我开始时直接连接layUI.js,结果系统无法识别layui对象。
npm i -D layui-layer
/public/index.html里引用jquery
vue里使用 /src/components/Footer.vue
... About
assets图片是放在 /src/assets/images 下还是放在外面的 /public/images/ ?
这个要看情况。放在assets里,webpack会处理,第一个是文件名会加上哈希值,第二个据说如果图片比较小,内容就会直接被写进页面代码中,这样页面打开时就不用请求了,速度可能会快一点。但如果图片比较大,就还是链接。这个说法我是听别人说的,没能证实。但对于第一点,如果文件名加哈希值,好处是内容更新以后,浏览器没有缓存的问题;但坏处,如果哈希值每次发布都是变的,图片内容又没变的话,那么优点就成为缺点。也许哈希值是不变的,我要了解下。
如果放在public的话,那么就跟以前的方式没啥区别。
五、后记
vue可以让前后端分离真正落地(其他框架也可以做到这一点),而且适合单页应用。单页的话,页面切换,省去了许多请求,用户体验的确是好一些。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~