vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

image

image

1. 全局安装vue-cli yarn global add @vue/cli // 检查安装是否成功 vue -V // 3.2.2 2. 初始化 vue ui

执行命令

vue ui 2.1

该命令会自动打开你的浏览器,默认地址为: localhost:8000/project/select,浏览器展示的页面如下:

vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

切换界面到创建,点击下面在此创建新项目按钮

1. 输入项目文件夹名称 2. 包管理器,如果你已经安装了yarn,vue ui的默认包管理器是yarn 2.2

vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

2.3

vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

上面的两项不用管,是我之前创建过玩的。可能你打开不是这样的,只有默认,手动和远程预设这三项。这里选择手动,下一步。

2.4

接下来,你会被要求配置预装选项,根据你自己项目需求勾选即可。一般来说,Babel,Router,Vuex,Linter这四项是必装的,另外我还勾选了下使用配置文件,可能有的人看不惯项目生成很多的.babelrc 这样单独的配置文件,也可以不勾,这样的话会统一到package.json中去配置

vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

2.5

vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验


第一个是问你router的mode要不要设成history模式,一般正式项目都会设成这种模式的
第二个问你选用哪种Eslint风格,从vue-cli@2.x似乎就是standard选的多一些。
第三个是表示当你保存/提交时自动做Lint

接下来会弹窗问你要不要保存为新预设,如果保存的话以后创建项目就可以像2.3中的那种图一样直接选择预设创建项目了

3.与vue-cli@2.x的不同之处

这篇博文感觉都有点写不下去了- -,因为我使用vue ui整个创建项目过程实在过于简单,都是中文版的,直接介绍一下我认为的几个亮点吧。

3.2 关于插件与预设
以前vue-cli@2.x是只提供6种默认模板供大家下载使用,如果想要自己高度自定义,比如你想基于typescritp去做项目,只能去fork官方模板,然后自己修改它,基本上没有生态圈可言。而现在vue-cli@3.x很多特性都是基于插件来灵活扩展的,会有很多大佬去开发各种各样的插件体系,相当于一个插件就可以是一种模板了,比如你在插件面板中可以搜一下elementUI,安装它的话就可以直接帮你生成一套整个基于elementUI的模板了。下载了就能用,基本上零配置。这是因为

每个插件都可以对项目文件操作

每个插件都可以对项目中已有的webpack配置进行操作

每个插件都可以对项目中注入一些script命令,比如serve,build之类的,还可以往一些钩子上注入一些想要执行的事件,比如install之后要做什么

每个插件都可以引入其他插件

以前每次创建一个新项目,都需要自己手动去安装各种依赖什么的,然后又一顿配置改改改。而有了预设之后,下次创建项目的时候都出现在选项列表里,只要勾选了就可以创建一个和之前一样配置和依赖的项目。

(此章节暂时对于我这个战5渣显得太过高深,大家自行去了解更好)

3.1 关于依赖
以前安装插件,需要在vscode编辑器的命令行里执行 yarn add axios 等依赖,
现在可以直接去vue ui 的依赖面板中点右上角的添加依赖,来搜索你想要安装的依赖直接安装。

3.3 关于项目配置

vue-cli@3.x可以让vue ui的界面上直接通过勾选还是不勾选来决定开启还是关闭某些功能(我估计是官方实在是看不惯vue-cli@2.x中一群人瞎改它build目录里的配置然后玩崩了之后去github提各种乱七八糟的issue了,哈哈哈),这种图形化界面的操作方式无疑对我这种战无渣更友好了...再也不用去记一些乱七八糟的命令,百度各种不怎么靠谱的解决方式。

3.4 关于vue ui的任务面板
这个让我感觉特神奇的就是,再也不用在我的编辑器里去执行yarn dev 或者npm run dev了,敲个业务代码还得特意留四分之一的窗口去看它命令行有没有报错...它可以直接在一个网页里跑起来我的项目,还有各种报告生成(虽然我现在很多功能也看不太懂,但是很酷炫有木有)。
同样也可以直接在vue ui界面上去执行run build。查看各种数据,比如打包后的大小等

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywzxd.html