vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

时间:2022-10-25 14:29:28

vue.js学习 踩坑第一步

1.首先安装vue-cli脚手架

不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

2.项目呈现效果

vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

项目呈现网址:www.zhoupeng520.cn/index.html

项目中主要用了Flex布局,以及viewport相关知识,已达到适应各终端屏幕的目的

3.项目主要目录

vue.js 踩坑第一步 利用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"
}
}
 
大概就这些,还有的以后再更改。
 
最后由于初入前端行业,可能有很多不对的地方,欢迎大家指正,我会尽快改写。