有句俗话说的好“旧的不去新的不来”。既然有了cli2为啥还要再发布cli3呢。那肯定是因为cli3 的出现是为了弥补cli2的不足吖，下面我们一起来专研一下cli3吧(✿◡‿◡)
一、区别
1.webpack版本
cli3是基于webpack4，而cli2则基于webpack3
2.设计原则
cli3 提供“0”配置，移除了build和config两个目录。也就是你们在cli3是没有办法见到它们了o(╥﹏╥)o
3.可视化
cli3 提供了vue ui命令，提供了可视化配置，更加人性化
4.新增文件夹
在cli2 的基础上，cli3 不仅仅把build和config两个目录赶走了，还顺带赶走了static文件夹。那以前放置在static下的文件要放在那里呢？cli3新增了public文件夹，并且将public移动到public文件夹中。
上面的只是开胃小菜啦，随便吃吃就行，记得留点肚子吃主食ლ(´ڡ`ლ)
二、创建项目
小编饿了，所以决定也来祸害一下大家，教一下大家牛排怎么煎牛比较好好吃ლ(´ڡ`ლ)【如何用cli3创建项目以及选择相关选项】
1.准备好牛肉--初始化项目
牛肉快速洗净，沥干水分，把血水吸干净。如果是冰冻牛肉要提前半天时间从冷冻室转到冷藏室解冻，极速解冻会导致牛肉中的水分流失，缓慢解冻才能保证牛肉鲜嫩多汁。
【通过命令 vue create 项目名 创建项目】
2.准备调料--选择配置
在牛排两面撒上黑胡椒，少许盐涂抹均匀，然后淋上橄榄油抹匀。
【创建完项目后，出现的第一个选项： Please pick a preset 。默认的配置带有babel和eslint；手动配置的话有很多的参数，下面小编带大家一起看看】
看不懂没关系，挑看的懂的选就好了，比如 Linter就是eslint，代码规范。这个真的是恶魔一样的存在，小编强烈强烈反对你们选，因为到时候修改代码会让你怀疑人生的。不要选！不要选！！不要选！！！（按空格代表选择或者不选择，选择完成后点击回车即可）
3.准备煎牛排--配置文件的放置
把牛排放进锅中，用夹子压一压，确保牛肉均匀受热。每面煎1-2分钟，这样五成熟，外焦，里面还是粉红色，没有“血水”，给小盆友吃放心(✿◡‿◡)
【下图的选项告诉我们，今后的配置文件，你是希望单独放在一个文件夹下还是放置在package.json文件中。小编个人觉得单独放比较好，方便今后修改，所以选择第一个选项】
4.调酱汁--保存配置文件选择
利用煎牛扒的余油，放入洋葱末煎香，加入番茄末，煮烂。淋入红酒，加黑胡椒碎，少量盐。把静至牛排流出的肉汁混入，酱汁就做好了。
【下图的选项是说，你是否要将你前面的配置保存起来。小编选择保存并命名为Alienware】
【当我们重新创建项目的时候，就会看到刚刚小编保存的Alienware】
5.摆盘上菜--命令选择
喜欢情调的，可以烫些西兰花、红萝卜，切几片西红柿，或者炸些马铃薯条，摆盘。配上酱汁，简单的黑椒牛排就做好了！
【最后的选项是说，希望我们今后是用npm管理还是yarn管理。毫无疑问，选yarn！ 是不存在的O(∩_∩)O，选择npm，然后开始初始化项目。到此，使用cli3初始化项目就完成了】
三、目录结构
好了，人生不能只有吃，正经的活还是得干的，下面我们一起来看看用cli3创建的项目的目录结构吧
① node_modules：通过npm 命令安装的包都会放到这里
② public ：这个文件夹和cli2 的static是一个作用，能将public下的所有文件原封不动的打包到dist文件夹下。
③src ：这个不用说，就是我们平常编写的源代码所在的文件夹
④ .browserslistrc：浏览器的相关配置：市场份额大于1%，并且是最后的两个版本
⑤ .gitignore：要忽略的文件。不是所有的文件都需要上传到服务中的，将不需要的文件放置到该文件中。比如我们不需要将node_modules打包发送到服务器中。
⑥ babel.config.js ：对babel的一些配置
四、执行项目
在cli2的时候，我们是通过npm run dev 执行的，但是到了cli3，就不是了，这个时候就得查看package.json文件，发现server是执行项目的，所以我们要通过 npm run server执行项目
在最后，小编决定送给大家一个彩蛋，就是cli3中的main.js函数。
其实vue cli3 和vue cli 2的main.js函数差不多，只是cli3中有 mount('#app')而cli2中有el: '#app'。两者其实没有什么区别，通过 el: '#app' 选择的标签还是要通过$mount('#app')进行编译的。
好啦，今天的vue cli 美食分享就到这里啦~
