入坑Vue的学习笔记-第三天

昨天使用vue的模板工具

veu init webpack my-app

搭建了一个模板项目 my-app，在这个模板项目的基础之上，就可以开发自己的vue项目了。

在这里记录一下，使用vue模板项目的调用过程，

my-app
|
|--build  // 这是编译的目录
|-config // 这是配置服务器的目录
|  |
|  ---index.js // 可以在这个文件里修改访问的端口，默认是8080可能会冲突
|--node_moduls // nodejs的依赖包
|--src         // 主目录，咱们的代码都在这里
|  |
|  ----main.js // 主js入口，加载所有的资源
|  |
|  ----App.vue // 主Vue页面，相当于首页面
|  |
|  ----assets  // 存放图片资源
|  |
|  ----components // 这是组件目录，咱们写的vue代码都在这个文件夹里
|  |
|  ----router  // 这是路由目录，使用的是官方的路由
|
|--static     // 这是静态资源的目录
|--index.html // 程序的主入口，所有的vue都是挂载在这个html中

调用的路径是 

main.js 初始化开始 --> App.vue 主页面视图 --> router/index.js 在路由中加载咱们的视图

在主页面 App.vue中使用

<router-view></router-view>

来展示咱们写的vue页面，显示不同的页面就是将背后绑定的url，根据路由替换即可。

可以是有多个<router-view>来展示不同的页面，在做后台网站时，可以将整个页面分成3个部分一起展示不同的部分，非常方便。

转载于:https://my.oschina.net/u/3631947/blog/1845984