前端Vue项目详解--初始化及导航栏


Posted in Javascript onJune 24, 2019

一、项目初始化

创建webpack模板项目如下所示:

MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project
? Project name luffy_project
? Project description A Vue.js project
? Author hqs
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "luffy_project".

根据提示启动项目:

$ cd luffy_project/
$ npm run dev

由于在初始化时选择了vue-router,因此会自动创建/src/router/index.js文件。

删除Helloworld组件相关信息后,index.js文件内容如下所示:

import Vue from 'vue'
import Router from 'vue-router'
// @绝对路径 检索到 ...src/
// 如果Router当做局部模块使用一定要Vue.use(Router)
// 以后在组件中,可以通过this.$router 获取Router实例化对象
// 路由信息对象 this.$routes 获取路由配置信息
Vue.use(Router)
// 配置路由规则
export default new Router({
routes: [
{
'path': '/'
}
]
})

二、基于ElementUI框架实现导航栏

1、elementUI——适合Vue的UI框架

elementUI是一个UI库,它不依赖于vue,但确是当前和vue配合做项目开发的一个比较好的UI框架。

(1)npm安装

推荐使用 npm 的方式安装,能更好地和 webpack 打包工具配合使用。

$ npm i element-ui -S

(2)CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

使用CND引入 Element 需要在链接地址上锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

2、引入 Element

在项目中可以引入整个Element,或者是根据需要仅引入部分组件。

(1)完整引入

在 main.js 中写入如下内容:

import Vue from 'vue'
import App from './App'
import router from './router'
// elementUI导入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 注意样式文件需要单独引入
// 调用插件
Vue.use(ElementUI);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});

以上代码便完成了 Element 的完整引入。

尝试在App.vue使用elementui的Button按钮:

<template>
<div id="app">
<!-- 导航区域 -->
<el-button type="info">信息按钮</el-button>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>

显示效果:

前端Vue项目详解--初始化及导航栏

(2)按需引入

借助 babel-plugin-component,可以只引入需要的组件,以达到减小项目体积的目的。

首先安装babel-plugin-component:

$ npm install babel-plugin-component -D

然后将.babelrc文件修改如下:

{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

如果只希望引入部分组件,如Buttion何Select,那么需要在 main.js 中写如下内容:

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});

3、导航栏实现

首先创建/src/components/Common/LuffyHeader.vue文件:

<template>
<!-- element-ui -->
<el-container>
<el-header height = '80px' >
<div class="header">
<div class="nav-left">
<img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt="">
</div>
<div class="nav-center">
<ul>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" >
导航链接
</a>
</li>
</ul>
</div>
<div class="nav-right">
<span>登录</span>
 |  
<span>注册</span>
</div>
</div>
</el-header>
</el-container>
</template>
<script>
export default {
name: 'LuffyHeader',
data(){
return {
}
},
};
</script>

再创建/static/global/global.css文件:

* {
padding: 0;
margin: 0;
}
body {
font-size: 14px;
color: #4a4a4a;
font-family: PingFangSC-Light; /*苹果设计的一款全新的中文系统字体,该字体支持苹果的动态字体调节技术*/
}
ul {
list-style: none;
}
a {
text-decoration: none;
}

最后在App.vue中引入和使用组件:

<template>
<div id="app">
<!-- 导航区域 -->
<LuffyHeader/>
<router-view/>
</div>
</template>
<script>
import LuffyHeader from '@/components/Common/LuffyHeader'
export default {
name: 'App',
components:{
LuffyHeader
}
}
</script>

显示效果如下所示:

前端Vue项目详解--初始化及导航栏

三、导航栏路由跳转

1、组件创建和路由配置编写

添加“首页”、“免费课程”、“轻课”、“学位课”四大组件,因此创建如下文件:

src/components/Home/Home.vue
src/components/Course/Course.vue
src/components/LightCourse/LightCourse.vue
src/components/Micro/Micro.vue

在src/router/index.js中引入组件,配置路由规则:

import Vue from 'vue'
import Router from 'vue-router'
// @绝对路径 检索到 ...src/
// 如果Router当做局部模块使用一定要Vue.use(Router)
// 以后在组件中,可以通过this.$router 获取Router实例化对象
// 路由信息对象 this.$routes 获取路由配置信息
import Home from '@/components/Home/Home'
import Course from '@/components/Course/Course'
import LightCourse from '@/components/LightCourse/LightCourse'
import Micro from '@/components/Micro/Micro'
Vue.use(Router)
// 配置路由规则
export default new Router({
routes: [
{
path: '/',
redirect: '/home' // 访问/,直接跳转到/home路径
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/course',
name: 'Course',
component: Course
},
{
path: '/home/light-course',
name: 'LightCourse',
component: LightCourse
},
{
path: '/micro',
name: 'Micro',
component: Micro
}
]
})

2、导航链接编写

修改 LuffyHeader.vue页面,编写导航链接:

<template>
<!-- element-ui -->
<el-container>
<el-header height = '80px' >
<div class="header">
<div class="nav-left">
<img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt="">
</div>
<div class="nav-center">
<ul>
<li v-for="(list, index) in headerList" :key="list.id">
<a href="#" rel="external nofollow" rel="external nofollow" >
{{ list.title }}
</a>
</li>
</ul>
</div>
<div class="nav-right">
<span>登录</span>
 |  
<span>注册</span>
</div>
</div>
</el-header>
</el-container>
</template>
<script>
export default {
name: 'LuffyHeader',
data() {
return {
headerList: [
{id: '1', name: 'Home', title: '首页'},
{id: '2', name: 'Course', title: '免费课程'},
{id: '3', name: 'LightCourse', title: '轻课'},
{id: '4', name: 'Micro', title: '学位课程'}
],
isShow: false
}
}
}
</script>

