1、构建路由页面组件
在src/components/下 创建 项目所需的页面 暂时不写什么内容
比如 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、配置入口（默认生成，已配置好）
根目录 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
}
错误原因：因为你设置了eslint，安装时Use ESLint to lint your code? (Y/n)
如果你想有良好的规范，其实错误已经很清晰，大多数就是缩进不规范，分号不需要等原因，很容易解决的。写多了就成习惯了。
解决方案：找到build/webpack.base.conf.js
删掉下面代码:
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
