基于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对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
瀑布流布局代码一例
Apr 11 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
JS实现轮播图效果
Jan 11 Javascript
如何使用CocosCreator对象池
Apr 14 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的论坛(5)
2006/10/09 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
Python的几种主动结束程序方式
2019/11/22 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
一组SQL面试题
2016/02/15 面试题
网络工程师职业规划
2014/02/10 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
创建青年文明号材料
2014/05/09 职场文书
民主评议党员工作总结
2014/10/20 职场文书
担保书范本
2015/01/20 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
员工试用期工作总结
2019/06/20 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
Redis命令处理过程源码解析
2022/02/12 Redis