您好,登錄后才能下訂單哦!
vue.js學(xué)習(xí) 踩坑第一步
1.首先安裝vue-cli腳手架
不多贅述,主要參考 Vue 爬坑之路(一)—— 使用 vue-cli 搭建項(xiàng)目
2.項(xiàng)目呈現(xiàn)效果
項(xiàng)目呈現(xiàn)網(wǎng)址:www.zhoupeng520.cn/index.html
項(xiàng)目中主要用了Flex布局,以及viewport相關(guān)知識(shí),已達(dá)到適應(yīng)各終端屏幕的目的
3.項(xiàng)目主要目錄
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">三國(guó)殺</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 //這個(gè)就是路由的配置
這個(gè)可以直接寫進(jìn)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;
也可以直接寫一個(gè)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
代碼和這個(gè)一樣只是顏色和p中字段改了下。
主要代碼就這些了。
5.另外寫一下主要遇到的報(bào)錯(cuò)以及解決方法
(1)由于是用來es6的語法,所以要遵循它 的一些語法規(guī)則,所以有的代碼最后要多一行空行,有的要加分號(hào),有的要加空格,根據(jù)報(bào)錯(cuò)來進(jìn)行更改
(2)semi//indent//no-tabs報(bào)錯(cuò),在.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" } }
總結(jié)
以上所述是小編給大家介紹的基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。