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

Posted 风雨后见彩虹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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_project\\vuedemo\\src\'
 @ ./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 构建项目实战(三)配置路由,整俩页面先

以上是关于Vue2+VueRouter2+webpack 构建项目实战:配置路由,运行页面的主要内容,如果未能解决你的问题,请参考以下文章

Vue2+VueRouter2+webpack 构建项目实战:配置子路由

Vue2+VueRouter2+webpack 构建项目实战:接通api,渲染列表

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

Vue2+VueRouter2+Webpack+Axios 构建项目实战配置环境及构建初始项目

Vue 2 + VueRouter 2 + Laravel 5.3 - Webpack(运行时 x 独立构建问题)

vue2+webpack怎样分环境打包