浅入深出Vue:第一个页面
今天正式开始入门篇,也就是实战了~
首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧。
准备工作
新建一个vue项目(可以参考基础篇里的搭建方法,也可以参考官网现在最近的 Vue CLI 3.x进行可视化创建和管理
安装
vue-router
安装
elementui
以上的操作都可以在之前的博文中(基础篇)找到完整步骤,这里就不重复了。
我们做完准备工作之后,目录结构如下:
我们来看看这个目录:
|--public 公共目录
| |--favicon.ico 网站图标
| |--index.html 网站入口文件
|
|--src 项目目录
| |--assets 资源目录
| |--components vue组件目录
| |--views 视图目录,安装 vue-router之后自动生成
| |--About.vue
| |--Home.vue vue-router 自带的主页示例
|
| |--App.vue 项目中 vue组件的入口文件
| |--main.js 项目的入口文件,实例化根实例,做一些配置,以及组件注册,第三方库引入
| |--router.js vue-router自动生成的路由映射对象
确定布局
在之前我们说到过, UI 才是最终的呈现效果,代码是为它而服务的。因此 UI还是需要上点心的:
- 没办法做得很好看,那就尽量别做得太难看吧
若羽是个地地道道的后端,对于前端布局、UI设计可以说得上是七窍通了六窍: 一窍不通。
不过好在,这次选择的 UI库中有提供布局:
- Container 布局容器
官方文档:查看
这里我们选用最常见的页面布局,也就是只有 Header
和 Main
的简约式布局。毕竟复杂的咱也玩不溜,还是不嫌丑了。
查看项目代码,寻找下手点
之前我们首先分析了整个项目的目录结构,目的是为了提前预习预习,工欲善其事必先利其器!
预习的目的是为了我们在开始一个新项目时,要知道应该从何下手,而不是上来就撸起袖子一把梭。
这里我们首当其冲的当然是先看 main.js
,因为它是项目的入口文件,可以在这里看到整个项目的初始化过程:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
代码很简短,它做了哪些事呢:
实例化根实例,并挂载在 Id 为 app的 dom节点上(这里挂载的就是 app.vue中的节点)。
配置路由对象。
我们再来看看 router.js 中路由对象是怎么定义的:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
这里定义了两个路由,一个是 home,同时它也是根路由,也就是项目启动后默认进入的页面。
另一个是 about,它是和 home 同级的路由,渲染的时 ./views/About.vue
这个组件。
很好,我们再来看看 app.vue
,因为我们要在这里进行页面布局:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这里是不是看到一个很眼熟的东西呢:id="app"
,没错,这就是入口文件挂载的节点。
进行页面布局
好了,我们千辛万苦终于找到了这个文件(这里是为了演示如何去了解一个你并不熟悉的项目,开发中如果有文档,那么直接查看文档是最便捷的方式)
接下来我们把样式都给清理掉,中间无用的代码也都去掉:
<template>
<div id="app">
<router-view/>
</div>
</template>
清理后的代码就剩五行了,好了,我们可以开始使用 elementui 中的 Container
进行布局了。
在写代码之前,再来理一下我们要达到的效果:
- 使用简约式的布局,只有
Header
与Main
。
好了,开始吧~
首先在入口文件(main.js)中引入 Elementui组件并注册
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
然后就可以在 App.vue
中使用 ElementUI 进行页面布局了:
<template>
<div id="app">
<el-container>
<el-header style="text-align:center;">浅入深出Vue-入门篇</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</div>
</template>
这里我们把子路由渲染出来的视图放在了 el-main
中,这样就可以保证整体的布局还是原样,只是其中的内容在发生变化(进入不同 url时)。
看看最终的效果:
有点丑,但是没关系,我们先把布局做出来。子页面里的内容接下来慢慢替换。
这就是我们的第一个页面了~
浅入深出Vue:第一个页面的更多相关文章
- 浅入深出Vue:环境搭建
浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...
- 浅入深出Vue:前言
浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...
- 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置
浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...
- 浅入深出Vue:工具准备之WebStorm安装配置
浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...
- 浅入深出Vue系列
浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...
- 浅入深出Vue:代码整洁之封装
深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...
- 浅入深出Vue:文章列表
终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...
- 浅入深出Vue:自动化路由
在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...
- 浅入深出Vue:组件
组件在 vue开发中是必不可少的一环,用好组件这把屠龙刀,就能解决不少问题. 组件是什么 官方的定义: 组件是可复用的 Vue 实例,并且可带有一个名字. 官方的定义已经非常简明了,组件就是一个实例. ...
随机推荐
- linux下一个rsync工具和配置
本文介绍了整个基本:http://www.2cto.com/os/201308/238733.html 一些简单的备忘录: 1. ubuntu下通过apt-get就可以安装: 2. 配置文件/etc/ ...
- 【转载】如何使用docker部署c/c++程序
原文地址:https://blog.csdn.net/len_yue_mo_fu/article/details/80189035 Docker介绍 Docker是一个开源的容器引擎,它有助于更快地交 ...
- Selenium-等待
分为3种 (1)就是通过线程强制等待 Thread.sleep(1000); (2)隐示等待.就是所有的命令都等待.分为3种 // 这个方法表示全局的等待.意思是针对所有的findElement方法都 ...
- 【已解决】Android Studio下,gradle project sync failed 错误
原文:[已解决]Android Studio下,gradle project sync failed 错误 Android studio下突然报错 gradle project sync failed ...
- https://www.jianshu.com/p/4da29fa310d2
wampserver显示红色.橙色的解决方案 拿笔的小鑫 关注 2016.10.15 14:38* 字数 2643 阅读 5083评论 0喜欢 3赞赏 1 </br></br&g ...
- Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化
原文:Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化 [函数名称] P分位法图像二值化 [算法说明] 所谓P分位法图像分割,就是在知道图像中目标所占的比率Rat ...
- Win8Metro(C#)数字图像处理--2.23二值图像开运算
原文:Win8Metro(C#)数字图像处理--2.23二值图像开运算 [函数名称] 二值图像开运算函数OpenOperateProcess(WriteableBitmap src) [算法说明 ...
- 零元学Expression Blend 4 - Chapter 4元件重复运用的观念
原文:零元学Expression Blend 4 - Chapter 4元件重复运用的观念 本章将教大家Blend元件重复运用的观念,这在Silverlight设计中是非常重要的,另外加码赠送渐层工具 ...
- 用C#修改系统区域和语言设置
原文:用C#修改系统区域和语言设置 这几天做项目,因为客户机的系统不同,发现客户机的区域和语言设置也不尽相同,导致程序运行时根据时间判断的很多属性和方法都出现各种各样的千奇百怪的问题. 修改程序太费时 ...
- SqlServer批量压缩数据库日志-多数据库批量作业,批量备份还原
原文:SqlServer批量压缩数据库日志-多数据库批量作业,批量备份还原 --作业定时压缩脚本 多库批量操作 DECLARE @DatabaseName NVARCHAR(50) DECLARE @ ...