一个vue小demo代码介绍

左直拳 2020-11-13 11:12:49
代码 vue demo 介绍 一个


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

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

一、成果

1、首页
在这里插入图片描述
底部点击【Test】出次页,点击【About】弹出关于。

2、次页
在这里插入图片描述
3、弹出窗口
在这里插入图片描述

二、代码文件结构

在这里插入图片描述

三、项目搭建

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

四、代码介绍

  1. 主页面

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 加载jquery -->
<script type="text/javascript" src="./lib/jquery-1.11.1.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
</body>
</html>

这个页面是脚手架自动生成的。这里面有些类似JSP,ASP的标记“<% %>”,似曾相识,再一次印证了前端开发后端(服务器端)化的感觉。里面的值,大概来自于 /vue.config.js。这个文件也是脚手架生成的。里面的值稍做修改。

// /vue.config.js
module.exports = {

publicPath: process.env.NODE_ENV === 'production' ? './' : '/',//直接给出一个路径也可以,如:'/res'
chainWebpack: config => {

config
.plugin('html')
.tap(args => {

args[0].title= '资源索引'
return args
})
}
}
  1. 主程序

/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
})

里面的代码,主要与路由有关

  1. 路由

/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

<template>
<div class="hlink" id="flink">
<span>
<v-link href="/">Home</v-link>
</span>
<span>
<v-link href="/test">Test</v-link>
</span>
<span id="about" @click="about"><u>About</u></span>
</div>
</template>
<script>
import VLink from '../components/VLink.vue'
export default {

components: {

VLink
},
mounted() {
},
methods: {

about() {

...
}
}
}
</script>
<style>
。。。
</style>
  1. 模板页

/src/layouts/Main.vue,无非就是放置了一个页头、页脚部件。

<template>
<div>
<div>
<Header></Header>
</div>
<div>
<slot></slot>
</div>
<div>
<Footer></Footer>
</div>
</div>
</template>
<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default {

components: {

Header,
Footer
}
}
</script>
<style>
...
</style>
  1. 子页

/src/pages/Home.vue

<template>
<main-layout>
<list></list>
</main-layout>
</template>
<script>
import MainLayout from '../layouts/Main.vue'
import List from '../components/List.vue'
export default {

components: {

MainLayout,
List,
}
}
</script>
<style>
</style>

简单,应用了模板页,以及使用了部件List.vue

  1. 部件
    1)列表
    /src/components/List.vue,读取/public/data/里的json文件数据,再显示出来
<template>
<div class="box">
<div class="left">
<ALink v-for="item in projects" :key="item.id" :href="item.url" :title="item.title"
:note="item.note" :note2="item.note2"></ALink>
</div>
<div class="right">
<ALink v-for="item in apps" :key="item.id" :href="item.url" :title="item.title"
:note="item.note" :note2="item.note2"></ALink>
</div>
</div>
</template>
<script>
import ALink from './Link.vue';
import axios from "axios";
export default {

name: 'AppList',
components: {

ALink
},
data() {

return {

projects: [],
apps:[]
}
},
mounted() {

this.getProjects();
this.getApps();
},
methods: {

getProjects() {

axios.get('./data/projects.json').then(response => {

this.projects = response.data;
})
.catch(error => console.log(error));
},
getApps() {

axios.get('./data/apps.json').then(response => {

this.apps = response.data;
})
.catch(error => console.log(error));
}
}
};
</script>
<style>
...
</style>

json文件没什么特别的

[
{
"id":"1","url":"http://192.168.0.22:9999/","title":"共享文档"},
{
"id":"2","url":"http://192.168.0.60/","title":"禅道"},
{
"id":"3","url":"http://192.168.0.205:6080/arcgis/rest/services/","title":"205地图服务"},
{
"id":"4","url":"http://192.168.0.22:6080/arcgis/rest/services/","title":"22地图服务"}
]

2)与路由相关的链接部件
/src/components/VLink.vue

<template>
<a v-bind:href="href" v-bind:class="{ active: isActive }" v-on:click="go">
<slot></slot>
</a>
</template>
<script>
import routes from '../routes'
export default {

props: {

href: {

type: String,
required: true
}
},
computed: {

isActive() {

return this.href === this.$root.currentRoute
}
},
methods: {

go(event) {

event.preventDefault()
this.$root.currentRoute = this.href
window.history.pushState(
null,
routes[this.href],
this.href
)
}
}
}
</script>
<style scoped>
.active {

...
}
</style>

7、应用第三方框架layUI
layUI是个国产的UI框架,短小精悍,尤其是弹出窗口,可谓经典。怎么与vue结合呢?有人弄了个layui-layer,可以用上layUI的弹窗功能。我开始时直接连接layUI.js,结果系统无法识别layui对象。

npm i -D layui-layer

/public/index.html里引用jquery

<script type="text/javascript" src="./lib/jquery-1.11.1.min.js"></script>

vue里使用
/src/components/Footer.vue

<template>
<div class="hlink" id="flink">
...
<span id="about" @click="about"><u>About</u></span>
</div>
</template>
<script>
import layer from 'layui-layer'
import pack from '../../package.json'
export default {

data(){

return {

publicPath:process.env.BASE_URL
}
},
mounted() {
},
methods: {

about() {

let version = pack.dependencies.vue;//vue版本号
let content = `<div style='text-align:center;'>
<div><img src='` + this.publicPath + `images/vue.png' /></div>
<div class='ver'><span>Vue version:</span><span>` + version + `</span></div>
</div>`;//路径比较麻烦
layer.open({

type: 1,
skin:'layui-layer-molv',
title: '关于',
maxmin: false,
shade: 0.75,
id: 'lay_about',
moveType: 1,
area: ['450px', '350px'],
btn: ['确定'],
btnAlign: 'c',
content: content
});
}
}
}
</script>
<style>
...
</style>
  1. assets
    图片是放在 /src/assets/images 下还是放在外面的 /public/images/ ?

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

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

五、后记

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

版权声明
本文为[左直拳]所创,转载请带上原文链接,感谢
https://leftfist.blog.csdn.net/article/details/109102512

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple