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

vue.js学习踩坑第一步

创新互联公司是一家集成都网站设计、成都做网站、外贸网站建设、网站页面设计、网站优化SEO优化为一体的专业网站制作公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

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

（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: '',
 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

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搭建底部导航栏移动前端项目，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！

本文名称：基于vue-clivue-router搭建底部导航栏移动前端项目
链接分享：http://cqcxhl.com/article/poocho.html

重庆分公司，新征程启航

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

其他资讯