前端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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
JavaScript中一些特殊的字符运算
Aug 17 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
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
PHP的PSR规范中文版
2013/09/28 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
php实现头像上传预览功能
2017/04/27 PHP
PHP查询分页的实现代码
2017/06/09 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
JavaScript 事件系统
2010/07/22 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
基于wordpress的ajax写法详解
2018/01/02 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
Vue性能优化的方法
2020/07/30 Javascript
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python如何支持并发方法详解
2020/07/25 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
学期自我评价
2014/01/27 职场文书
优秀员工评语
2014/02/10 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
金秋助学感谢信
2015/01/21 职场文书
应届毕业生自荐信
2015/03/04 职场文书
班主任远程培训研修日志
2015/11/13 职场文书