初学者搭建Vue脚手架工程

初学者搭建Vue脚手架工程

1.在前端的知识海洋里,各种前端框架自动化测试满天飞,正如在当下想不被淘汰,那只有不断的去学习心得知识,所以就有了今天的一次学习vue搭建脚手架的记录。
2.第一步:搭建vue工程项目,传送门地址送给你:https://cli.vuejs.org/zh/ 此是官方的地址,各种文档甚是详细望大伙们观摩学习,早日脱凡入圣
初学者搭建Vue脚手架工程
3. 第二步:要搭建vue脚手架工程项目,首先的需要安装node.js二话不说送上传送门根据自己电脑系统和配置进行下载:https://nodejs.org/en/download/

初学者搭建Vue脚手架工程
下载好自己需要的位置进行傻瓜式的安装下一步下一步的安装就搞定了,为了验证node.js是否安装成功,按键盘上的window+R输入cmd打开DOS界面输入node -v如果有下面的显示嘿嘿恭喜你安装成功,同时输入npm -v (记得node 后加空格)如果没有显示报错那你的重新在安装一次实在不行呵呵就度娘你懂得。
初学者搭建Vue脚手架工程
4. 第三步:当然是今天的重头戏啦安装vue这一步不可少,npm intalll -g @vue/cli 或者yarn global add @vue/cli 下面的截图很明白就不废话了哈哈@vue/cli

初学者搭建Vue脚手架工程
这个界面很熟悉,需要验证vue 是否安装成功和版本信息嗯记得V是大写
初学者搭建Vue脚手架工程
5.第四步:既然看到这里嘿嘿那我就默认你已经把前面的所有的环境搭建步骤已经搭建好了,需要创建vue工程,其实我们有两种模式一种直接使用DOS命令行模式就是上面的黑乎乎的窗口,那么先不废话开搞,这个自己需要安装的文件夹打开DOS窗体输入vue create vue-hello敲回车.
初学者搭建Vue脚手架工程
我选择手动配置如下图操作回车跟上伙计:
初学者搭建Vue脚手架工程
不解释直接上图看操作回车嗯就是这样刚
初学者搭建Vue脚手架工程
剩下的时间交给它正在给你搭建,自己可以喝喝茶,逗逗妹子嗯就是这样开心。
初学者搭建Vue脚手架工程
等待它好以后看图操作:
初学者搭建Vue脚手架工程
根据提示敲入命令然后就会告诉你一串url,二话不说打开浏览器输入地址:

http://localhost:8080/ 出现下面图示就代表你已经创建成功了,这样vue脚手架搭建成功并运行在浏览器,下期在介绍vue ui 搭建的方法,再见。
初学者搭建Vue脚手架工程