前端框架领域,Angular、React、Vue.js 三足鼎立,而 Vue.js 因其性能、通用、易用、体积、学习本钱低等特点深受广大前端们的追捧,并吸引了一大批前端初学者。
内容

第01课:关于 Vue.js 的那些事儿

从去年开始,在各大论坛技中,与 Vue.js 这一干系词语的内容爆炸式增长,在前端技能增速中独领风骚,迅速成为前端三巨子之一。
记得在某个社区中有人这样先容三巨子“来自 Google 的 Angular,来自 Facebook 的 React,来自开源社区的 Vue.js”,Vue.js 的成功是大家有目共睹的。

webstormjsppluginVuejs 焦点精要实战解析 GraphQL

回顾前端框架的发展进程,2006年 JQuery 发布至今十一年过去了,它的辉光也随之过去了,当前版本的 JQuery 在未来不会再拥有曾经的地位,2012年之后随着 W3C 的推进一批新性子的框架涌现了,他们一步一步霸占了 JQuery 同期间框架的位置,许多框架就此在历史的长河中隐秘起来。

Vue.js 在2016年崛起,NG 也发布了全新的版本2,前真个天下仿佛回到了东汉末年三国鼎立期间(React Native、Vue.js、NG)。
前端这条路,一旦离开就不在随意马虎回来跟上步伐,爆炸式的增长让我们不得时时刻准备着欢迎新的一波潮流,未来若何谁也不知道,但是现在,我相信 Vue.js 便是一把全球无双的利刃,能够帮助我们在前真个路上劈荆斩棘。

Vue.js 及干系信息先容

Vue.js 的创始人是国人尤雨溪。
关于为什么开拓这样一款框架,网上也有各种说法。

2012年初,36Kr 有一篇文章对作者进行了干系宣布,个中有这么一句话:“Evan 希望能通过这个举动引起科技公司的把稳,向他伸出橄榄枝。
”,并附上了作者尤雨溪的微博、Twitter 与个人网站。
作者的做法,我以为大家该当借鉴,节制好 Vue.js,让你心仪的公司把稳到你。

针对知乎上关于 Vue.js 的一个提问,尤雨溪的回答说出了最初的开拓初衷,即“做 Vue.js 的初衷很纯挚,不是为了赚大钱,不是为了成为大神,也不是由于我创造了什么不得了的创新点。
我只是想做一个我自己会喜好的框架。
很巧,我把我想要的东西做出来往后,也有很多其他人喜好,以是用户越来越多。
我从没说过,也不认为 Vue.js 比所有其他框架都好(我一贯的不雅观点都是开拓者偏好的多样性使得多框架/措辞的共存有益无害,乃至是必要的) 。

说到此,也希望大家在学习框架或者技能时不要带着主不雅观意愿去评判。
当在学习 Vue.js 的时候,网络上充斥着各种各样的帖子,很多帖子都在讲述 Vue.js 如何如何的差,哪里是抄袭的。
我希望做程序开拓的人都该当是理智的,不应该带着感情去对待一个技能性的事物,尤其是它和你本身就不存在什么关联。
有一句话叫做存在的既是合理的,如果它不合理,早晚会被韶光淘汰掉,技能之间的更换更新是不可避免的,请不要由于你对付一门技能的热爱去诋毁另一门技能。

打仗 Vue.js 之前,我利用的是 Angular。
通过一段韶光的利用,觉得 Vue.js 更加大略轻便,在中小型项目开拓中比 Angular 可能更加适用,于是在后来的项目中我放弃了 Angular 转战 Vue.js。

基于一段韶光的深入研究,也积累了很多实战履历,希望通过该达人课与大家分享。
该课程以实用为主,不会过多地深入讲解事理,紧张面向已有前端开拓根本的研发员。
如果您短缺前端根本,可能在整体上会吃力许多。

Angular、Vue.js、React 三者的差异

曾有很多人问我关于Angular、Vue.js、React 三者的利害,我以为三者并不存在利害,而是具有不同的特性,再次为大家剖析下它们与 Vue.js 的一些共同点与不同点。

React 与 Vue.js 都采取虚拟 DOM,而且它们的核心功能都在核心库中,其他类似路由这样的功能则由其它库进行处理。

