现代前端框架大行其道,讲前端思想从操作dom的阶段,升级到操作数据的阶段。vue作为三大前端框架之一,其中平缓的学习曲线,让好多前端新手非常喜欢,应用也越来越广泛。虽然其他两个框架有facebook,和google撑腰,但是vue已然是不可小觑的对手了。无论你去做前端面试还是公司新项目技术选型,vue一定不会跑出你们的备选名单。下面简单讲讲做vue开发第一部,安装!
安装nodejs
vue依托nodejs,所以首先要安装nodejs,官网直接百度
点击下载链接,其中LTS或者 Current版。由于我电脑是window,我这边步骤就是直接下载好之后,点击安装,一路下一步下一步,就安装完了。
打开cmd,输入命令, node -v。正常出现版本号,说明你已经安装成功了。
小知识:LTS版本是定期更新的稳定版本,是按照时间维度来发布的版本。Current属于尝鲜版。
![](https://i-blog.csdnimg.cn/blog_migrate/e4613aa28cad5ef60bc67226deea6551.jpeg)
npm说明
npm是Node Package Manager。node的包管理工具,使用node之后你会接触各种各样成千上万的Package(包),就需要一个管理工具能很好的解决它的安装,更新,依赖包安装等等的维护。默认安装完node之后,npm会自动安装上的。还是cmd,输入命令 npm -V 。正常出现版本号,就可以了。
vue安装
有了npm之后,vue只是万千包中的一个,后续使用命令就不在赘述
npm install vue
等待安装结束就好了,是不是很简单
提示:大部分安装都会指导使用国内的taobao的cnpm,用过几次之后速度虽然提升不少,但是不知道什么原因,总是容易出现奇怪的类似依赖装不上之类的问题。直接用npm虽然没有刷刷的,但是只要不是特别多包,正常的等个三五分钟还是可以接受的。
vue-cli脚手架工具
官方提供方便的项目搭建工具,vue-cli。最开始进公司的时候,同事一说什么脚手架,我说啥玩意儿啊,其实就是搭建工具。去工地盖房子先要搭建 脚手架 才能开始干活嘛。vue-cli可以很方便的讲很多基础性的东西都搭建好,满足绝大部分项目需求。命令:
npminstall -g @vue/cli
官方最新版本3.0的脚手架还提供了图形界面,用起来简直不要太爽啊!
直接使用命令启动图形界面:vue ui
![](https://i-blog.csdnimg.cn/blog_migrate/4163dd68cf509164e0937dbc8a5c833f.jpeg)
这里吐槽下我用的项目的脚手架是公司专门请什么高人做的脚手架,报错一大篇,不知道什么鬼。
项目搭建
至于在图形界面下如何搭建,就鼠标点点点就搭建完了。步骤图见下图
![](https://i-blog.csdnimg.cn/blog_migrate/d052da1a42616da55b7a3e11426161d6.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/8b10d104c726d5ccdf59c1e53e084b81.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/0da45905d3e457c5daf06f19edcfa009.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/bc34c537dd22cb6a69a869807c81fbcb.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/22e8d47bbd91176c829c41c418cf2bf6.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/d6976a84ca037250740a476907b3563c.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/510aac7de9b5ed3b77a379f8dfb4fa87.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/aa2d99b698f7b62b8533918c42183657.jpeg)
安装完启动
上面安装界面也都很快的。安装完之后可以很清晰的看到配置文件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f892c9edfebc0eb10fe62e05c0d139b.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/caad09d183a2d326bef066397e1a3e26.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/95ba4d946dcc47579c346cf224343aa4.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/149dfc966a8de1abd14326ec1608dedc.jpeg)
大功告成了
![](https://i-blog.csdnimg.cn/blog_migrate/e302a4d88f21eed4d27565bc8a3cbdce.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/4d772e01fe30d80e14018e435c0a7aba.jpeg)
好了,到这里就启动完毕了。可以对照官网了解修改下里面的东西试试。本来向讲的简单点儿,又啰嗦了!