vue-cli vue-router 기반 아래쪽 탐색 표시 줄 이동 전단 프로젝트 구축

구덩이 밟 기 첫걸음
1.우선 vue-cli 비 계 를 설치한다
군더더기 없 이 주로 참고Vue 구덩이 오 르 는 길(1)vue-cli 로 프로젝트 구축
 
2.프로젝트 구현 효과

프로젝트 주소 표시:www.zhoupeng520.cn/index.html 
프로젝트 에서 주로 Flex 레이아웃 과 viewport 관련 지식 을 사용 하여 각 단말기 화면 에 적응 하 는 목적 을 달성 했다.
3.프로젝트 주요 디 렉 터 리

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;

라 우 터 스.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 기반 으로 아래쪽 네 비게 이 션 바 이동 전단 프로젝트 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.작은 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!