• Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面


    制作.vue模板文件

    通过前面的两篇博文的学习,我们已经建立好了一个项目。问题是,我们还没有开始制作页面。下面,我们要来做页面了。

    我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面。列表页面有分页等,内容页面展示。

    因此,我们需要两个模板文件。

    我们在src/page目录下面新建两个文件,分别是index.vue和content.vue

    index.vue代码:

    <template>
        <div>这是首页</div>
    </template>

    content.vue代码:

    <template>
      <div>这是内容页</div>
    </template> 

    配置路由routes.js

    在src目录下的config文件夹下新增routes.js文件代码如下:

    import Vue from 'vue'
    import Router from 'vue-router'
    // 引用模板
    import index from '../page/index.vue'
    import content from '../page/content.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
             component: index
        },
        {
            path: '/content',
            component: content
          }
      ]
    })

    配置main.js

    注意:变动部分为引入路由配置文件路径:

    import Vue from 'vue'
    import App from './App'
    import router from './router/routes.js'
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })

    配置App.vue

    <template>
      <div id="app">
           <div class="nav-list">
          <router-link class="nav-item" to="/">首页</router-link>
          <router-link class="nav-item" to="/content">内容页</router-link>
        </div>
        <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>

    关闭格式检查插件eslint

    当我们npm run dev的时候页面运行后出现如图所示:

    然后去查看错误发现大部分是语法问题引起的,所以打开根目录下面的/build/webpack.base.conf.js文件,注释掉如下代码:

    {
        test: /.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
    }

    再次运行npm run dev 就会在浏览器出现如图所示的界面:

    点击内容直接进入内容页界面。
    到这儿页面就运行起来了,也就可以其它的开发了。

    扩展:使用sass写样式

    如果我们在App.vue中导入了sass,如:
    那么App.vue代码如下:

    <template>
      <div id="app">
           <div class="nav-list">
          <router-link class="nav-item" to="/">首页</router-link>
          <router-link class="nav-item" to="/content">内容页</router-link>
        </div>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app'
    }
    </script>
    
    <style lang="scss">
      @import "./style/style";
    </style>

    这样以来页面就会报错,因为没有安装sass-loader,如下错误:

    ERROR in ./src/App.vue
    Module not found: Error: Can't resolve 'sass-loader' in 'D:vue_test_projectvuedemosrc'
     @ ./src/App.vue 4:2-324
     @ ./src/main.js
     @ multi ./build/dev-client ./src/main.js

    需要安装安装sass-loader以及node-sass插件才能正常运行。依次执行下面的指令:

    npm install sass-loader -D
    npm install node-sass -D

    这样页面就顺利运行起来了。
    结果如图所示:

    参考

    Vue2+VueRouter2+webpack+vue-cil构建完整项目实例(附:详细步骤截图)
    Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先

  • 相关阅读:
    存储过程中Like没有数据?
    鼠标放上图片移动,字体移动
    Excel
    参数无效。区域性ID2155(0X086B)不是受支持的区域性
    JVM指令集及各指令的详细使用说明[转的]
    BTrace使用简介
    ST表
    树剖模板
    AjaxControlToolkit中的CalendarExtender被遮挡及日期格式本地化解决方法
    Using Beyond Compare with TFS
  • 原文地址:https://www.cnblogs.com/moqiutao/p/7283090.html
Copyright © 2020-2023  润新知