Vue-cli3的项目复盘01

再次回顾一下,vue的基本使用;
从public的index.html静态文件开始,到app.vue 再到index.js为一个框架;

谈谈我对它的理解吧 首先,index.html–index.js–app.vue 成为一个组件的过程(绑定id,)

有index.js 绑定index.html new一个Vue的实例,再把,app.vue 引入的一个过程;(本来利用思想是在直接在html中插入script标签即可完成,但是内容太大了,所以就将其抽离出来,(分裂)),所以就干脆生成一个js文件但是一个js 文件还是不够,就继续抽离出来,干脆为Vue文件,在就形成了一个组件的思想,不断的将大的文件抽离成一个小的组件,
.vue文件就是一个一个的模板组件,到时需要用的时候就将其引入,
所以,每个.vue文件写好模板之后,需要使用 export default ,无命名导入,(想写什么字母就写什么字母,来导入)

值得一说的是,为了开发的快捷性,一些前人的写好的库就可以直接引入为自己所用,(其实就是写好的一些模板),所以我们就在index.js中引用,满足最基本的使用===>vue,app.vue,router, store(vuex) 引用玩我们需要使用,还需vue.use();
这里use是对已经写好,从npm安装的组件,
而我们自己写的就直接在components:{} 注册使用即可

而由于vuex.vue-router ,这种文件写在index.js还是太大了,所以又分裂出了

store与router以及network三个巨头文件夹

(vuex, vue-router,axios),

而作为root的index.js 直接将他们的文件引入即可, 这样大大减少了其体积,
为了每个页面可以尽量小的展示.而且富有逻辑,就是这样一层一层的嵌套引入(这里从index.js分离出去的js文件还是需要将vue引入的)但是在使用use axios 的时候不再是用vue.use() 这里需要使用$axios变成全局组件 (一般是按需引入)

是全局引入,还是按需引入,就看开发要求了

关于use(): (有时间还是需要另开一个贴来解释)

https://www.jianshu.com/p/89a05706917a

---

此时一个项目的主要文件结构,大致好了,
对于一些还需使用的js可以在建一个common文件存放;静态资源文件放在assets

最后就是我们重中之重的components文件了,里面放着我们一个一个的组件,但是一个文件还是不够放啊,所以在components中在此分裂为基础可在任意项目复用的common与content两个文件夹,(这里看个人的理解来进行分类即可)

而这里content可以在进行另一个更高层次的封装, 即是各种视图的整体结构页面,
这个页面放在views的文件中,一般有一个主要界面即可在里面在建立几个文件夹
一般是 home/ detail/ profile / main/ 等等文件夹,一个为主页面,在添加一些childrencomponents

这里除了目录结构我想说的,另一个就是组件的之间的一些交互的各种方法,以及为什么这么做的思路
我们再次看向组件的吧,

一个组件的基本结构为 template/ script /style

一般的组件style 加上scope 作用即可,没有什么要说的 当然引用基础的css样式 要在style 使用@import " "引入即可;

对于template 就是html 的样式 ,这里动态处理 就需要 vue 的基础语法, v-if v-on v-bind ,对于表单的交互v-model 来进行双向数据的使用,: @ 语法糖;(这里留白)

再者就是vue中的重中之重了script ,本身落于 javascript 上了
在index.js 中new Vue( ) 一个新的对象;
el:用来绑定id ,现在使用$mount(’#app’)挂载 , 而一般的组件即是没有element了
使用name: , 这个name就像一个身份,是个非必选项,但是有时会有奇效,所以一般吧这个当做组件名来引入导出; keep-alive exclude /include="name"
---------------------------------------------------(name的作用?)
conponents:{} 将引入的组件进行注册,这里注册是的名字,可以与组件名一样,可以直接简写一个即可;
之后再就是响应式的数据的中心了 这里的data只能使用返回一个函数,
data(){ },

-------(留白,见我其他博客)

在然后就是computed:{ }与methods:{ } 来定义方法了,这两者的差别,(留白)
其中的方法又有 生命周期函数 以及computed 的getter 与setter 方法;

当需要父组件需要传递数据的时候就需要

props:{
	xxx:{
		type: ' ' ,  //基本数据类型与引用数据类型
		default(){
			return{
			}
		}
	}

}

然后子组件要向父组件传递怎么办呢, 我们这是就需自定义事件了
使用.$emit(’’,’’),传递自定义的事件与参数了,(这里还是需要加强练习,有一些生疏)
以及actived(){} , 以及deactived(){} 来进行保持状态 的函数
还有watched:{} 监听属性

---

如何调用一个组件中的方法: 可以使用$children,以及$refs. 来找到其方法
那么问题来了:子组件可以调用父组件中的方法吗?

组件之间的协调 ,以及滚动,图片的加载问题,性能优化的问题,引入的时候组件的简写,以及src下的引入 加入(~)

这个东西发现不好写啊,知识体系好多,不好一次性展开说;

可能还需要说的就是,如何来处理数据了,这里前端有交互的重中之重,
数据的交互与处理,就涉及到了Vuex 处理公共组件的状态,以及路由router
,以及axios的东西了
首先面对的问题就是跨域的问题了,

---