基于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 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 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
php adodb分页实现代码
2009/03/19 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
PHP图片加水印实现方法
2016/05/06 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
python中dir函数用法分析
2015/04/17 Python
python简单文本处理的方法
2015/07/10 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python快排算法详解
2019/03/04 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
关于VPN
2012/06/10 面试题
外包公司软件测试工程师
2014/11/01 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
房屋出售协议书
2014/04/10 职场文书
青安岗事迹材料
2014/05/14 职场文书
2014年转正工作总结
2014/11/08 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书