vue.js 踩坑第一步 利用vue-cli vue-router搭建一個帶有底部導航欄移動前端項目

vue.js學習 踩坑第一步

1.首先安裝vue-cli腳手架

很少贅述，主要參考WiseWrong　的 Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目

 

2.項目呈現效果

項目呈現網址：www.zhoupeng520.cn/index.html

 

項目中主要用了Flex佈局，以及viewport相關知識，已達到適應各終端屏幕的目的

 

3.項目主要目錄

 

 

4主要代碼以下

 

（1）App.vue

 1 <template>
 2   <div id="app">
 3     <router-view class="view"></router-view>
 4     <div class="nav">
 5       <router-link class="nav-item" to="/langren">狼人殺</router-link>
 6       <router-link class="nav-item" to="/sanguo">三國殺</router-link>
 7       <router-link class="nav-item" to="/yingxiong">英雄殺</router-link>
 8     </div>
 9   </div>
10 </template>
11 
12 <script>
13 </script>
14 
15 <style>
16   #app{
17     height: 100%;
18     display: flex;
19     flex-direction: column;
20     flex: 1;
21   }
22   .nav{
23     height: 80px;
24     line-height: 80px;
25     display: flex;
26     text-align: center;
27   }
28   .nav-item{
29     flex: 1;
30     text-decoration: none;
31   }
32   .nav-item:link,.nav-item:visited{
33     background-color: white;
34     color: black;
35   }
36   .nav-item:hover,.nav-item:active{
37     color: white;
38     background-color: #C8C6C6;
39   }
40 
41 </style>

 

（2）main.js

 

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue';
 4 import VueRouter from 'vue-router';
 5 import router from './router';
 6 import App from './App';
 7 
 8 Vue.config.productionTip = false;
 9 Vue.use(VueRouter);
10 
11 /* eslint-disable no-new */
12 new Vue({
13   el: '#app',
14   router,
15   template: '</App>',
16   render: h => h(App)
17 });

（3）index.js //這個就是路由的配置

這個能夠直接寫進main.js 也可像我同樣在main.js中引入，各有各的好處

 1 import Vue from 'vue';
 2 import VueRouter from 'vue-router';
 3 Vue.use(VueRouter);
 4 
 5 const router = new VueRouter({
 6     routes: [{
 7         path: '/langren',
 8         component: require('../components/vue/langren.vue')
 9     }, {
10         path: '/sanguo',
11         component: require('../components/vue/sanguo.vue')
12     }, {
13         path: '/yingxiong',
14         component: require('../components/vue/yingxiong.vue')
15     }, {
16         path: '/',
17         component: require('../components/content/content.vue')
18     }]
19 });
20 export default router;

也能夠直接寫一個routers.js放在src目錄下

(4)router.js

 1 import langren from './components/vue/langren.vue';
 2 import sanguo from './components/vue/sanguo.vue';
 3 import yingxiong from './components/vue/yingxiong.vue';
 4 
 5 const routers = [
 6     {
 7         path: '/langren',
 8         component: langren
 9     },
10     {
11         path: '/sanguo',
12         component: sanguo
13     },
14     {
15         path: '/yingxiong',
16         component: yingxiong
17     }
18 ];
19 export default routers;

 

 

(5)content.vue

 1 <template>
 2     <div class="content"><p>我是content！</p></div>
 3 </template>
 4 
 5 <script type="text/ecmascript-6">
 6     export default {};
 7 </script>
 8 
 9 <style lang="stylus" rel="stylesheet/stylus">
10     .content
11         height:100%
12         background:blue
13         flex:1
14         display:flex;
15         justify-content:center
16         align-items:center
17 </style>

langren.vue / sanguo.vue / yingxiong.vue 代碼和這個同樣只是顏色和p中字段改了下。

 

主要代碼就這些了。

 

5.另外寫一下主要遇到的報錯以及解決方法

（1）因爲是用來es6的語法，因此要遵循它 的一些語法規則，因此有的代碼最後要多一行空行，有的要加分號，有的要加空格，根據報錯來進行更改

（2）semi//indent//no-tabs報錯，在.eslintrc.js更改代碼以下，主要添加了最後幾行。

 1 // http://eslint.org/docs/user-guide/configuring
 2 
 3 module.exports = {
 4   root: true,
 5   parser: 'babel-eslint',
 6   parserOptions: {
 7     sourceType: 'module'
 8   },
 9   env: {
10     browser: true,
11   },
12   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
13   extends: 'standard',
14   // required to lint *.vue files
15   plugins: [
16     'html'
17   ],
18   // add your custom rules here
19   'rules': {
20     // allow paren-less arrow functions
21     'arrow-parens': 0,
22     // allow async-await
23     'generator-star-spacing': 0,
24     // allow debugger during development
25     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
26     'semi': ['error', 'always'],
27     'indent': 0,
28     'space-before-function-paren': 0,
29     "no-tabs":"off"
30   }
31 }

 

 

大概就這些，還有的之後再更改。

 

最後因爲初入前端行業，可能有不少不對的地方，歡迎你們指正，我會盡快改寫。