创建一个可视化vue-cli项目

本文参考了一个小姐姐的博客,在小姐姐的基础上,我写得更细而已(更适合没有基础的),原文地址如下:https://blog.csdn.net/ws19900201/article/details/99948384

首先,先要安装vue/cli
打开cmd或者gitbash,输入如下代码

npm install -g @vue/cli

再电脑左下角搜索框输入cmd,出现命令提示符,鼠标右键选择管理员打开
创建一个可视化vue-cli项目_第1张图片
打开之后,在cmd上输入vue ui
创建一个可视化vue-cli项目_第2张图片
然后回车,等待,出现如下界面说明操作ok了
创建一个可视化vue-cli项目_第3张图片
这时会自动打开默认浏览器,跳转到如下界面创建一个可视化vue-cli项目_第4张图片
左上角有个下拉菜单,就是下图红色箭头所指的地方,点击之后如下图所示创建一个可视化vue-cli项目_第5张图片
然后点击上图红色方框位置的vue项目管理器,到了如下界面之后,点击新建创建一个可视化vue-cli项目_第6张图片
接下来配置一下项目保存的文件,就是下图红色方框位置创建一个可视化vue-cli项目_第7张图片
点击在此创建新项目,我的项目路径是C:\cli3\vuecli3\keshihua\vue2,根据个人习惯设置。到新界面之后要配置两个地方,如图所示
创建一个可视化vue-cli项目_第8张图片
第一个是项目名称,根据自己习惯写吧。第二个是npm的选择,配置好了点击下一步创建一个可视化vue-cli项目_第9张图片
这里根据自己情况选择,然后点击创建项目创建一个可视化vue-cli项目_第10张图片
这里要稍微等一下
创建一个可视化vue-cli项目_第11张图片
好了之后就跳到这个界面了,我们可以发现红色方框里面是我们刚才创建项目的名字,点击左边的任务,然后选择server
创建一个可视化vue-cli项目_第12张图片
接下来点击下图圈起来位置的运行创建一个可视化vue-cli项目_第13张图片
等待几秒
创建一个可视化vue-cli项目_第14张图片
圈起来的位置是进度条,运行完成了如下图所示
创建一个可视化vue-cli项目_第15张图片
接下来点击启动app几个字,如下图创建一个可视化vue-cli项目_第16张图片
跳转页面到下图所示,就说明项目新建完成了!创建一个可视化vue-cli项目_第17张图片
觉得有用的小伙伴请点个赞,谢谢!

你可能感兴趣的:(vue项目,知识点,vue,vue-cli)