Vue-Cli 4.x目录结构学习总结
Vue-Cli 4.x目录结构学习总结说明一、目录结构二、项目执行顺序详解(1)main.js(2)App.vue三、总结说明更新时间:2020/7/15 10:52,更新了整体内容Vue-Cli个人感觉对新手并不友好,本人在学习的过程的真的学得一脸懵逼,尤其是它的目录结构,现在在此做个学习记录。本文会持续更新,不断地扩充本文仅为记录学习轨迹,如有侵权,联系删除一、目录结构这里直接给出Vue-Cl
Vue-Cli 4.x目录结构学习总结
说明
更新时间:2020/7/15 10:52,更新了整体内容
Vue-Cli个人感觉对新手并不友好,本人在学习的过程的真的学得一脸懵逼,尤其是它的目录结构,现在在此做个学习记录。本文会持续更新,不断地扩充
本文仅为记录学习轨迹,如有侵权,联系删除
一、目录结构
这里直接给出Vue-Cli 4.x的目录结构,为什么要强调4.x,因为它的目录结构跟3或者2还是有些区别,下面可以具体看一下
先简单介绍一下目录
目录 | 说明 |
---|---|
node_modules | 第三方依赖,我们安装的各种依赖都在个文件件里面 |
public | 存放公共资源的地方,里面有一个index.html |
src | 这个是重点,我们的源码以及开发的静态资源等都在里面 |
src/assets | 静态资源,css、img、js、font等 |
src/compoments | 自定义的公共组件 |
src/router | 路由配置,用于页面的跳转配置 |
src/views | 视图组件 |
src/store | 是vuex的文件,主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。 |
App.vue | 首页组件(默认组件),也叫根组件 |
main.js | 入口文件,一切的入口 |
.browserslistrc | 配置使用CSS兼容性插件的使用范围 |
.eslintrc.js | 配置ESLint |
babel.config.js | 使用一些预设 |
package.json | 项目描述既依赖 |
package-lock.json | 版本管理使用的文件 |
二、项目执行顺序详解
这里必须要明确一点,在vue里面,一切皆组件!!!一切皆组件!!!一切皆组件!!!,特地强调一下这一点,vue的开发也是组件化的开发,这跟传统的html页面完全不一样,还有就是基本开发都是在src文件夹下面的,所以src是核心。
(1)main.js
首先来看src下的main.js,这个是主入口
浏览器一开始加载就是加载main.js,其中里面通过import的方式引入了各种资源,然后新建了一个vue实例,这个是核心
new Vue({
router, //注册路由
store, //引入store
render: h => h(App) //渲染函数
}).$mount('#app') //手动挂载到id为#app的地方
其中,router和store可以不用去看,重点在render和$mount,先来看render
//这是ES6的箭头函数的写法,可以进入一部化简为下面的写法
render: h => h(App)
||
//可以看到其实就是一个函数,这个函数用来渲染组件(App.vue)的,h()里面可以传入任意想渲染的组件
render (h){
return h(App);
}
App.vue组件
总之记住一句话,render: h => h(App) 是用来渲染组件的,h()里面可以传入任意想渲染的组件,然后是$mount(’#app’),这个是挂载数据用的,将组件挂载到id为#app的地方,主要在public下的index.html,其中< div id=“app”>将会被组件替换掉,即所谓的挂载。
简单的总结:
通俗的来讲,新建vue实例的那段代码就是将App.vue下的< template>< /template>中间的html代码渲染完之后替代public下的index.html中id为app的html片段,怎么证明呢,我们可以试着自己写一个测试组件,并且让它渲染我们写的测试组件,不要渲染根组件
运行结果
可以看到测试组件TestComponents.vue下的< template>< /template>中间的html代码渲染完之后替代public下的index.html中id为app的html片段
(2)App.vue
App.vue是项目的根组件,所以项目一加载就会通过main.js渲染并挂载App.vue,查看App.vue的代码发现其实跟传统的html差不了多少,都是html+css+js,那么又一个问题,页面跳转怎么搞,这就需要用到页面路由router配置,可以看到App.vue里面引用了< router-view/>路由
< router-view/>对应的是router下的index.js,里面可以配置访问路径和路径对应的组件
运行结果
这个页面对应的是App.vue根组件,然后又因为http://localhost:8080/对应路由的Home组件,所以又将Home组件渲染了来,即上面的截图所展示的那样。如果在访问路径为http://localhost:8080/about则会跳转到About组件。
三、总结
总的来说Vue-Cli对新手来说确实不友好,因为里面用到了前端react框架的知识,同时还需要ES6的知识,除此之外还需要保证前端基础扎实才行,像js等。在学习的时候我自己也是去快速恶补了一下ES6的知识,ES6的知识总结我也有通过博文的方式做了相应的记录,有兴趣的可以看一下我的ES6知识总结的博文。
更多推荐
所有评论(0)