VUE初体验篇-安装

现代前端框架大行其道,讲前端思想从操做dom的阶段,升级到操做数据的阶段。vue做为三大前端框架之一,其中平缓的学习曲线,让好多前端新手很是喜欢,应用也愈来愈普遍。虽然其余两个框架有facebook,和google撑腰,可是vue已然是不可小觑的对手了。不管你去作前端面试仍是公司新项目技术选型,vue必定不会跑出大家的备选名单。下面简单讲讲作vue开发第一部,安装!前端

 

安装nodejsvue

 

vue依托nodejs,因此首先要安装nodejs,官网直接百度node

 

点击下载连接,其中LTS或者 Current版。因为我电脑是window,我这边步骤就是直接下载好以后,点击安装,一路下一步下一步,就安装完了。面试

 

打开cmd,输入命令, node -v。正常出现版本号,说明你已经安装成功了。vue-cli

 

小知识:LTS版本是按期更新的稳定版本,是按照时间维度来发布的版本。Current属于尝鲜版。npm

 

npm说明前端框架

 

npm是Node Package Manager。node的包管理工具,使用node以后你会接触各类各样成千上万的Package(包),就须要一个管理工具能很好的解决它的安装,更新,依赖包安装等等的维护。默认安装完node以后,npm会自动安装上的。仍是cmd,输入命令 npm -V 。正常出现版本号,就能够了。框架

 

vue安装dom

 

有了npm以后,vue只是万千包中的一个,后续使用命令就不在赘述工具

 

npm install vue

 

等待安装结束就行了,是否是很简单

 

提示:大部分安装都会指导使用国内的taobao的cnpm,用过几回以后速度虽然提高很多,可是不知道什么缘由,老是容易出现奇怪的相似依赖装不上之类的问题。直接用npm虽然没有刷刷的,可是只要不是特别多包,正常的等个三五分钟仍是能够接受的。

 

vue-cli脚手架工具

 

官方提供方便的项目搭建工具,vue-cli。最开始进公司的时候,同事一说什么脚手架,我说啥玩意儿啊,其实就是搭建工具。去工地盖房子先要搭建 脚手架 才能开始干活嘛。vue-cli能够很方便的讲不少基础性的东西都搭建好,知足绝大部分项目需求。命令:

 

npminstall -g @vue/cli

 

官方最新版本3.0的脚手架还提供了图形界面,用起来简直不要太爽啊!

 

直接使用命令启动图形界面:vue ui

 

这里吐槽下我用的项目的脚手架是公司专门请什么高人作的脚手架,报错一大篇,不知道什么鬼。

 

项目搭建

 

至于在图形界面下如何搭建,就鼠标点点点就搭建完了。步骤图见下图

 

安装完启动

 

上面安装界面也都很快的。安装完以后能够很清晰的看到配置文件:

 

大功告成了

 

好了,到这里就启动完毕了。能够对照官网了解修改下里面的东西试试。原本向讲的简单点儿,又啰嗦了!