React 在我看来并非一个纯粹的 MVVM 框架,它有着一个弘大的生态系统,它比 Vue.js 精良,由于它分开了一样平常框架的范畴,但是 Vue.js 并非在它面前一无是处。
事实上,Vue.js 在许多时候都是霸占上风的,由于 Vue.js 较 React 而言要轻得多。
React的整体都是由 JavaScript 功能来实现的,这对付一样平常的前端开拓者而言,把 CSS/HTML 都融入 JavaScript 不是那么随意马虎接管,而 Vue.js 则是基于传统的 Web 技能进行扩展,这无疑更能让用户接管。

Angular1 与 Angular2 在我看来并非同一个框架,他们在语法上与 Vue.js 险些同等,以是很多人都说 Vue.js 是抄袭Angular,对付这样的帖子看得太多,我认为便是 Vue.js 早期的思路,部分确实来源 Angular1,这样的问题也就不想过多阐述,仁者见仁智者见智。

Vue.js 在许多方面没有像 Angular 一样深入开拓,但也担保了根本的功能完善。
对付 Angular 的全面带来的弘大, Vue.js 选择了不同的方向, Vue.js 很多时候要比 Angular 快,还有对付 Angular 的脏检讨机制带来的性能问题,这也是 Vue.js 不用去管的。

为什么选择 Vue.js

首先我们谈谈 Vue.js 的诸多优点。

1.不存在依赖关系;

2.轻便(25k min+gzip 72K min);

3.适用范围广(大中小型项目,PC,移动端,稠浊开拓);

4.本土框架,社区非常生动,对付国产的大家的激情亲切度非常得高(紧张还是东西本身好);

5.学习本钱低,语法升级平滑(Anguler1升级到2算得上新学一门措辞了);

6.双向数据绑定(所见即所得);

7.语法简洁。

接下来,我们研究一些 Vue.js 的语法。

1.如何创建一个 Vue.js 实例。

