Vue 单页面开发----实战一搭建及安装样式库

【一】环境的搭建

(1)vue 环境的搭建，网上很多，安装步骤就不多说了。

(2)搭建项目


先切换到安装目录，新建项目：vue init webpack 项目名
先切换到项目目录，运行项目： npm run dev

安装过程中按照提示输入即可，

运行项目后，如果可以看到下面的界面就代表搭建成功。

【二】安装样式库

在这里安利一个样式库：VUE YDUI样式库。安装里面的npm 安装即可。样式库的问题就解决了。

main.js配置
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import YDUI from 'vue-ydui'   //YDUI
import 'vue-ydui/dist/ydui.rem.css'
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog'
import router from './router'   //路由//定义YDUI-五种弹框类型
Vue.prototype.$dialog = {confirm: Confirm,alert: Alert,toast: Toast,notify: Notify,loading: Loading
};// YDUI
Vue.use(YDUI);Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

【三】路由配置

(1)先来看一下我的项目目录：我已经把helloword.vue换成了login.vue了

要搞懂index.html，app.vue ,helloWord.vue之间的关系。

一般index.html和app.vue不需要更改的。index.html可以放一些样式文件及js文件之类的。

真正需要操作的是.vue文件。如下

【四】简单配置一个路由跳转的例子

现在有一个场景，打开地址，显示登录，登陆成功后，显示首页。这里我们以微信界面为原型来设计界面。

(1)一个简单的登录

按照样式库给的简单写个登录页面。

这里就不做账号密码验证了，点击登录切换路由即可。

路由配置：

// VUE：我，发现，通讯录，微信
import tabbar from '@/components/tabbar/tabbar'{path: '/tabbar',name: 'tabbar',component: tabbar,}

