Vue项目结构分析
Vue项目结构如下:
项目结构重点在src文件夹:
assets——静态资源,如css,js
components——公共组件
router——路由文件
App.vue——根组件
main.js——入口文件
1.index.html
index.html如其他html一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充。
index.html2.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.vue3.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.htmlmain.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查看: