Vue项目结构分析

转载:https://www.jianshu.com/p/f4e95663e10d

作者:我的木
链接:https://www.jianshu.com/p/f4e95663e10d
来源:简书

Vue项目结构如下:

 

项目结构

重点在src文件夹:

assets——静态资源,如css,js

components——公共组件

router——路由文件

App.vue——根组件

main.js——入口文件

1.index.html

index.html如其他html一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充。

 

index.html

2.App.vue

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

1) template

其中模板只能包含一个父节点,<router-view/>为<router-view></router-view>的简写,是子路由视图,后面的路由页面都显示在此处。

2) script

vue通常用es6来写,用export default导出,其下面可以包含数据data,生命周期(mounted等),方法(methods)等。

3) style

样式通过style标签<style></style>包裹,默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加scoped,<style scoped></style>

 

App.vue

3.main.js

main.js主要是引入vue框架,根组件及路由设置,并且定义vue实例。

 

main.js

第9行的router相当于router:router,为ES6写法,在对象中,如果键值对一样的话,可以简写为一个;

components: { App }引入根组件App.vue,App即App:App;

template: '<App/>' 是简写形式,等价于 <App></App>。

4.router

router下的index.js文件中的routes定义了路径为'/'的路由,该路由对应的页面是HelloWorld组件。

 

router


整个页面渲染过程:

访问http://localhost:8080/显示的就是index.html页面,index.html原本只有一个根结点id="app"。

 

index.html

main.js入口文件引入根组件App。

main.js

前边已说过,根组件App中,<router-view/>是子路由视图,后面的路由页面都显示在此处,访问http://localhost:8080/,路由为‘/’,根据路由文件index.js,所以引入HelloWorld组件。

main.js中的template: '<App/>'在html页面中添加<App></App>模板,模板内容即为HelloWorld组件内容。

 

App.vue

 

router

HelloWorld.vue

最后渲染出的html结构如下:

html结构

浏览器中F12用vue-devtools查看:

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值