蝙蝠岛资源网

前端Vue项目详解--初始化及导航栏
网络编程 2024/12/27 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

一、项目初始化

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

MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project
"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="/UploadFiles/2021-04-02/index.js">


使用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="/UploadFiles/2021-04-02/head-logo.a7cedf3.svg">


再创建/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="/UploadFiles/2021-04-02/head-logo.a7cedf3.svg">


编写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="/UploadFiles/2021-04-02/head-logo.a7cedf3.svg">


使用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依赖的页面。


后端配置示例


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
前端,vue,初始化,导航栏

                                     

                                
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“前端Vue项目详解--初始化及导航栏”

暂无前端Vue项目详解--初始化及导航栏的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com