VueCli4学习笔记

一、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的时候是一头雾水的，都是跟着教程慢慢学的，一步步的敲，反复去回看教程，去推敲其原理，慢慢的理解其作用。
我个人也是一名即将进入大三软件工程专业的学生，这些总结都是我通过教程资料以及个人理解总结出来的，可能有哪些地方会出现错误，也希望大家能够及时指正，大家一起学习。

欢迎访问我的个人博客