var vm = new Vue({ // 选项})

便是这么大略,new 一个 Vue.js 工具。

2.如何添加数据。

var vm = new Vue({ data: { text:\"大众这是文本!
\公众 }})

简明扼要,随意马虎读懂, Vue.js 的数据都存储在 data 中。

3.双向数据绑定的实现。

Anguler1实现数据双向绑定的办法:

<body ng-app=\"大众myApp\"大众> <div ng-controller=\"大众myCtrl\"大众> <span>{{ inputData }}</span> <input type=\公众text\"大众 ng-model=\"大众inputData \"大众> </div></body><script>var myModule = angular.module('myApp', []);myModule.controller('myCtrl', ['$scopp', function($scope) { $scope.inputData = '';]);</script>

Vue.js实现数据双向绑定的办法:

<body> <div id=\公众app\公众> <span>{{ inputData }}</span> <input type=\公众text\"大众 v-model=\公众inputData \公众> </div></body><script>var vm = new Vue({ el: '#app', data: { inputData : '' }})</script>

比拟 Anguler1 整体同等,Vue.js 的更加简洁一些,v-model 将数据与 DOM 绑定,{{}}两个花括号将数据直接展示为文本,你修正 input 框的内容,上面所展示的就会跟随改变,便是所谓的,所见即所得。

4.写一个大略的事宜。

<div id=\公众app\"大众><button v-on:click=\公众inputData += 1\公众>Add 1</button><p>The button above has been clicked {{ inputData }} times.</p></div><script> var vm = new Vue({ el: '#app', data: { inputData : 0 } })</script>

每次点击 Add 1 下面展示的内容就会增加1,通过 v-on:click 来绑定点击事宜,与原生的 onclick 效果同等,当然原生的 onclick 不支持上面的写法。
你也可以选择将 click 绑定一个函数,像下面这个。

<div id=\公众app\"大众><button v-on:click=\"大众addOne\"大众>Add 1</button><p>The button above has been clicked {{ inputData }} times.</p></div><script> var vm = new Vue({ el: '#app', data: { inputData : 0 }, methods: { addOne:function () { this.inputData++ } } })</script>

函数的写法与原生只有名字顺序变革,但是个中有非常主要的一点,在 Vue.js 中的 this 与原生的 this 所指的并不相同,Vue.js 中的 this 指向的是 vm 这个 Vue.js 实例,在实例中调用 data 中的数据直策应用 this.Dataname 就可以了(dataName数据名),调用函数也是相同的方法 this.functionName(functionName函数名),关于 this 还存在许多其他须要把稳的地方,在后续的课程中会为大家讲解。

methods 是在实例中用来存放函数的地方,写在 methods 中的函数都可以通过上述的 this.functionName 调用,也可以直接绑定在 DOM 元素上,通过 v-on:click=\公众functionName\公众 就绑定成功了。
实例 vm 中的 el 便是实例挂载的元素 ID,要与上面 DOM 的 ID 保持同等,也便是说,你挂在哪个 DOM 上,你的实例浸染范围就在这个 DOM 元素内。

当前,前端开拓实际过程中对浏览器的兼容性哀求不再像以往那么苛刻,IE8 及以下的版本已经被大多数人放弃, Vue.js 、Angular、React三者中只有 React 兼容 IE8。
以是在我们事情中进行考虑的时候,对付浏览器的兼容在大多数的项目中都没有苛刻的哀求。

利用框架开展一个项目的时候,须要考虑哪些方面?

1.性能

如果一个网站在性能方面存在问题,它将会丢失超过一半以上的用户。

对付框架性能,你可以在网上查询到各种测试,你可以理解框架的代码构造、逻辑处理,判断是否能够知足你对性能的需求。

2.扩展性

对付一个须要长期掩护的项目而言,常常会有各种各样的功能添加进来,这时扩展性就显得尤为主要,如果你在前期选择了一款知足前期的框架,但后期你须要利用某个插件来完成某个功能,或者基于什么完成一个功能,这时候你创造网上并没有检索到干系内容,内心是否充满了心塞。

3.掩护性

一个项目的生命周期不是三天两天,而前真个发展则是爆炸式的。
在你选择框架的时候是否考虑过官方在后续的一段韶光是否会一贯对框架进行更新掩护?如果不愿定,是否已经有了官方放弃掩护后的办理方案?

4.兼容性

这里的兼容性指的不是浏览器兼容,而是框架与其他框架及工具的兼容,利用这个框架对付你的开拓环境是否有影响,对付你的开拓 IDE 是否有影响。

Vue.js 作为一款当前十分盛行的框架,在你选择它的时候实在以上内容都不须要你思考太多,很多过来人用他们的履历见告你这是可行的。
你只须要去判断,Vue.js 是否适宜你的项目。

个人总结 Vue.js 适用具有以下性子的项目:

对浏览器兼容哀求不高,不须要兼容至IE6-8;SPA开拓;对性能较高哀求;组件化。

总的来说,如果你是一个 MVVM 框架新手,那么 Vue.js 便是你最好的进阶工具,如果你是一个已经节制了其他 MVVM 框架的老手,那你会创造 Vue.js 更加大略轻便。

Vue.js 是一款适宜每个人的框架,个人看来它的适用范围在 MVVM 框架中是最广泛的。

第02课:入门前的概述——初识 Vue.js

阅读完上一篇文章,相信你对 Vue.js 有了整体认知。
如果它引起了你的兴趣,接下来我将带你深入研究它。

学习 Vue.js 之前的根本准备

在 Vue.js 官方文档中有这么一段话。

官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。
如果你刚开始学习前端开拓,将框架作为你的第一步可能不是最好的主张——节制好根本知识再来!

这句话意味着,学习 Vue.js 之前,首先要有合格的 HTML、CSS、JavaScript 根本。
之后去阅读官网文档,理解 Vue.js 有什么,能做什么,也可以深入学习理解它们为什么要这么做以及是若何实现的。

当你对 Vue.js 有了一定的认知,在学习过程中又有很多不清楚的地方时,可以结合别人的教程进行学习。

后续内容将会以读者已对官网文档进行过学习为基准进行讲解。
你无需全部节制官网文档中的内容,只需系统的看过一遍,知道 Vue.js 是什么,包含什么即可。
本系列教程并不会和官网文档一样对 Vue.js 的功能进行挨个讲解,以是须要大家自己去理解某些东西。

Vue的模版语法

学习任何框架都须要遵照它的语法,现在我们就来谈谈关于 Vue.js 的语法。

Vue.js 利用了基于 HTML 的模版语法,许可开拓者声明式地将 DOM 绑定至底层 Vue.js 实例的数据。
Vue.js 的核心是一个许可你采取简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合相应系统,在运用状态改变时, Vue.js 能够智能地皮算出重新渲染组件的最小代价并运用到 DOM 操作上。

这段话是官网对付 Vue.js 语法的先容,大略来说,便是Vue.js的语法都是写在 HTML 代码上的,依赖它供应的语法,就可以实现对 DOM 的渲染,如果你的内容发生了改变也会自动渲染新的内容。
接下来,我们看下几个主要的语法点。

文本插值:相称于将在 JavaScript 中定义的变量写到 HTML 中,用{{}}两对大括号将你的变量名包住,渲染的时候它就会自动将变量所对应的常量渲染到HTML中。
请见下面代码示例。

<div id=\公众app\公众> <div>{{ message }}</div></div><script>new Vue({ el: '#app', data: { message: '初识Vue.js' }})</script>

输出代码:v-html,这个与原生的 innerHTML 插入功能类似,v-html=\"大众HTMLCode\"大众,将 HTML 代码放置在变量中,渲染时 Vue.js 会将变量中写好的构造渲染至页面中。
请见下面代码示例。

<div id=\公众app\"大众> <div v-html=\公众HTMLCode\"大众></div></div><script>new Vue({ el: '#app', data: { HTMLCode: '<p>vue教程之语法模块</p>' }})</script>

属性绑定:在 Vue.js 中可以利用 v-bind 来绑定属性,如 id、class、src 等等,请见下面代码示例。

<div id=\"大众app\"大众><div v-bind:id=\"大众domId\"大众></div></div><script>new Vue({ el: '#app', data: { domId: 'userImg' }})</script>

看到这里,如果你以为这个类功能很没用,还不如直接写个 id 来的方便。
那还请你耐心点,我会在后续的课程将它们的浸染都展示出来。

表达式:便是 JavaScript 中的表达式,同样也可以浸染于 Vue.js 的语法中,乃至还可以与绑定属性一起合营利用,请见下面代码示例。

<div id=\"大众app\"大众> <p>{{5+5}}</p> <p>{{ test ? 'YES' : 'NO' }}</p> <p>{{test.split('').reverse().join('')}}</p> <p v-bind:id=\"大众domId +233\"大众>{{test}}</p></div><script>new Vue({ el: '#app', data: { test: 1, test: '233233', domId : 'userImg' }})</script>

对付表达式与绑定属性的利用,再举一个常用的例子,代码如下所示。
你可以根据 isActive 的真假来以为 active 这一 CSS 是否会对所在的 DOM 进行样式渲染。

<style>.active{ font-size:20px;}</style><div id=\"大众app\公众> <div v-bind:class=\"大众{'active': isActive}\公众> </div></div><script>new Vue({ el: '#app', data: { isActive:true }})</script>

指令:指令指的是带有 v- 前缀的分外属性,与 Angular 中的 ng- 类似。
一样平常格式为 v-if=\"大众show\"大众,它的浸染是根据表达式来决定指令功能的实现与否,如 v-if=\"大众show\"大众 就表示渲染当前DOM,请见下面代码示例。

<p v-if=\"大众show\"大众>当前DOM可见</p>

事宜监听:v-on,它的浸染便是监听 DOM 事宜,和元素的事宜监听类似,请见下面代码示例。

<a v-on:click=\公众doSomething\"大众>...</a>

缩写:v-bind 以及 v-on 都可以进行缩写,功能不会变革,v-bind 缩写为 :,一个冒号,而 v-on 则缩写为 @,一个 @ 符号,请见下面代码示例:

<a @click=\"大众doSomething\"大众>...</a><a :href=\公众url\公众>...</a>

看了以上内容,你该当对 Vue.js 的语法有所认识了。
在这里给大家补充一点,语法中表达式的利用,犹如我上面的某个例子写的:

<p>{{test.split('').reverse().join('')}}</p>

模版内利用表达式的初衷是为了供应大略的运算,但犹如上面一个例子,你会发觉它不再是一个大略的打算,而是要实现一个翻转字符串的功能,这样的功能我们不应该放在模板内通过表达式来实现,而该当通过类似JavaScript方法来实现,这种方法叫做打算属性。

举个大略的例子,如下。

<div id=\公众app\"大众> <p>精确的顺序: \"大众{{ test }}\"大众</p> <p>打算属性后的顺序: \公众{{ testCode }}\"大众</p></div>var vm = new Vue({ el: '#app', data: { test: 'vuejs' }, computed: { testCode: function () { return this.test.split('').reverse().join('') } }})

而我们一样平常的方法则是这样完成的:

<div id=\"大众app\公众> <p>精确的顺序: \"大众{{ test }}\公众</p> <p>实行方法后的顺序: \"大众{{ testCode() }}\公众</p></div>var vm = new Vue({ el: '#app', data: { test: 'vuejs' }, methods: { testCode: function () { return this.test.split('').reverse().join('') }}})

两者输出的结果都一样,在 Vue.js 中,通过这样的方法进行繁芜的逻辑处理以及其它功能的实现。
可以将 testCode 理解为方法名,function 里面便是实行的方法。

但你会创造我们为什么利用打算属性而不是方法呢?

涉及到打算部分的时候,打算属性是基于它们的依赖进行缓存的,如果说你的 test 值不变,那么它就不会去重新实行,只有当值发生了改变,它才会去重新实行一次,其它时候它都是缓存的。
而方法则会反复打算处理。
二者之间的差距就在于此。

当然如果你不肯望缓存,那就利用方法来完成这一功能。

如果你想更深入理解打算属性与干系内容,可以查看官方文档

Vue.js 的语法简介就到这里,接下来为大家先容平时开拓中常用的两种开拓模式。

常用的两种开拓模式

第一种是在 script 中引入 Vue.js。

<script src=\"大众vue.js\公众></script>

对付这种模式的利用,一样平常是项目中涉及到有页面利用 Vue.js,不是所有而只是部分页面在利用,而且并不须要大量的第三方 Vue.js 组件。

第二种是利用 vue-cli 搭建单页面开拓,这便是一个完备利用 Vue.js 构成的项目,全套利用 Vue.js。

上一篇文章中的大略代码功能演示,利用的是第一种方法,后续课程中大略功能演示也会连续利用第一种办法,而正式开始项目时,将会采取 vue-cli 搭建,下一篇文章将会单独针对 Vue.js 开拓环境的搭建做讲解。

下面对两种方法进行讲解。

1.script 标签引入。

利用这种方法,你只须要下载一个 vue.js 文件,然后通过 script 标签引入就可以利用了,非常方便。

<script src=\"大众vue.js\"大众></script>

官网不才载 Vue.js 文件时,有这么一个提示“主要提示:在开拓时请用开拓版本,碰着常见缺点它会给出友好的警告。
一样平常开拓的时候,利用开拓版本的 Vue.js ,在正式发布的时候更换为生产版本。

引入 Vue.js 之后,就可以在 script 中实例化一个 Vue.js 工具,代码如下。

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})