编写headerList列表及列表中的导航对象,在 导航栏中遍历对象获取对应信息,显示在页面效果如下所示:

前端Vue项目详解--初始化及导航栏

3、router-link路由跳转

经过上面的编写,虽然导航栏已经可以正常显示,但是a标签是不会做自动跳转的。 需要使用 router-link 进一步改写LuffyHeader.vue,使得路由跳转得以渲染对应组件:

<template>
<!-- element-ui -->
<el-container>
<el-header height = '80px' >
<div class="header">
<div class="nav-left">
<img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt="">
</div>
<div class="nav-center">
<ul>
<li v-for="(list, index) in headerList" :key="list.id">
<router-link :to="{name:list.name}">
{{ list.title }}
</router-link>
</li>
</ul>
</div>
<div class="nav-right">
<span>登录</span>
 |  
<span>注册</span>
</div>
</div>
</el-header>
</el-container>
</template>
<script>
export default {
name: 'LuffyHeader',
data() {
return {
headerList: [
{id: '1', name: 'Home', title: '首页'},
{id: '2', name: 'Course', title: '免费课程'},
{id: '3', name: 'LightCourse', title: '轻课'},
{id: '4', name: 'Micro', title: '学位课程'}
],
isShow: false
}
}
}
</script>

使用to='{name:list.name}'设置命令路由,这样点击a标签就可以跳转了。显示效果如下所示:

前端Vue项目详解--初始化及导航栏

可以看到虽然点击了轻课,但是和其他导航项样式没有任何分别,需要设置路由active样式完成优化。

4、linkActiveClass设置路由的active样式

linkActiveClass 全局配置 <router-link> 的默认“激活 class 类名”。

active-class 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

(1)在路由配置linkActiveClass

在 src/router/index.js 中做如下配置:

import Vue from 'vue'
import Router from 'vue-router'
// @绝对路径 检索到 ...src/

// 如果Router当做局部模块使用一定要Vue.use(Router)
// 以后在组件中,可以通过this.$router 获取Router实例化对象
// 路由信息对象 this.$routes 获取路由配置信息
import Home from '@/components/Home/Home'
import Course from '@/components/Course/Course'
import LightCourse from '@/components/LightCourse/LightCourse'
import Micro from '@/components/Micro/Micro'
Vue.use(Router)
// 配置路由规则
export default new Router({
linkActiveClass: 'is-active',
routes: [
{
path: '/',
redirect: '/home' // 访问/,直接跳转到/home路径
},
......
{
path: '/micro',
name: 'Micro',
component: Micro
}
]
})

(2)在LuffyHeader.vue中配置路由active样式

<template>
......省略
</template>
<script>
......省略
</script>
<style lang="css" scoped>
.nav-center ul li a.is-active{
color: #4a4a4a;
border-bottom: 4px solid #ffc210;
}
</style>

(3)显示效果

前端Vue项目详解--初始化及导航栏

5、hash模式切换为 history 模式

vue-router 默认 hash 模式——使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。比如http://www.abc.com/#/index,hash值为#/index。hash模式的特点在于hash出现在url中,但是不会被包括在HTTP请求中,对后端没有影响,不会重新加载页面。

如果不想要这种显示比较丑的hash,可以用路由的 history模式,这种模式充分利用 history.pushState API来完成URL跳转而无需重新加载页面。

(1)路由修改为history模式

修改 src/router/index.js 文件如下所示:

import Vue from 'vue'
import Router from 'vue-router'
// @绝对路径 检索到 ...src/
// 如果Router当做局部模块使用一定要Vue.use(Router)
// 以后在组件中,可以通过this.$router 获取Router实例化对象
// 路由信息对象 this.$routes 获取路由配置信息
import Home from '@/components/Home/Home'
import Course from '@/components/Course/Course'
import LightCourse from '@/components/LightCourse/LightCourse'
import Micro from '@/components/Micro/Micro'

Vue.use(Router)
// 配置路由规则
export default new Router({
linkActiveClass: 'is-active',
mode: 'history', // 改为history模式
routes: [
{
path: '/',
redirect: '/home' // 访问/,直接跳转到/home路径
},
.....
]
})

使用history模式时,url就像正常url,例如http://yoursite.com/user/id,这样比较美观。

显示效果如下所示:

前端Vue项目详解--初始化及导航栏

(2)后端配置

但是要用好这种模式,需要后台配置支持。vue的应用是单页客户端应用,如果后台没有正确的配置,用户在浏览器访问http://yoursite.com/user/id 就会返回404,这样就不好了。

因此要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是app依赖的页面。

后端配置示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 #Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 #Javascript
webpack自动打包和热更新的实现方法
Jun 24 #Javascript
Promise扫盲贴
Jun 24 #Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 #Javascript
前端天气插件tpwidget使用方法详解
Jun 24 #Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 #Javascript
You might like
Javascript base64编码实现代码
2011/12/02 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现高效求解素数代码实例
2015/06/30 Python
python实现感知器
2017/12/19 Python
Python版名片管理系统
2018/11/30 Python
什么是Python变量作用域
2020/06/03 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
中职生自荐信
2013/10/13 职场文书
高三家长寄语
2014/04/03 职场文书
航空学院求职信
2014/06/11 职场文书
学雷锋宣传标语
2014/06/25 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
业务员辞职信范文
2015/03/02 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
Java详细解析==和equals的区别
2022/04/07 Java/Android