关于如何创建vue项目请参考如何使用vue组件搭建网页并打包发布

这里我使用 vue init webpack-simple 创建一个简单的工程，我们关注的重点是 index.html 文件和 /src 文件夹，index.html 是入口文件，/src 文件夹则存放我们的 vue 组件

index.html的内容如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>vue-simple</title></head><body><div id="app"></div><script src="/dist/build.js"></script></body>
</html>

<div id="app"></div> 这句表示我们的主组件，对应的是src文件夹下的App.vue，程序运行时将会被App.vue中的模板替换
<script src="/dist/build.js"></script> 这句可以不用管，是发布之后会用到的。
/src 文件夹下还有一个文件 main.js，其主要作用为运行App组件，有兴趣的同学可以尝试替换运行自定义组件

main.js内容如下

import Vue from 'vue'
import App from './App.vue'new Vue({el: '#app',render: h => h(App)
})

el: '#app' 寻找的时 index.html 中的元素

关于Vue中 render: h => h(App) 的含义

自定义.vue组件

在工程目录 /src 下创建 component 文件夹，并在 component 文件夹下创建一个 banner.vue 文件，我们先做一个简单的vue组件测试一下

稍微有点vue基础知识的都知道vue组件怎么写，没有基础知识的，仿照一下改一改也能自己写一个了

<template><div class="banner"><img src="../images/banner.jpg" alt="banner"></div>
</template><script>
export default {name: 'banner'
}
</script><style>
.banner {width: 100%;height: 700px;overflow: hidden;
}
img {width: 100%;height: 100%;object-fit: cover;
}
</style>

把vue组件放入App.vue

我把 App.vue 中的内容改成了如下形式

<template><div id="app" class="app"><banner></banner></div>
</template><script>
import banner from './component/banner.vue'export default {name: 'app',components: { banner }
}
</script><style lang="scss">
body {margin: 0;
}
</style>

在模板中写入组件 <banner></banner>
在脚本中引入 banner 组件文件 import banner from './component/banner.vue'
在脚本中注册 banner 组件 components: { banner }

输入npm run dev 运行程序后就能看到效果，程序运行中，更改内容也会实时的在网页中显示

使用组件搭建网页

有了前面两个基础后和vue语法基础后，我们就可以尝试使用多个vue组件搭建复杂网页应用了

demo做一个简单的网页头部，包括导航和banner，用到了swiper插件， npm install swiper --save 将swiper添加到依赖库

主要的文件 / 目录结构

|-- vue-simple|-- index.html|-- src|   |-- App.vue|   |-- main.js|   |-- base.css|   |-- images|   |   |-- taikonglvxing.jpg|   |   |-- xiannvxingxi.jpg|   |-- component|   |   |-- banner.vue|   |   |-- navigation.vue|   |   |-- secnav.vue

base.css 是css样式重置

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>vue-simple</title><link rel="stylesheet" href="/src/base.css"></head><body><div id="app"></div><script src="/dist/build.js"></script></body>
</html>

App.vue

<template><div id="app" class="class"><div class="top"></div><navigation></navigation><banner></banner></div>
</template><script>
import banner from './component/banner.vue'
import navigation from './component/navigation.vue'export default {name: 'app',components: { banner, navigation }
}
</script><style lang="scss">
body {margin: 0;
}
.top {width: 100%;height: 2px;background-color: #2d8fff;
}
</style>

banner.vue

<template><div class="banner swiper-container" :id="id"><div class="swiper-wrapper"><template v-for="item in items"><div  :key="item" class="swiper-slide"><img :src="item.src" alt="item.alt"></div></template></div><div class="swiper-pagination"></div></div>
</template><script>
import Swiper from "swiper"
import 'swiper/dist/css/swiper.min.css'export default {name: 'banner',data () {return {id: 'banner',items: [{ src: 'src/images/xiannvxingxi.jpg', alt: ''},{ src: 'src/images/taikonglvxing.jpg', alt: ''}],}},mounted () {new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination'},autoplay: true,loop: true,autoplayDisableOnInteraction: false});}
}
</script>
<style>
.banner {width: 100%;height: 500px;overflow: hidden;
}
img {width: 100%;height: 100%;object-fit: cover;
}
</style>

navigation.vue

<template><div id="navigation" class="nav"><ul><template v-for="item in items"><li :key="item"><a :href="item.url">{{ item.txt }}</a><secnav v-if="item.secnav" :items="item.secnav" :class="secnav"></secnav></li></template></ul></div>
</template><script>
import secnav from './secnav.vue'export default {name: 'navigation',components: { secnav },data () {return {items: [{ txt: '主页', url: '/'},{ txt: '联系我们', url: '/'},{ txt: '服务内容', url: '/', secnav: [{ txt: '火星旅行', url:'/'},{ txt: '仙女星旅行', url:'/'},{ txt: 'M77旅行', url:'/'},]},{ txt: '售前咨询', url: '/', secnav: [{ txt: '旅行路线', url:'/'},{ txt: '安全保障', url:'/'},{ txt: '自助查询', url:'/'},{ txt: '人工客服', url:'/'},]},{ txt: '投诉建议', url: '/' },],}}
}
</script><style>
.nav {width: 100%;max-width: 970px;margin: 0 auto;
}
.nav>ul {display: flex;list-style: none;margin: 0;justify-content: space-around;
}
.nav>ul li {flex-grow: 1;padding: 15px 20px;text-align: center;position: relative;
}
.nav>ul li:hover {background-color: #2289ff;cursor: pointer;
}
.nav>ul li:hover>a{color: white;
}
.nav>ul li:hover .secnav {display: inline-block;z-index: 2;
}
.nav>ul li a {display: inline-block;width: 100%;
}
</style>

secnav.vue

<template><ul class="secnav"><template v-for="item in items"><li :key="item"><a :href="item.url">{{ item.txt }}</a></li></template></ul>
</template><script>
export default {name: 'secnav',props: [ 'items' ],
}
</script><style>
.secnav {position: absolute;background-color: #fff;display: none;left: 0;top: 100%;width: 100%;
}
</style>

效果图

使用vue组件搭建网页应用相关推荐

如何使用vue组件搭建网页并打包发布
vue组件化项目搭建及编译打包发布引言开发环境开发环境介绍开发环境安装使用模板创建项目编译及打包发布引言最近开始学习Vue,Vue 是一个前端框架,特点是数据绑定和组件化.网上很多教程 ...
Vue+Django搭建网页学习
Vue+Django搭建网页学习 1 简介 1.1 Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐 ...
如何从0开始搭建Vue组件库
前言: 组件设计是通过对功能及视觉表达中元素的拆解.归纳.重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库.本文我们主要讲述基于 Va ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
vue 悬浮按钮组件_如何搭建和发布一个 Vue 组件库
如今,许多组件库风靡一时,使得我们能够便捷地保持一个应用一致的外观和体验. 我至今已经使用过许多不同的组件库,不过使用组件和深入了解构建组件的过程还是有很大不同的. 我想要更深入地理解组件库的构建过程 ...
好用的vue组件插件及框架
实用的vue插件大汇总 Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总 ...
vue组件库大全（忘了的时候可以进来找一下~）
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/ ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
Vue 组件全家桶
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,这里对vue插件汇总,提供vue组件 ...

使用vue组件搭建网页应用

自定义.vue组件

把vue组件放入App.vue

使用组件搭建网页

使用vue组件搭建网页应用相关推荐

最新文章

热门文章