一、VueCli下载和安装
步骤一:打开电脑终端
步骤二:输入命令npm install -g @vue/li(默认下载最新版本)
自己在下载的过程中出现了一个问题(vue --version是查看其版本号)
很明显是下载错误了,版本号明显是不对的。
我解决该错误的方法是卸载重新安装
- 步骤如下:
(1)在命令行上输入卸载命令 npm uni vue-cli -g
(2)查看是否已经删除成功 vue -V(没有输出版本号则删除成功)
(3)再次执行命令npm install -g @vue/li
(4)成功后查看其版本号
二、VueCli4的使用
- 创建一个项目(通过命令行创建项目)
步骤一:打开电脑终端输入命令 vue create <项目名>(如:vue create demo创建一个项目名为demo的项目 默认该项目的位置在C:\Users\Lenovo\demo)。此时回输出提示,直接默认即可点击Enter
步骤二:等待一段时间后,命令行上会输出两行提示
cd demo 和yarn serve(mac电脑) npm run serve 此时直接照样输入该命令即可。接着会输出俩个网址一个是本地地址,一个是可以通过外网访问到该项目的网址
备注:如果把该终端关闭掉,则无法访问该项目
步骤三:再打开一个终端(也可以关闭上一个终端),输入命令 vue ui(可以打开可视化的vue的项目管理器)
此时导入刚才创建的项目,就可以再该界面上进行可视化的运营该项目了,另外,也可以在该网页上创建项目(其配置形式基本上默认即可)。我试了俩种方式,我个人比较喜欢通过命令行来创建项目,方便。最主要感觉这种方式很酷,哈哈哈。
导入项目成功后,在页面的左侧会出现
此时,可以点击任务->serve->运行(成功后,此时相当于启动服务器,可以接受其他人的访问,前面那个创建项目的命令行可以关闭,但打开可视化的命令行不能关闭,不然会报错)->启动APP
其他功能:
点击插件,可以查看项目已经配置好的插件
点击依赖,可以下载项目所依赖的插件
点击配置->vue CLI,可以配置其输出文件等其他配置信息
点击任务->build,可以生成输出文件
点击任务->link,可以查看是否出现源文件错误
点击任务->inspeck,可以查看webpack的配置
个人的总结
VueCli最主要的功能就是可以为开发人员部署线上环境,减少了开发人员完成项目后,还需要部署项目以及配置服务器环境,使其把更多的注意力放在开发程序上。
此时项目的部署就基本完成,在通过编程软件对其项目文件进行编写(本人是使用VS code)。然后呢,我刚开始学VueCli的时候是一头雾水的,都是跟着教程慢慢学的,一步步的敲,反复去回看教程,去推敲其原理,慢慢的理解其作用。
我个人也是一名即将进入大三软件工程专业的学生,这些总结都是我通过教程资料以及个人理解总结出来的,可能有哪些地方会出现错误,也希望大家能够及时指正,大家一起学习。