vue . js vue-CLI脚手架施工详解
与主流的angular和react前端框架相比,vue近年来变得非常热门。他吸收了前两者的优点,同时学习曲线也更加流畅。所以恶魔已经准备好要入坑了~ ~
让我们从vue的脚手架开始。
我不得不在这里呕吐。与mac和linux相比,window在软件开发、代码打包、环境构建等方面确实不方便。它就爆炸了~ ~.不过,嗯,这个恶魔用的是win10,嘿~
嗯,不用说,今天的任务是搭建脚手架。虽然过程不麻烦,但是npm真的可以不小心磨掉整个下午。您可以在这里使用命令行工具、Git Bash或WebStrom中的终端工具。
(1)检查节点版本
在安装vue环境之前,需要先安装NodeJS环境。可以使用node -v指令进行检查,需要确保安装了4.0版以上的nodeJS环境。
当然,如果没有安装,可以去Node.js官网下载,然后像傻子一样安装,非常方便。
Tips:来说说我踩过的一个坑。一开始我是从国外官网安装了最新版本的7.3.0,然后npm运行dev的时候报错了各种错误。最终的解决方案是将节点的版本回滚到6.2.0。因此,我们建议您安装NodeJs 4~6和6之间的版本。
(2)安装命令行界面
接下来,进入正题,在全球范围内安装vue-cli。
使用说明
Npm安装-g vue-cli,然后等待~ ~毕竟npm真的很慢。如果发现长时间卡在一个地方,可以通过ctrl c取消,然后重新执行。
另一个解决方案是使用淘宝的cnpm形象。
最终完成后,使用vue命令检查安装是否成功。如果成功,结果如下:
(3)初始化项目
首先将光盘放入要创建新项目的文件夹,然后使用vue init指令
Vue初始化模板类型项目名称
vue的模板有很多种,可以使用vue列表指令查看
我这里使用的是webpack模板,项目名是sell,说明如下:
Vue init webpack sell可以一路回溯。里面的选项大部分都可以用来确认项目名称、作者、描述信息、测试等,大家可以根据自己的需求进行选择。(这里卖的是我的项目名)
然后进入销售文件夹并运行npm安装。您会发现项目中有一个名为node_modules的额外文件夹,目录结构如下:
(4)运行虚拟环境
接下来,使用npm run dev命令运行项目环境,效果如下:
它显示端口8080已被监控,然后访问http://localhost:8080/
您将看到以下页面
证明项目已经开工,环境已经建设成功~ ~
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。
版权声明:vue . js vue-CLI脚手架施工详解是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。