抑或都亟需用到这么些UI框架的组件,并进而领会什么通过Vue.js来打造一个中大型的前端项目

本身是一个刚结业三个月多的前端小白,进企业做事的时候,由于公司的前端技术还没定下来,所以在做项目标时候自己是自由发挥。由于vue具有上心灵,开发效用高的特点,所以,我在做项目时候,便拔取了vue作为技术栈,由于是率先次选取bootstrap加jQuery以外的技术栈,所以以下是在成功项目标进度中,对vue使用方面认识不到或不足的自省。

Vue.js作为当下最抢手最具前景的前端框架之一,其提供了一种扶助我们神速创设并开发前端项目的新的构思方式。本文意在救助我们认识Vue.js,精通Vue.js的成本流程,并进而精通什么通过Vue.js来创设一个中大型的前端项目,同时搞好相应的安插与优化办事。

1.首先,新手使用vue最广大的失误,就是DOM操作,而vue的双向数据绑定,恰恰让大家实际上不必要开展繁琐的DOM操作,大家只要求关爱数据层面就足以了。想想自己最开端获得input仍旧用哪些document.getElementById(‘id’).value那种,就觉着温馨很傻,明明只须求v-model绑定data就好了,唉~

文章将以PPT图片附加文字介绍的样式开展,不会涉嫌知识点的求实代码,点到完工。有趣味的同学可以查占星应的文档进行问询。

2.以为vue只好用来开发SPA。直到看到尤大神在虎扑上回答的:不必然做个连串就非得cli一个一家子桶,vue也不是为单页面而生的。我才了解,vue的选取方式,我唯有驾驭冰山一角,怎么着能灵活按照自己的必要使用支付,还需协调随后的多多成长。

Vue.js简介

图片 1

Vue.js简介

从上图的介绍中大家简单察觉Vue.js是一款轻量级的以多少驱动的前端JS框架,其和jQuery最大的不一样点在于jQuery通过操作DOM来改变页面的浮现,而Vue通过操作数据来贯彻页面的更新与显示。上面便是Vue数据驱动的概念模型:

图片 2

数据模型

Vue.js主要负责的是上图粉红色正方体ViewModel的部分,其在View层(即DOM层)与Model层(即JS逻辑层)之间通过ViewModel绑定了DOM
Listeners与Data Bingings八个相当于监听器的东西。

当View层的视图暴发改变时,Vue会通过DOM
Listeners来监听并改变Model层的数据。相反,当Model层的数量暴发变动时,其也会由此Data
Bingings来监听并更改View层的彰显。那样便完结了一个双向数据绑定的功效,也是Vue.js数据驱动的原理所在。

3.组件化思想。先河一开端,觉得人家的UI框架都写好了,就间接拿来用。当然如此做并不曾什么难题。不过,当我意识我每个页面大约都有几段同样的代码,或者都亟需用到这么些UI框架的零件,比如面包屑,比如导航菜单,那我干嘛不把那样UI框架做成独立的机件呢?

Vue实例

图片 3

Vue实例

在一个html文件中,大家一贯可以因而script标签引入Vue.js,然后就可以在页面里写Vue.js代码了。上图中大家经过new
Vue()打造了一个Vue的实例,在实例中,可以涵盖挂在要素(el),数据(data),模板(template),方法(methods)与生命周期钩子(created等)等选项。差其他实例选项拥有分歧的成效,如:

(1)el标志大家的Vue须要操作哪一个要素下的区域,’#demo’表示操作id为demo的要素下区域。
(2)data代表Vue 实例的数目对象,data 的属性可以响应数据的浮动。
(3)created意味着实例生命周期中开创达成的那一步,当实例已经创设已毕之后将调用其艺术。

4.路由懒加载。当自家的品类打包后,运行,初次加载慢的飞起。这让我很胃痛,那样光有开发进程有哪些用,用户体验肯定是不佳的。我查了下打包后的dist文件夹,我去,好几兆。所以,难道要自身再也采用任何技术栈再开发四回。当然是不容许了。在网上查了材料后,终于知道了路由懒加载那几个办法。使用路由懒加载后,webpack会把原先很大的js分解成三个体积较小的js,当大家运行加载行,它会按需加载,这样初次加载过长的难题便解决了。

Vue常用命令

图片 4

Vue常用命令