而在 HTML 中也要有相对应的部分。

<div id=\公众app\"大众> {{ message }}</div>

实例化出来的 Vue.js 工具中,el 便是承载 Vue.js 工具的 DOM 节点的 ID,也便是说实例化的 Vue.js 就只在节点内生效。

一个直接引入 Vue.js 的 HTML 页面该当是这样的。

<!DOCTYPE html><html><head><meta charset=\公众utf-8\"大众><title>VUE教程</title><script src=\"大众vue.js\"大众></script></head><body><div id=\"大众app\"大众> <p>{{ message }}</p></div><script>new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }})</script></body></html>

你可以在官方下载 Vue.js 到本地引入,也可以利用网络路径。

直接引用的这种方法和用脚手架搭建的 Vue.js 项目是大不相同的,这种方法就像是引用一样平常的 JavaScript 插件一样,引入之后直策应用。

如果你想利用路由和 VueX 或者其他的功能,那么还须要单独引入你须要的功能模块的 JavaScript 文件。

2.vue-cli 搭建

单页 Web 运用(Single Page Web Application,SPA),便是只有一个 Web 页面的运用,即加载单个 HTML 页面并在用户与运用程序交互时动态更新该页面的 Web 运用程序。
这是一种目前比较受欢迎的前端开拓模式,也是前端职员应该节制的开拓模式。

