前台vue的使用简单小结

时间:2022-05-24 05:15:27

前台vue的使用简单小结

        

本项目要求:
安装有node.js 6.0以及以上
安装npm
使用vue.js官方安装方法初始化项目
npm install
安装VueResurce:npm install vue-resource
安装element-ui:npm i element-ui -S

 

 

说明:
一个基本的前端项目除了基本的HTML/Css/JS等外,不同的框架的组成部分都需要包括以下几部分:
1.UI模块 2.路由模块 3.Http模块 4.状态模块

本项目是用vue-cli + webpack创建项目
项目的代码写在目录下的src目录内
项目中已经用了VueRute和VueResurce两个插件来管理前端路由以及前端的Http请求。

注:
从整个项目来讲,除了上面两个插件外,还需要以下几个方面的插件
1.UI界面框架,暂时在PC端选用element-ui或是vueStrap或是iview,keen-ui,移动端待定,可能会考虑兼容微信选用Vux,不过mint-ui、vue-material也在考虑之内
2.本地存储
3.前端状态管理,会使用最为成熟的vuex
4.关于移动端的开发,我们将会是使用基于Vue或是同一系列的前端框架。在当前流行的框架中微信公众号开源了他们的WeUI,但是它不是基于Vue的,
如果我们有前端项目不是Vue框架而是JQuery框架,这是个不错的选择。另一个是Weex,这是阿里开源的移动前端库,已经在全套的阿里系APP上使用了,
有人说它里面对阿里的业务有点想引入,这个看需要了,但我想基础框架应当还是不错的。另外有在PC前端上开源做的很好的饿了么团队的移动端前端
开源项目mint-ui,它是一套组件库,引用很方便,流行度很高。另外一个是国内的个人项目Vux,它的组件更丰富,结合了WeUI的很多基础组件,在微信公众号
等场景下使用很多。最后还有一个国外项目Vue-material,流行度很高,组件丰富,但没去查它是由哪个公司或个人运维的。
从国内流行度上讲,我们的前端框架应当从Weex,Vux,Mint-ui三者中选一个。不过Weex是一个具备混合开发能力的大体系,学习曲线可能会高一点点。但是Weex和
其它两个相比,明显在层次上要高一级,事实上,是可以同时使用这三者的,因为Mint-ui是一个组件库,而Vux也是一个组件库,这两个才是有重合部分的。但
它们都是基于Vue的,所以可以共同,而Weex是一种基于Vue实现现的跨平台环境,因此一种合理的设想是以Weex为基础,来实现App的跨平台以及和源生代码的融合
在开发组件上,可以适当引用Vux和mint-ui.不过事实上Weex改变了很多Vue的基本语法,致使原有的Vue项目很难直接使用。因此想将三者融合,可能并不好处理。
Weex事实上,从趋势来看,它已经正在向着跳出Vue而自成体系的方向发展。如果准备做Vue项目,可能从一开始就要想好是否要采用Weex。
Weex其实应当和Ract Native是同一个物种。其它类似的还有Wex5,ApiCloud,DCloud,HBuilder等。

 

/*
Vue的基本知识点说明:
一个典型的Vue实例包括了以下的基本结构:
Tips:Vue(parma) 是一个构造函数。它的参数是一个js对像。这个js对像就是下面讲的Vue对像实例。
var vm=new Vue(
{
el:'这里写的是Vue实例挂载的容器元素(Html元素,一般是一个Div)的Id。',
template:'这里写的是这个实例的HTML模板,这是一个HTML片段',
data:'Vue实例里定义的数据。一般也定义为一个js对像。但对像中只有数据',
watch: 'Vue的数据监视器功能。一般会定义一个js对像,其成员格式是定义一个和要监视的数据同名的functon。例如{myData:function(){};}',
methods:'Vue实例定义的方法集合。一般也会定义为一个js对像。其成员按需要定义function',
computed:'Vue的计算属性。效果有点像watch,但是在对数据成员的处理上写法更简洁,效率更好(它们之间的区别可以看官方文档)。它默认定义了getter,你可依据需要自行定义setter',
components:'Vue对像的子组件清单。清单最好是一个js数组,它的每一项是一个Vue对像或是一个Vew.component对像',

//Tips:以下三个是定义组件时对外公开的重要接口
events:'',
slot:'',
props:'自定义组件的自定义属性,可以像html元素的属性一样使用。这里通常会定义为一个js数组以便定义多个属性',

//Tips:Vue实例中的各成员一般定义为一个js对像不是意味着必须定义为一个js对像。它完合可以按js的语法直接定义一个数据或是function;
//Tips:Vue实例的构造函数中定义的这个对像要求的成员不都是必须的。可按需要来写;

}
);


Tips:
Vue组件的生命周期共会触发以下几个函数
create:
beforeCompile:
compiled:
ready:
beforeDestroy:
destoryed:


Vue在Html上的一些基本知识点:
Tips:这部分的知识在官方文档内叫做模板语法。
V-标识:在Html的元素属性上要应用Vue,必须有V-标识前缀的属性修饰。
常用的标识(它修是Vue预定义好的指令):v-on(可缩写为@),v-if,v-bind(可缩写为:),v-html,v-for,v-model,v-show
*/

相关文章