前台vue的使用简单小结

前台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
*/