vue-cli 是一个官方发布 Vue.js 项目脚手架,它可以快速创建 Vue.js 项目。

利用 vue-cli 构建的便是一个 Vue.js 单页面项目。
它得当于单页面开拓,利用一整套的 Vue.js 来构建你的项目,与第一种单文件引入是完备不一样的,整体也要难一些,由于你须要额外学习一部分知识,包括项目的搭建过程,项目的打包发布,此外,还须要学习理解Node.js、npm、webpack等等。

学习 Vue.js,不能再像萌新一样,一个 HTML 文件,一个 CSS 文件,一个 JavaScript 文件,写完之后放在做事器上就完了,你须要对各种工具都有所理解,从构建一个项目到打包发布,都须要工具。

vue-cli 构建的项目,在开拓过程中创建的均是 .vue 文件,代码写在 .vue 中,等打包发布之后它就会天生 .html、.css、.js 文件。
以是通过脚手架搭建的项目,须要利用 Node.js。

一个 .vue 文件的构造如下。

<template> <div> {{demo}} </div></template><style> div { background-color: #ff0000; }</style><script> export default{ data () { return { demo: '这个是Home模板页' } } }</script>

template 模版中装的是 HTML 代码,style 中装的是 CSS 代码,script 中装的是 JavaScript 代码,这里的代码有分外的格式,与一样平常 JavaScript 文件中的写法有所差异,script 中的内容与单文件引用中 script 里也有所不同,大家须要把稳它们之间写法及内容的差异。
template、script、style 在.vue 文件中都是具有唯一性的。

本文为大家先容了学习 Vue.js 之前需具备的前端知识、Vue.js 的模版语法及两种常用的开拓模式,下一篇文章将正式带大家开始 Vue.js 实战开拓之旅。

第03课:开拓前期准备——开拓环境的搭建

读完上一篇文章,相信你对 Vue.js 有了整体理解,且知道了 Vue.js 有两种开拓模式,一种是直接引入 JavaScript 文件,另一种则是利用 vue-cli 构建项目。
接下来,本文将带你开启 Vue.js 实战开拓的第一步:搭建你的开拓环境。

搭建项目前须要做的准备

子曰:工欲善其事,必先利其器。
要做好一件事,准备事情是少不了的。

在做 Vue.js 开拓时,大家须要理解并安装以下开拓工具。

1.Node.js

Node.js是一个基于Chrome JavaScript运行时建立的平台,用于方便地搭建相应速率快、易于扩展的网络运用。
Node.js 利用事宜驱动,非壅塞 I/O 模型而得以轻量和高效,非常适宜在分布式设备上运行数据密集型的实时运用。

它是前端框架,后台措辞。
对付Node,大家不用深入研究只需会安装配置即可,可参考此教程。

2.npm

npm 是随同 Node.js 一起安装的包管理工具,能办理 Node.js 代码支配上的很多问题,常见的利用场景有以下几种:

从 npm 做事器下载别人编写的第三方包到本地利用。
从 npm 做事器下载并安装别人编写的命令行程序到本地利用。
将自己编写的包或命令行程序上传到 npm 做事器供别人利用。

3.webpack

实质上,webpack 是一个当代 JavaScript 运用程序的模块打包器(Module Bundler)。
当 webpack 处理运用程序时,它会递归地构建一个依赖关系图(Dependency Graph),个中包含运用程序须要的每个模块,然后将所有这些模块打包成一个或多个 Bundle。

它便是一款模块加载器兼打包工具,在开拓过程中,须要依赖它才能将内容呈现在你面前。

4.vue-cli

vue-cli 脚手架构建工具,用来快速构建 Vue.js 项目。

以上内容推举安装最新版,以避免涌现一系列问题。

如何确认自己的电脑是否安装了对应的工具?

在命令提示符中输入:工具名称 + v,如果已经安装它,就会弹出对应的工具版本,如:

node -v

搭建开拓环境

如果你已经做好了上述准备,那就随着我开始完善我们的开拓环境吧,紧张包括以下四步。

1.安装 Node.js;

2.基于 Node.js 安装npm(淘宝镜像);

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装 webpack;

cnpm install webpack -g

4.安装 vue-cli 脚手架;

npm install vue-cli -g

新项目的创建

1.打开存放新建项目的文件夹。

首先利用 CMD 打开新建项目要存放的文件位置。
详细步骤如下。

打开开始菜单,输入 CMD,或利用快捷键 win+R,输入 CMD,敲回车,弹出命令提示符。

打开之后路径默认为“C:\Users\Administrator>”。

如果你的文件不在C盘,请输入盘符+\"大众:\"大众,如“D:”。

它会进入D盘下,接着输入CD+空格+文件路径,如“cd myWork\demo”。

2.根据模版创建新项目。

在当前目录下输入“vue init webpack-simple 项目名称(利用英文)”。

接下来的设置默认全部敲回车,末了作者 Author 写上你的名字就OK了。
结果如下图所示。

Project name demo:项目名称为demo,项目名称一定假如英文。
Install vue-router? (Y/n):是否安装 Vue.js 的路由模块;Use ESLint to lint your code? (Y/n):否启用 ESLint 检测规则,看个人对自己代码的把握,我都是选的是。
末了的三个命令见告你如何启动:cd demonpm installnpm run dev

这时,原来的空文件夹下将会产生你的项目文件夹,如下图所示。

创建完成后在项目目录下,实行npm install命令,如下图所示。

然后开始逐步的等待,大约几分钟之后完成安装。

接下来可以选择安装路由(vue-router)和网络要求模块(vue-resource),但是,vue-resource 已经停滞了更新,以是推举大家利用 axios.js 进行交互,而 vue-router 会在新建项目的时候讯问你是否安装,如果已经安装了就不须要再安装。

终极,实行npm run dev,启动项目。
如下图所示。

浏览器将弹出一个 Vue.js 页面,地址为localhost:8080。

如果在到这个步骤之前就出错了,那么请再确认下,担保所安装的工具都是最新版本。

碰着类似这样的提示:Cannot find xxxx,那就重新安装利用cnpm install xxxx --save-dev,重新安装xxxx。

末了附带见告大家两个大略的命令操作。

1.切换所在分区:分区+,如“e:”

2.返回上一级:cd ..

在 IDE 中打开 Vue.js 项目

接下来就该准备开拓IDE了,前端开拓IDE有很多,我利用过的也有很多种,本日给大家推举的是 WebStorm。

首先在网高下载安装好 WebStorm,我利用的版本是2017.1.4。
在 WebStorm 中打开我们的项目文件夹。

下面我们一块看看项目文件夹中的各个部分。

build:终极发布代码的存放位置。
config:配置目录,包括端口号等。
我们初学可以利用默认的。
node_modules:这是实行 npm install 后产生的,里面包含了 Node.js 和 npm 依赖的文件以及后续安装的第三方组件或者第三方功能。
src:我们要开拓的目录,用于存放页面干系的文件,基本上要做的事情都在这个目录里。
个中还包含了以下几个目录及文件:assets: 放置一些图片,如:Logo等;components: 存放了一个组件文件,可以不用;App.vue:是我们的主文件,项目入口文件,我们也可以直接将组件写这里,而不该用 components 目录;main.js: 项目的核心文件;router:个中包括的index.js,则是项目的路由;static:一样平常用于存放静态资源,如图片、字体等。
.babelrc文件:用来设置转码的规则和插件的,一样平常情形不须要设置。

{ \公众presets\公众: [\"大众es2015\公众, \"大众stage-2\"大众],//表示预设,表示babelrc转换预先须要安装的插件 \公众plugins\公众: [\"大众transform-runtime\"大众],//把ES6的方法做转换 \公众comments\"大众: false //false表示转换后代码不天生注释}

.editorconfig文件:用于规范代码缩进等的风格。

charset = utf-8 //编码indent_style = space //缩进风格,基于空格做缩进indent_size = 2 //缩进大小是2格end_of_line = lf //换行符的风格insert_final_newline = true //当你创建一个文件,会自动在文件末端插入新行trim_trailing_whitespace = true //自动移除行尾多余空格

.gitignore文件:如果你须要将项目放到 git 目录里,你又不想提交个中的某一部分文件,那么你就可以在.gitignore文件中添加它们。
package.json文件:用来管理所安装的包,里面包含项目的各种信息,如第三方版本、项目名称等。

{ \"大众name\公众: \"大众demo\公众, \"大众version\"大众: \公众1.0.0\公众, \"大众description\"大众: \"大众demoApp\"大众, \"大众author\"大众: \公众\"大众, \公众private\"大众: true, \公众scripts\"大众: { /表示可以实行一些命令,例如:npm run dev会实行node build/dev-server.js,npm run build会实行node build/build.js,因此可以通过scripts配置脚本/ \"大众dev\"大众: \"大众node build/dev-server.js\"大众, \"大众build\"大众: \"大众node build/build.js\"大众, \公众lint\"大众: \"大众eslint --ext .js,.vue src\"大众 }, \"大众dependencies\公众: { /项目的依赖/ \"大众vue\公众: \"大众^2.2.2\"大众, \"大众vue-router\公众: \公众^2.2.0\"大众 }, \"大众devDependencies\"大众: { //编译须要的依赖 ....................... }, \公众engines\公众: { \公众node\"大众: \"大众>= 4.0.0\公众, \"大众npm\"大众: \"大众>= 3.0.0\"大众 }, \公众browserslist\"大众: [ \"大众> 1%\"大众, \公众last 2 versions\"大众, \"大众not ie <= 8\"大众 ]}

package-lock.json 文件:紧张功能是确定当前安装的包的依赖,以便后续重新安装的时候天生相同的依赖,而忽略项目开拓过程中有些依赖已经发生的更新。
index.html 首页入口文件,你可以添加一些 meta 信息或者统计代码等。
README.md:是项目的解释文档,Markdown 格式。

当开始事情时你会创造,WebStorm 无法打开 .vue 文件。
由于 .vue 是 Vue.js 的文件格式,WebStorm 须要安装额外的插件并进行对应设置才能进行编辑。

该插件的安装步骤请见如下解释。

在 WebStorm 中选择 setting->plugin,点击plugin,在内容部分的左侧输入框输入 vue,会涌现关于 Vue.js 的插件,点击安装即可。

接着按这个步骤操作:settings->editor->file and code templates,在右边的列表中选择 vuefile,如果第一步没有安装成功,这里就不会涌现。
然后你可以选择手动添加,点击绿色的加号,name 处输入vue,Extension 处输入 html,下面的区域便是代码模块了,我在这里一样平常设置代码块如下。

<template> <div> </div></template><script> export default { name: 'name', components: {}, data () { return { } }, methods: { }, mounted: { } }</script><style scoped></style>

个中,template 中书写 HTML代码,办法与一样平常写法一样,可以把 template 看作 body 标签。
script 中写的是JavaScript,name 为你当前页面名字,components 中是你会引入的组件,data return 这个工具中便是你须要用的数据,它的浸染域是当前全体页面,只要在个中写了就行,不须要额外定义。
methods里包含的是方法,在页面中都可以调用。
而 mounted 类似原生 JavaScript 的 onload 函数,在页面加载的时候会实行,里面可以写单独的方法,也可以调用其它方法。
style 标签中便是页面的 CSS 部分。

保存之后,在新建选项时,就会涌现 Vue 了,新建之后默认代码就会如上。

寄语

刚入行的前端开拓者,编写代码利用大略的 IDE,JavaScript文件直接通过 script 引入,CSS 文件 link 引入,这样就写完了一个项目。

架构、性能、优化等等这些都不会去考虑。
随着打仗的项目变多,变得越来越繁芜,原来的技能在新的项目中显得很不敷,我们开始须要对项目进行管理优化发,就要开始利用各种工具。
前面说到的工具,便是在事情中要不断学习的。
随着前真个不断发展,自己打仗的东西也越来越多,要想自己的技能能站住脚,你须要节制的技能也要不断的增多。
虽说多不如精,但对付前端而言,这些多样化的技能都是你须要节制的,千万不要有“我现在可以用其他方法办理,我就不去学习”的心态,要多打仗新的技能,要适应全体前真个发展速率。

如今的前端开拓事情,不再是大略地会写一些代码就可以了,社会须要技能广泛的前端人才,你节制的技能也得多样化。

一个低级前端与一个中级前端,他们之间一定存在差别便是对付各种前端技能的认知,如果你想提升自己,不妨根据本文的先容进行额外的扩充。