在编辑器里，打开刚才创建的 vue 项目 .. 在桌面上，找到这个 vue-wordpress ..

项目根目录的下面有个 index.html .. 这个是项目的页面.. 注意在这个文档的 body 里面，有个带 app id 的 div 元素 .. vue 会把应用挂载到这个元素上显示 ..

项目的主要代码是在 src 目录的下面 .. main.js ，它是项目的一个入口文件 .. 这里先导入了 vue ..

App 是个自定义的 Vue 组件 .. 这个位置就是 src 下面的这个 App.vue .. 这个是一个单文件组件 ..

组件的 template 里的东西就是组件的模板 .. 组件的脚本是在 script 里面 .. 下面的 style 里的东西是组件里的样式 ..

在这个组件的模板里面，用了一个 router-view .. 意思就是这里交给 Vue 的路由来表示 ..

再回到 main.js ..

这个 router 就是定义好的路由 ..

下面创建了一个 Vue 实例，把应用挂载到了页面上带 app 这个 id 的元素上 .. 显示的是 App 这个组件 ..

这里把应用的路由也交给了 Vue ..

这个路由的位置是在 src 下面的 router 这个目录的下面 .. 打开 index.js

路由用到了 vue-router 这个包 .. 在创建项目的时候我们已经安装了这个包 ..

HelloWorld 是个自定义的 Vue 组件 .. 导入这个组件的时候，组件的位置这里用了一个 @ 符号 .. 它是在 webpack 的配置里定义的一个别名 ..

这个配置是在项目的 build .. webpack.base.conf.js 这里 .. 在 resolve 下面，有个 @ .. 它的值表示的就是项目的 src 这个目录的位置 ..

所以在这个 router 目录下的 index.js 里面，可以用 @ 符号 .. 后面再加上 src 目录下面的具体的某个目录 .. 这里就是导入了项目 src 目录下的 components 目录里面定义的 HelloWorld 这个组件 ..

Vue.use，设置了 Vue 应用的一个插件，就是 Vue 的路由插件 ..

下面导出了定义的路由 ..

这里有一个路由，path，也就是路由的地址是 / ，表示项目的根 .. 名字是 HellowWorld .. 使用的组件就是上面导入的这个 HelloWorld ..

以后在项目里需要其它的路由，可以在这里去添加..