标签：实战 segment project csdn style 样式 导入 for 就会
通过前面的两篇博文的学习，我们已经建立好了一个项目。问题是，我们还没有开始制作页面。下面，我们要来做页面了。
我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。
因此，我们需要两个模板文件。
我们在src/page目录下面新建两个文件，分别是index.vue和content.vue
index.vue代码：
<template> <div>这是首页</div> </template>
content.vue代码：
<template> <div>这是内容页</div> </template>
在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 } ] })
注意：变动部分为引入路由配置文件路径：
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 } })
<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>
当我们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 就会在浏览器出现如图所示的界面：
点击内容直接进入内容页界面。
到这儿页面就运行起来了，也就可以其它的开发了。
如果我们在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 构建项目实战（三）：配置路由，运行页面
标签：实战 segment project csdn style 样式 导入 for 就会
原文地址：http://www.cnblogs.com/moqiutao/p/7283090.html
