基于vue-cli vue-router搭建底部导航栏移动前端项目


Posted in Javascript onFebruary 28, 2018

vue.js学习 踩坑第一步

1.首先安装vue-cli脚手架

不多赘述,主要参考 Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

 

2.项目呈现效果

基于vue-cli vue-router搭建底部导航栏移动前端项目

项目呈现网址:www.zhoupeng520.cn/index.html 

项目中主要用了Flex布局,以及viewport相关知识,已达到适应各终端屏幕的目的

3.项目主要目录

基于vue-cli vue-router搭建底部导航栏移动前端项目

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` command
// (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',
  component: require('../components/vue/langren.vue')
 }, {
  path: '/sanguo',
  component: require('../components/vue/sanguo.vue')
 }, {
  path: '/yingxiong',
  component: require('../components/vue/yingxiong.vue')
 }, {
  path: '/',
  component: require('../components/content/content.vue')
 }]
});
export default router;

也可以直接写一个routers.js放在src目录下

(4)router.js

import langren from './components/vue/langren.vue';
import sanguo from './components/vue/sanguo.vue';
import yingxiong from './components/vue/yingxiong.vue';
const routers = [
 {
  path: '/langren',
  component: langren
 },
 {
  path: '/sanguo',
  component: sanguo
 },
 {
  path: '/yingxiong',
  component: 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.org/docs/user-guide/configuring
module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
 sourceType: 'module'
 },
 env: {
 browser: true,
 },
 // https://github.com/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搭建底部导航栏移动前端项目,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
Vue-Router模式和钩子的用法
Feb 28 #Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 #Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 #Javascript
vue cli 全面解析
Feb 28 #Javascript
js实现动态改变radio状态的方法
Feb 28 #Javascript
快速了解vue-cli 3.0 新特性
Feb 28 #Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
You might like
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python中二维阵列的变换实例
2014/10/09 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
python 修改本地网络配置的方法
2019/08/14 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
keras slice layer 层实现方式
2020/06/11 Python
python dict如何定义
2020/09/02 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
德国家具折扣店:POCO
2020/02/28 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
外企测试工程师面试题
2015/02/01 面试题
观看信仰心得体会
2014/09/04 职场文书
社区服务活动感想
2015/08/11 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL