基于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当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 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 fprintf()函数用法讲解
2019/02/16 PHP
PHP7新功能总结
2019/04/14 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python中的choice()方法使用详解
2015/05/15 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
详解python中list的使用
2019/03/15 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
大学四年职业生涯规划书范文
2014/01/02 职场文书
工程部文员岗位职责
2015/02/04 职场文书
地雷战观后感
2015/06/09 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers