VUE五

作者: 殊子墨 | 来源:发表于2017-10-22 20:51 被阅读0次

    按之前的节奏到现在,项目跑不起来,接着调整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

    相关文章

      网友评论

          本文标题:VUE五

          本文链接:https://www.haomeiwen.com/subject/lzynuxtx.html