昨天使用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个部分一起展示不同的部分,非常方便。