基于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 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
layui递归实现动态左侧菜单
Jul 26 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
基于mysql的bbs设计(五)
2006/10/09 PHP
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
PHP分享图片的生成方法
2018/04/25 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
python 处理dataframe中的时间字段方法
2018/04/10 Python
python多维数组切片方法
2018/04/13 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python生成特定分布数的实例
2019/12/05 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
如何写好建议书
2014/03/13 职场文书
《学会合作》教学反思
2014/04/12 职场文书
技术比武方案
2014/05/19 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
节水倡议书
2015/01/19 职场文书
男人帮观后感
2015/06/18 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis