基于vue-cli vue-router搭建底部导航栏移动前端项目
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了基于vue-cli vue-router搭建底部导航栏移动前端项目,项目中主要用了Flex布局,以及viewport相关知识,已达到适应各终端屏幕的目的。需要的朋友可以参考下
vue.js学习 踩坑第一步
1.首先安装vue-cli脚手架
不多赘述,主要参考
2.项目呈现效果
项目呈现网址:
项目中主要用了Flex布局,以及viewport相关知识,已达到适应各终端屏幕的目的
3.项目主要目录
4主要代码如下
(1)App.vue
<template> <div id="app"> <router-view class="view"></router-view> <div class="nav"> <router-link class="nav-item" to="/langren">狼人杀</router-link> <router-link class="nav-item" to="/sanguo">三国杀</router-link> <router-link class="nav-item" to="/yingxiong">英雄杀</router-link> </div> </div> </template> <script> </script> <style> #app{ height: 100%; display: flex; flex-direction: column; flex: 1; } .nav{ height: 80px; line-height: 80px; display: flex; text-align: center; } .nav-item{ flex: 1; text-decoration: none; } .nav-item:link,.nav-item:visited{ background-color: white; color: black; } .nav-item:hover,.nav-item:active{ color: white; background-color: #C8C6C6; } </style>
(2)main.js
// The Vue build version to load with the `import` mand // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue'; import VueRouter from 'vue-router'; import router from './router'; import App from './App'; Vue.config.productionTip = false; Vue.use(VueRouter); /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '</App>', render: h => h(App) });
(3)index.js //这个就是路由的配置
这个可以直接写进main.js 也可像我一样在main.js中引入,各有各的好处
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ routes: [{ path: '/langren', ponent: require('../ponents/vue/langren.vue') }, { path: '/sanguo', ponent: require('../ponents/vue/sanguo.vue') }, { path: '/yingxiong', ponent: require('../ponents/vue/yingxiong.vue') }, { path: '/', ponent: require('../ponents/content/content.vue') }] }); export default router;
也可以直接写一个routers.js放在src目录下
(4)router.js
import langren from './ponents/vue/langren.vue'; import sanguo from './ponents/vue/sanguo.vue'; import yingxiong from './ponents/vue/yingxiong.vue'; const routers = [ { path: '/langren', ponent: langren }, { path: '/sanguo', ponent: sanguo }, { path: '/yingxiong', ponent: yingxiong } ]; export default routers;
(5)content.vue
<template> <div class="content"><p>我是content!</p></div> </template> <script type="text/ecmascript-6"> export default {}; </script> <style lang="stylus" rel="stylesheet/stylus"> .content height:100% background:blue flex:1 display:flex; justify-content:center align-items:center </style>
langren.vue / sanguo.vue / yingxiong.vue
代码和这个一样只是颜色和p中字段改了下。
主要代码就这些了。
5.另外写一下主要遇到的报错以及解决方法
(1)由于是用来es6的语法,所以要遵循它 的一些语法规则,所以有的代码最后要多一行空行,有的要加分号,有的要加空格,根据报错来进行更改
(2)semi//indent//no-tabs报错,在.eslintrc.js更改代码如下,主要添加了最后几行。
// http://eslint./docs/user-guide/configuring module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // https://github./feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'semi': ['error', 'always'], 'indent': 0, 'space-before-function-paren': 0, "no-tabs":"off" } }
总结
以上所述是长沙网络推广给大家介绍的基于vue-cli vue-router搭建底部导航栏移动前端项目,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程