1扬蕊、構(gòu)建路由頁面組件
在src/components/下 創(chuàng)建 項目所需的頁面 暫時不寫什么內(nèi)容
比如 home.vue
<template>
<div class="home">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
msg: 'Home'
}
}
}
</script>
2、建立Vue-Router路由配置
在src/router/index.js 中
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import NotFound from '@/views/NotFound'
Vue.use(VueRouter)
const routes = [{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/',
redirect: '/home'
},
{
path: '*',
component: NotFound
}]
export default routes
在src/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 FastClick from 'fastclick'
import App from './App'
import VueRouter from 'vue-router'
import routes from './router'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
FastClick.attach(document.body)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app-box')
3丹擎、配置入口（默認(rèn)生成尾抑，已配置好）
根目錄 app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
npm run dev
4歇父、遇到的問題
錯誤信息：
? http://eslint.org/docs/rules/no-mixed-spaces-and-tabs
Mixed spaces and tabs
/Users/derek/Documents/myProject/vue/firstVue/src/App.vue:13:2
message: 'Hello Vue!'
^
? http://eslint.org/docs/rules/no-tabs
Unexpected tab character
/Users/derek/Documents/myProject/vue/firstVue/src/App.vue:14:2
}
錯誤原因：因為你設(shè)置了eslint，安裝時Use ESLint to lint your code? (Y/n)
如果你想有良好的規(guī)范再愈，其實錯誤已經(jīng)很清晰榜苫，大多數(shù)就是縮進(jìn)不規(guī)范，分號不需要等原因翎冲，很容易解決的垂睬。寫多了就成習(xí)慣了。
解決方案：找到build/webpack.base.conf.js
刪掉下面代碼:
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