login.vue:
<template><section class="yd-flexview"><section class="yd-scrollview"><yd-cell-group><form><yd-cell-item><span slot="left">用户名：</span><yd-input slot="right" :show-success-icon="false" :show-error-icon="false" v-model="personCode" max="20" placeholder="请输入用户名"></yd-input></yd-cell-item><yd-cell-item><span slot="left">密码：</span><yd-input slot="right" type="password" v-model="password" placeholder="请输入密码"></yd-input></yd-cell-item></form></yd-cell-group>   <yd-button size="large" type="primary" shape="circle" @click.native="getPersonInfo()">立即登录</yd-button></section></section>
</template><script>
export default {name: 'login',data () {return {personCode: '',password: '',loading: false,msg: 'HelloWrold.vue'}},methods: {getPersonInfo: function() {let that = this;this.$dialog.loading.open('很快加载好了');setTimeout(() => {//this.$dialog.loading.close();this.$router.push({path: '/tabbar'})}, 3000);}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

(2)配置路由

我的compons目录文件下有tabbar目录和login.vue文件，而tabbar目录下又有五个vue文件。

tabbar.vue是微信的底部导航栏。点击'微信'，'通讯录'，'发现'，'我'分别显示不同的页面信息。

所有我们的布局思路就是：底部的tabbara.vue是不变的，切换到哪个页面时显示不同的页面即可。及那四个vue文件相当于tabbar.vue的子组件，替换布局中的'身体'一样的意思。

登陆成功后，路由切换到tabbar.vue组件，然后默认显示me.vue组件的内容，配置redirect即可。

点击不同的tab切换不同的组件，并且tab高亮显示。

// VUE：我，发现，通讯录，微信
import tabbar from '@/components/tabbar/tabbar'
import me from '@/components/tabbar/me'
import discover from '@/components/tabbar/discover'
import communica from '@/components/tabbar/communica'
import weixin from '@/components/tabbar/weixin'{path: '/tabbar',name: 'tabbar',component: tabbar,redirect: 'me',children:[{path: '/me',name: 'me',component: me},{path: '/discover',name: 'discover',component: discover},{path: '/communica',name: 'communica',component: communica},{path: '/weixin',name: 'weixin',component: weixin}]}

tabbar.vue: 这里面的一些写法需要参照API去理解。可以看出用vue的方式来实现还是简洁一些的。比jsp简化了不少代码。

v-for，@click，v-if的用法等，需要了解

<template><section class="yd-flexview" style="height:100%;"><section id="scrollview" class="yd-scrollview"><!-- 切换的路由在这里进行展示 --><router-view></router-view></section>  <yd-tabbar slot="tabbar" fixed><yd-tabbar-item v-for="(item, index) in tabbarList" :key="index" :title="item.tabbarName" @click.native="changeTabbar(item.tabbarUrl, item.orderTag)":dot="item.orderTag == 3 ? true : false" :active="item.orderTag == currentTag ? true : false"><yd-icon :name="item.tabbarIcon" slot="icon"></yd-icon><yd-badge slot="badge" type="danger" v-if="item.orderTag == 1">999+</yd-badge></yd-tabbar-item>          </yd-tabbar></section></template><script>
export default {name: 'tabbar',data() {return {currentTag: 4,  //默认展示'我'tabbarList:[{'tabbarName': '微信', 'tabbarUrl': '/weixin', 'tabbarIcon': 'weixin', orderTag: 1},{'tabbarName': '通讯录', 'tabbarUrl': '/communica', 'tabbarIcon': 'time', orderTag: 2},{'tabbarName': '发现', 'tabbarUrl': '/discover', 'tabbarIcon': 'discover', orderTag: 3},{'tabbarName': '我', 'tabbarUrl': '/me', 'tabbarIcon': 'ucenter-outline', orderTag: 4}]}},methods: {changeTabbar: function(url, orderTag) {if (this.currentTag == orderTag) {  //如果已经是当前tab，则不进行路由切换return false;}this.currentTag = orderTag;  //设置选择的颜色this.$router.push({path: url});}},mounted: function() {this.$dialog.loading.close();}
}
</script>

实现效果：

一个简单的例子就成功了。下面就是实现与后台交互，登陆验证了

我的想法是：由于这是一个单页面的应用，都是组件之间的切换，相当于jsp的body的内容动态更换一样。

由于自己也是刚刚接触这个，还有很多不是很清楚，这里也没有解释的很清楚。还是要好好做个例子，慢慢摸索前进。

Vue 单页面开发----实战一搭建及安装样式库相关推荐

前端七十二变之vue单页面项目实战
1.组件嵌套将单文件组件组合在一起有两种方式,一种是嵌套方式,一种用路由的方式.嵌套的方式代码如下: 下图示中,假设组件A中要嵌入组件B <template>// 在A组件中使用B组件& ...
《Spring Boot+Vue全栈开发实战》读书笔记
写在前面嗯,回家处理一些事,所以离职了,之前的公司用开源技术封装了一套自己的低代码平台,所以之前学的spring Boot之类的东西都忘了很多,蹭回家的闲暇时间复习下. 笔记整体以 Spring B ...
读书笔记《Spring Boot+Vue全栈开发实战》(下)
本书将带你全面了解Spring Boot基础与实践,带领读者一步步进入 Spring Boot 的世界. 前言第九章 Spring Boot缓存第十章 Spring Boot安全管理第十一章 S ...
app怎么嵌套vue页面_app内嵌vue单页面应用的一些坑
写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!! 1.白屏项目第一次上线正常项目第二次上线,20多个用户反馈白屏(没见过这世面,心里慌的不行!!!), ...
ehcache springboot_阿里内部进阶学习SpringBoot+Vue全栈开发实战文档
前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置烦琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...
php vue seo,处理 Vue 单页面 SEO 的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
H5中的history单页面，手动实现单页面开发，细说h5单页面原理
就目前来看,前端的单页面开发占了很大一部分,一方面无刷新的切换增强了体验,并且浏览器记录依然存在,前进后退都没问题,在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用 ...
vue单页面背景颜色修改
最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色. 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而 ...
Lison《vue技术栈开发实战》（二）
Lison<vue技术栈开发实战>(二) 状态管理bus的使用父子组件通信 v-model语法糖使用bus通信状态管理Vuex(一) state和getter 辅助函数的使用模块中 ...
Lison《vue技术栈开发实战》（一）
Lison<vue技术栈开发实战>(一) 第01章使用vue-cli3创建项目使用Vue UI创建.管理项目项目结构目录整理初始文件添加基本配置详解使用代理解决跨域第02章 ...

Vue 单页面开发----实战一搭建及安装样式库

Vue 单页面开发----实战一搭建及安装样式库相关推荐

最新文章

热门文章

Vue 单页面开发----实战一 搭建及安装样式库

Vue 单页面开发----实战一 搭建及安装样式库相关推荐

最新文章

热门文章

Vue 单页面开发----实战一搭建及安装样式库

Vue 单页面开发----实战一搭建及安装样式库相关推荐