从零开始的Vue项目-1

使用vue-cli3创建vue项目

1 | npm install -g @vue/cli

安装完成后可以通过vue --version命令查看版本

vue --version

也可以使用简写

vue -v

出现下图代表安装成功:

vue-v.png

使用vue新的图形化项目管理器

vue ui

vue-ui.png

等待几秒,会默认打开网址 http://localhost:8000 这里的端口可能会与我不同

创建项目.png

选择文件夹,在此创建项目
第一步:

第一步.png

第二步: 没有特殊需求建议默认

第二步.png

此处有一个新手容易踩得雷区,默认配置下, eslint 的代码规范会非常严格,如果需要关闭,可以百度,后续有空的时候,我也会出一篇有关 eslint 介绍以及如何关闭.

安装中.png

第三步: 安装成功后, 任务--sever--运行--启动app

运行.png

第四步: 完成,项目启动成功

完成.png

到这里,完整的Cli3构建的Vue项目就算是完成了,总的来说,Cli3的图形化工具让我们构建项目,方便了很多.
同时Cli3也有更多的功能,需要熟悉以后再去深入的研究.

附上Vue Cli3构建的项目目录:

目录.png

明天会分析Vue Cli3的项目目录