基于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

<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搭建底部導航欄移動前端項目，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

網頁標題：基于vue-clivue-router搭建底部導航欄移動前端項目
分享路徑：http://www.2m8n56k.cn/article40/poocho.html

成都網站建設公司_創新互聯，為您提供定制開發、電子商務、微信小程序、網站收錄、移動網站建設、企業網站制作

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

基于vue-clivue-router搭建底部導航欄移動前端項目