准备项目《 Vue.js：路由》

现在我们要去学习 Vuejs 的 Router ，也就是路由 .. 如果你一直跟着宁皓网的 Vuejs 课程，应该有了一个简单的 Vue 项目在你的电脑上 .. 没有的话我们可以现在去创建一个 ..

打开命令行工具 .. 进入到桌面 .. 克隆一下小仓库 .. git@github.com:ninghao/vue-demo ..

再进入到这个目录的下面 ..

然后用编辑器打开这个项目 .. 这里我用的是 Atom 编辑器 ..

我们可以创建一个新的分支，在上面，去练习一下 Vue 的 Router .. 分支的名字是 vue-router

一会儿我会把这个分支推送到 ninghao 的 vue-demo 里面，到时候你可以在这个仓库，查看 vue-demo 分支里的东西 .. 完成一个视频我都会做一次提交 ..

我们的项目非常简单，因为课程的主要目的是理解 vue router .. 这里我需要一个叫 browser-sync 的工具在本地创建一个服务器 ..

如果系统上没安装这个工具，可以用 npm 去安装一下 .. npm install -g browser-sync

完成以后执行一下 browser-sync start --server --no-notify --files ，监视一些文件的变化 .. index.html 还有 index.js

回到项目 .. 可以删除掉根目录下的这个 vue.js .. 一会儿找个 cdn 上的 vue.js 用一下 .. 打开 index.js .. 删除掉里面的东西 ..

const app ，创建一个 Vue 实例 .. 设置一下 el ，指定应用挂载的元素 .. 这里就是页面上带 app 这个 id 的元素 ..

再打开 index.html .. 修改一下 vue 脚本的链接 .. 直接使用一个在 cdn 上的 vue.js ...

这里我们还需要一个 vue-router.js ..

在上面再嵌入一个 css 框架 .. 这个框架是 semantic ui .. 在宁皓网你可以找到这个框架相关的课程 ..

然后再清理一下这个 app 元素里的东西 ...

准备项目