前端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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
vue路由分文件拆分管理详解
Aug 13 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编程与应用
2006/10/09 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
python自动发送邮件脚本
2018/06/20 Python
python绘制动态曲线教程
2020/02/24 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
python 简单的调用有道翻译
2020/11/25 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
办理退休介绍信
2014/01/09 职场文书
企业给企业的表扬信
2014/01/13 职场文书
关于爱情的广播稿
2014/01/16 职场文书
手工社团活动方案
2014/02/17 职场文书
法律专业求职信
2014/05/24 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
文明班级申报材料
2014/12/24 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS