Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
目录索引
《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》
《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》
《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》
《Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表》
《Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由》
《Vue2+VueRouter2+webpack 构建项目实战(六)修复代码并通过验证,另发布代码》
制作模板文件
通过前面的两篇博文的学习,我们已经建立好了一个项目。问题是,我们还没有开始制作页面。下面,我们要来做页面了。
我们还是利用 http://cnodejs.org/api 这里公开的api
来做项目。不过本章节不涉及调用接口等内容。这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面。列表页面有分页等,内容页面展示。
因此,我们需要两个模板文件。
我们在src/page
目录下面新建两个文件,分别是index.vue
和content.vue
代码分别是
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
这里,我们只要先把基础的内容写好就是了。我就用两个单词代表我们的页面。
安装VueRouter2
接下来,我们需要安装VueRouter2
到我们的项目。参考文档见VueRouter2安装文档
在终端中,我们把当前目录跳转到我们的项目,然后执行npm install vue-router -D
命令。如下:
- 1
- 2
- 1
- 2
我们查阅文档,会知道,命令是npm install vue-router
,那为什么我后面加一个-D
的参数呢?这个是为了让我们的安装的vue-router
这个插件写入到package.json
配置文件中。以便于下次再其他地方安装的时候,可以一并安装进去,否则,还得再安装一遍。
配置 main.js
通过在终端中执行命令,我们已经安装好路由了。下面,我们需要在src/main.js
文件中进行配置。
整理代码如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
上面的配置文件中的一部分在官方文档里面也找不到,这是我整理出来的,不用管,全部复制过去吧!
配置 App.vue
入口文件肯定和默认的不一样,我的配置文件如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
就只是一个单纯的路由入口页面。比较特殊的是,下面我 import
了一个scss
文件。我喜欢把css
独立出来,而不是写在一起,所以我之前在src
目录下面建立了一个style
的文件,里面放scss
文件。
我建议你先跟着我走,回头自己根据自己的习惯调整。
注:这里 引入的scss 按前两个来,有点问题,应该改为@import"./style/scss/style";
配置 routes.js
下面我们配置路由文件。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
如上,我们引用模板,然后再配置路由,这里,我们没有涉及自路由的内容,我们先这样配置上。然后,我们就可以在终端里面输入 npm run dev
来看我们做的效果了。
配置运行端口
如果没有跑起来,提示下面的错误,就表明默认的端口8080
被占用了。一般不会被占用,但是也有可能被占用。所以,我们这边来学习一下如何配置运行端口。
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
打开项目根目录下/config/index.js
配置文件,找到
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
如上,把 port
后面的端口改成其他数字,如9000
即可。