按之前的节奏到现在,项目跑不起来,接着调整App.vue和路由
打开App.vue文件,在template节把引用已经删除的asset文件内容部分的代码删除,写如下:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss">
@import "./style/style";
</style>
样式,都将从 src/style/style.scss 这个文件中引用,因此,在 App.vue 这个文件中,直接引用 ./style/style 即可。
scss 中,引用文件,是可以省略 .scss 这个后缀名的。
并且,某个不用编译成 css 的文件,文件命名为 _xxx.scss
调整好了 App.vue 文件后,因为使用了 scss 文件预编译,所以需要安装两个支持 scss 的 npm 包。
npm install sass-loader -D
npm install node-sass -D
在 page 文件夹下面有建立了两个空文本文件 index.vue 和 content.vue 文件,是准备用来放列表和内容的。
填写一点基础内容在里面。
index.vue
<template>
<div>index page</div>
</template>
content.vue
<template>
<div>content page</div>
</template>
项目还是跑不起来,运行 npm run dev 还是会出错。还要配置路由:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
因为Hello组件已经被删除,所以报错,如下改动:
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index'
import Content from '@/page/content'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Index
}, {
path: '/content/:id',
component: Content
}
]
})
命令npm run dev
,项目动起来了,如果还是不行请再仔细检查项目是否哪里出错。
原文:http://blog.csdn.net/FungLeo/article/details/77600798
网友评论