在Vue项目标付出中,大家利用的最多的应有就属Vue的下令了。通过Vue提供的常用命令,大家可以痛快淋漓地揭橥Vue数据驱动的雄强成效。以下便是图中常用命令的简约介绍:

(1)v-text: 用于更新绑定元素中的内容,类似于jQuery的text()方法
(2)v-html:
用于更新绑定元素中的html内容,类似于jQuery的html()方法
(3)v-if:
用于按照表明式的值的真伪条件渲染元素,若是上图P3为false则不会渲染P标签
(4)v-show: 用于根据表明式的值的真真假假条件�显示隐藏元素,切换元素的
display CSS 属性
(5)v-for:
用于遍历数据渲染元素或模板,如图中P6为[1,2,3]则会渲染3个P标签,内容逐条为1,2,3
(6)v-on: 用于在要素上绑定事件,图中在P标签上绑定了showP3的点击事件

有关更多的Vue指令可以查看Vue2.0文档,地址:https://vuefe.cn/api/\#指令

5.webpack。用到了vue全家桶,便少不了webpack。并不是,你npm run
build,就可以安心睡觉去。就比如我在应用video.js时就要求在webpack里面配备(那个搞了本人很久,头皮发麻)。webpack是个有力的东西,可以依照webpack做过多的事,比如,引入其余插件,把单页面改成多页面配置,给文件夹配置路径方便书写等等。但,不得不说,那些东西很难学,而且官网说实话对我而言写的并不通俗易懂,这个个插件表达文档就更别提了,能看懂的不到一半。当然也可能是我太菜。要想成长,webpack是自个儿随后必须攻下的困难。

Vue.js技术栈

图片 5

Vue.js技术栈

上述大家讲到可以直接在一个html页面里经过引入Vue.js来一直写Vue代码,不过如此的措施并不常用。因为假如大家的系列比较大,项目中会存在不少页面,一旦每个页面都引入一个Vue.js或者声爱他美个Vue实例,那样分外不便宜后期的护卫和代码的公用,也会存在实例名争辩的场所,所以大家须要用到Vue提供的技能栈来构建强大的前端项目。

除开Vue.js大家还亟需选取:

(1)vue-cli:Vue的脚手架工具,用于自动生成Vue项目标目录及文件。
(2)vue-router
Vue提供的前端路由工具,利用其我们落到实处页面的路由决定,局地刷新及按需加载,打造单页应用,完成上下端分离。
(3)vuex:Vue提供的场地管理工具,用于同一管理大家项目中各个数码的互相和重用,存储大家必要用到数量对象。
(4)ES6:Javascript的新本子,ECMAScript6的简称。利用ES6大家可以简化我们的JS代码,同时利用其提供的强有力功效来快捷已毕JS逻辑。
(5)NPM:node.js的包管理工具,用于同一管理大家前端项目中须要采取的包、插件、工具、命令等,便于开发和保安。
(6)webpack:一款强大的公文打包工具,可以将大家的前端项目文件一律打包压缩至js中,并且可以经过vue-loader等加载器达成语法转化与加载。
(7)Babel:一款将ES6代码转化为浏览器包容的ES5代码的插件

选择上述等技能,大家便得以开首创设大家的Vue项目了。

6.说到底一个,无关于vue,那便是,遭逢难点,先想一想,上网查阅资料,资料看不懂了,再去问外人。那一点其实际职场很重点,因为我们都有谈得来的劳作,什么人也一直不时间和职务去帮你,所以能协调解决的玩命协调解决。

�打造大型应用

图片 6

�创设大型应用

在打造我们的中大型Vue项目中,我们最主要介绍如何行使vue-cli来自动生成大家项目标前端目录及文件,精晓Vue中总体皆组件的定义及父子组件的通信难点,讲解在Vue项目中大家如何运用第三方插件,最终选拔webpack来打包及安插大家的品类。

自己小白,不足之处多多指教。

vue-cli构建

图片 7

vue-cli构建

在行使vue-cli从前大家须求安装node.js,利用其提供的npm命令来设置vue-cli。安装node.js只需去其官网下载软件并安装即可,地址为:https://nodejs.org/en/

设置到位将来我们开辟计算机的cmd命令行工具依次输入上图中的命令:

(1)npm install -g vue-cli:全局安装vue-cli
(2)vue init webpack my-project:
利用vue-cli在目录地址生成一个依照webpack的名为’my-project‘的Vue项目文件及目录
(3)cd my-project:打开刚刚创立的文书夹
(4)npm intall:安装项目所依赖的包文件
(5)npm run dev:利用本土node服务器在浏览器中打开并浏览项目页面

诸如此类大家的一个基于webpack的vue项目目录就打造好了。

单文件组件

图片 8

单文件组件

在刚刚营造好的vue项目中,大家会发觉一个App.vue和Hello.vue的文件,那么像那样的以.vue后缀结尾的文书便是大家Vue项目中普遍的单文件组件。单文件组件包括了一个功力或模块的html、js及css。在.vue文件中,大家可以在template标签中写html,在script标签中写js,在style标签中写css。那样一个效应或模块就是一个.vue组件,对于组件公用和中期的尊崇也分外便利。

�父子组件通讯

图片 9

父子组件通讯

那么像那样在以单文件组件为主导的档次费用中,大家自然会想到一个题材,就是.vue父子组件之间是怎么调换数据来落成通讯的吧?在Vue2.0中提供了props来贯彻父组件向子组件传递数据,通过$emit来落实子组件向父组件传递数据。当然如果是较为复杂和大面积的数量交互,提议我们使用vuex来同样管理数据。详情请见:https://vuefe.cn/guide/components.html\#使用Props传递数据

插件使用

图片 10

插件使用

接下去大家介绍下在按照webpack的vue项目中我们是什么样运用插件的,首要有三种状态:

(一)全局使用

(1)在index.html引入:那样的办法不引进应用,因为存在程序加载顺序的难题,有些插件不扶助这一措施。
(2)经过webpack配置文件引入:紧要通过plugin配置项的webpack.ProvidePlugin()方法达成,但是只适合辅助CommonJs规范并提供一个全局变量的插件,如jQuery中的$。
(3)通过import +
Vue.use()引入
:那种艺术须要在全局.vue文件中import必要加载的插件,然后经过Vue.use(‘插件变量名’)来完结,然而此措施只支持坚守Vue.js插件编写规范的插件使用,如vue-resourece。

(二)单文件使用

(1)通过import直接引入:那种方法得以在急需调用插件的.vue文件中使用,然而必要留意和实例的创导顺序难题,或者也可以透过require引入。

(2)import +
components注册
:此办法为Vue组件的运用办法,可以在一个组件中登记并选用一个子零部件。

安顿及优化

图片 11

安插及优化

当大家搞定所有Vue项目标前端编码阶段后,我们要求对大家的前端项目文件进行布局和优化工作,主要的多少个措施如下:

(1)选取webpack的DefinePlugin指定生产环境:通过plugin中的DefinePlugin配置,我们得以申明’process.env’属性为’development'(开发环境)或者’production'(生产条件),结合npm配置文件package.json中scripts的通令来切换环境方式相当有利于。

(2)行使UglifyJs自动删除代码块内的告诫语句:一般在生产条件的webpack配置文件中利用,通过new
webpack.optimize.UglifyJsPlugin()来进展配置,删除警告语句可以减去文件的体积。

(3)动用Webpack
hash处理缓存
:当大家须求对发表到线上的公文举行改动时,重新编译的文件名如果和事先版本的同样会唤起浏览器不能识别而加载缓存文件的难题。这样咱们须求活动的生成带hash值的公文名来阻止缓存。详见:https://segmentfault.com/a/1190000006178770\#articleHeader7

(4)采取v-if收缩不要求的机件加载:v-if指令其实很有用处,它可以让大家项目中暂时不须求的零件不开展渲染,等须要拔取的时候在渲染,比如某个弹窗组件等。那样大家可以减去页面首次加载的时日和文件量。

除却以上几点的优化,还有很多优化增选,有趣味的童鞋可以可以地问询下webpack的API文档,毕竟webpack的效应极度精锐。

多少驱动实例##

图片 12

数据驱动实例

那是自个儿事先使用Vue.js数据驱动的法则写的一个拼图游戏,希望能够供我们进一步询问Vue数据驱动的见地。
以身作则地址:拼图游戏
代码地址:拼图代码

总结

正文以PPT图片附加文字介绍的花样容易介绍了Vue.js的知识点及开支流程,并将前端自动化、组件化、工程化的眼光贯穿其中,循序渐进地论述了Vue.js“简单却不失优雅,小巧而不发大匠”的极度魅力。