一个vue小demo代码介绍

网友投稿 678 2022-12-02

一个vue小demo代码介绍

上篇文章说道,前段时间忙里偷闲,试了一下vue,搞了个小demo作为练习。原本以为很简单,但实际上耗费时间超出我的想象。如果有客观原因,是vue有自己的私货,另外一个就是缺乏完整的示例,帮助文档搞成手册形式,例子很少,即使有也是支离破碎。再就是所谓免费开源的东西,内容和版本都有点随心所欲,很容易就不被支持,玩似的。

闲话休提。先给出demo的样子。demo很简单,就2个页面,再加一个弹窗,但麻雀虽小,demo里也包含了母版页,部件,路由,以及使用了jquery和国产界面框架layUI。

一、成果

1、首页

3、弹出窗口

二、代码文件结构

三、项目搭建

demo最初的基本结构和代码,我是用vue ui命令来生成的。具体可看这个​​教学视频​​

四、代码介绍

主页面

public/index.html

<%= htmlWebpackPlugin.options.title %>

这个页面是脚手架自动生成的。这里面有些类似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

assets图片是放在 /src/assets/images 下还是放在外面的 /public/images/ ?

这个要看情况。放在assets里,webpack会处理,第一个是文件名会加上哈希值,第二个据说如果图片比较小,内容就会直接被写进页面代码中,这样页面打开时就不用请求了,速度可能会快一点。但如果图片比较大,就还是链接。这个说法我是听别人说的,没能证实。但对于第一点,如果文件名加哈希值,好处是内容更新以后,浏览器没有缓存的问题;但坏处,如果哈希值每次发布都是变的,图片内容又没变的话,那么优点就成为缺点。也许哈希值是不变的,我要了解下。

如果放在public的话,那么就跟以前的方式没啥区别。

五、后记

vue可以让前后端分离真正落地(其他框架也可以做到这一点),而且适合单页应用。单页的话,页面切换,省去了许多请求,用户体验的确是好一些。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:spring框架cacheAnnotation缓存注释声明解析
下一篇:使用CPen类绘制指定直线
相关文章

 发表评论

暂时没有评论,来抢沙发吧~