超详细的Vue-cli3教程

在Vue盛行的年代，大多数前端开发者最先接触到的MV*框架大都是Vue。当然，有些人可能是最先接触到React或Angular的。Vue以其详细的中文文档和易于使用的API而闻名。更多使用Vue的开发者很少直接用HTML开发Vue项目，而是使用vue-cli脚手架，不太方便。从vue-cli2.0开始，笔者也开始使用了，简单看了下2.0版本的webpack配置简直不要太好，有没有模板可以调用，就当大家在使用Vue-cli2.0如火如荼。官宣宣布Vue-cli3.0版本上线，引起轩然大波。所有前端开发者都有同一个声音：学不会了~玩玩玩吧，别拿你的职业开玩笑了，言归正传，虽然Vue-cli3已经发布很久了，网上教程博客数不胜数。我为什么要写另一个类似的博客？我摊牌，就是为了炒冷饭，哈哈哈~言归正传。安装如果你的电脑上已经安装了vue-cli2.0，如果你想替换成vue-cli3.0，需要先卸载原来的vue-cli2.0版本。npmuninstallvue-cli-g卸载完成后，直接安装vue-cli3.0即可npminstall-g@vue/cli查看是否安装成功vue--version通过以上步骤，vue-cli3.0即可完成安装。创建项目在使用vue-cli2.0创建项目时，直接使用vuewebpackinit项目名，这样工具就可以轻松创建项目。vue-cli3.0也是如此，但是由于版本不同，自然会有一些新的选择。当然，安装vue-cli3.0后，仍然可以使用vue-cli2.0的脚手架，创建项目的方法还是一样的。vue-cli3.0的创建方法命令不同，需要和vue-cli2.0区分开来。vue-cli3.0使用的命令是：vuecreateprojectname作者觉得这个更像是一个脚手架。通过后下单创建项目就不会这么麻烦了。输入命令后，可以在窗口中看到项目的一些配置选项。？Pleasepickapreset:(Usearrowkeys)default(babel,eslint)//DefaultoptionManuallyselectfeatures//Manuallyselectfeatures如果选择default，项目会直接创建。创建的项目包括babel\eslin等工具，如Router/Vuex等其他依赖需要手动安装。如果选择Manuallyselectfeatures（手动安装），则进入下一个选项：（建议您进行手动配置）？请选择一个预设：手动选择功能？检查项目所需的功能：（按进行选择，按切换所有，按反转选择）>()Babel//代码编译()TypeScript//ts()ProgressiveWebApp(PWA)Support//支持ProgressiveWebApps()Router//vue路由()Vuex//状态管理模式()CSSPre-processors//css预处理()Linter/Formatter//代码风格，格式校验()Unit测试//单元测试()E2E测试//端到端一般项目开发只需要选择Babel、Router、Vuex进行终端测试即可。下面简单说说选择不同的配置项会出现的不同情况：TypeScript使用类式组件语法？这里的问题是是否使用类风格的组件语法。如果你想在你的项目中继续使用TypeScript的class风格，建议Everyone选y。将Babel与TypeScript一起使用（现代模式、自动检测的polyfills、转译JSX需要）？（是/否）将Babel与TypeScript一起用于自动检测填充？一定要选择yRouterUsehistorymodeforrouter？（需要在生产中为索引回退设置适当的服务器）路由是否使用历史模式？如果项目中有需求，使用history（即：y），但一般建议大家使用hash方式。毕竟历史模式需要依赖运维。CSS预处理器css？PickaCSSpre-processor(PostCSS,AutoprefixerandCSSModulesaresupportedbydefault):(Usearrowkeys)>Sass/SCSS(withdart-sass)Sass/SCSS(withnode-sass)LessStylus选择一种CSS预处理，需要根据每个项目的要求进行编译处理。棉绒/格式化程序？选择一个linter/格式化程序配置：（使用箭头键）>ESLintwitherrorpreventiononly//onlyerrorreminderESLint+Airbnbconfig//loosemodeESLint+Standardconfig//normalmodeESLint+Prettier//StrictmodeTSLint(deprecated)//TypeScript格式验证工具TSLint只有在选择TypeScript时才会存在。？选择其他lint功能：（按选择，切换所有，反转选择）>(*)Lintonsave//detectwhensaving()Lintandfixoncommit//fix在选择校验提交的时机时，一般选择保存时校验，以便及时调整。如果代码风格类似ESLint验证风格，或者你比较自信帅气，可以考虑提交时选择验证。我听话，选择了第一项。单元测试？选择一个单元测试解决方案：（使用箭头键）>Mocha+ChaiJest选择一个单元测试解决方案。mocha+chai一般用的最多，这里就不多说了。E2E测试E2E（端到端）？选择一个E2E测试解决方案：（使用箭头键）>Cypress（仅限Chrome）Nightwatch（基于WebDriver）选择端到端测试的类型。其他选项？您更喜欢将Babel、ESLint等的配置放在哪里？（使用方向键）>Indedicatedconfigfiles//存储在专用配置文件中Inpackage.json//存储在package.json选择Babel，PostCSS、ESLint等自定义配置的存储位置。在这里我建议你选择第一个，保存这个作为未来项目的预设？(y/N)是否保存当前选中的配置项，如果当前配置是经常使用的配置，建议选择y，保存当前配置项。如果只是临时用，没必要存放，看自己的情况。选择n后，就直接开始创建工程了。选择y后会输入一个名称存放当前配置项：?Savepresetas：下次创建项目时，您会看到您存储的名称。项目依赖Vue-cli3.0，可以使用npm安装需要的依赖。在这之后，它还提供了另外一个方法，vue的add方法。//npmnpminstall--saveaxios//vuevueaddaxios既然可以用npm安装，为什么要用vueadd安装呢？官方文档中是这么说的：VueCLI使用的是基于插件的架构。查看新建项目的package.json，会发现依赖都是以@vue/cli-plugin-开头的。插件可以修改webpack内部配置，也可以向vue-cli-service注入命令。在项目创建过程中，列出的大部分功能都是通过插件实现的。基于插件的架构使VueCLI灵活且可扩展。从上面的描述我们可以看出，vue-cli是想让脚手架工具更加灵活，所以为我们添加了vue-cli插件。这些插件在安装的时候会修改webpack中的配置（不是所有的插件），同时也会将一些已经写好的example文件添加到已有的项目中（当然是单独的），但是需要注意的一点是这些命令将更改现有项目的内容。特别是在使用vueaddrouter或者vueaddvuex的时候效果还是比较明显的。然而，使用npminstall安装的项目根本不会帮我们做这些事情。虽然现在知道vue官方提供了很多插件，但是应该去哪里看呢？人性化的vue怎么会忽略这个问题呢？vueui当我们在控制台输入上面的命令，稍等片刻，就会看到浏览器打开了一个新的页面。当然，我们需要在电脑上找到我们的项目并导入。看到这个页面后，点击导入，然后你会看到一些文件夹。使用Vue的项目将带有特殊标记。找到对应的项目，点击进入。找到对应的项目，下面的导入这个文件夹按钮就可以使用了。页面也会发生同样的变化，看起来像下图一样依赖和插件被仔细划分了。当我们要添加依赖或插件时，进入相应的选项卡，点击右上角的InstallDependencies（安装插件）。这里只说明安装依赖，插件的安装同理。点击按钮后，会找到当前所有的依赖，找到对应的依赖点击安装。是不是超级舒服。其他tab下的内容大家可以自行研究，这里不再赘述。综上所述，虽然vue-cli3.0已经推出很久了，但是网上一直没有更好的教程。毕竟用vue的人还是蛮多的。vue-cli3.0的引入，让vue脚手架的使用变得更加简单，同时也提供了图形化的解决方案来使用，不是太舒服。今天的文章描述到此结束。如果您对文章有任何疑问或疑问，请在下方留言。我会尽快更正和答复。再次感谢大家。..