摘要：单元测试前端的单元测试目前有两个比较热的框架，一个是的方式，一个是。小伙伴们不用急，关于单元测试这块，我会找时间写博客的。首先前端的测试分为两种，一个是单元测试，另一个就是测试了。
因为公司项目要用vue框架，所以会用vue-cli来新建项目。用过vue的都知道，要全局安装vue以及脚手架vue-cli，然后执行vue init webpack projectname来新建vue项目模板。但是最近新建项目的时候发现，即使是在本机全局安装了vue最新版本2.5.17，可是用vue-cli脚手架创建vue项目木板的时候发现，vue的版本还是2.5.2版本。查过官方文档之后了解到，vue-cli有最新版本，需要重新安装，而且新建项目的方式也有所不同。这篇文章将针对vue以及vue-cli最新版本进行介绍。
vue-cli最新官方文档
vue-cli官方解释是，它是一个基于vue.js进行快速开发的完整系统，提供：
接下来废话少说，我就直接说说vue-cli最新版本怎么安装，怎么新建项目。
1. 关于旧版本
Vue Cli的包名称由vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的vue-cli(1.x或2.x)，你需要先通过npm uninstall vue-cli -g卸载它。(注：安装linux系统的注意一下，包括深度以及ubuntu用户，执行这句命令前，需要添加sudo来给这条语句一个执行权限)2. Node版本要求
Vue Cli需要Node.js 8.9或更高版本。目前我电脑中安装的是8.12.0版本。windows系统的小伙伴们可以直接在node官网下载安装包进行安装。但是linux系统的小伙伴们就没那么幸运了，即使是下载了node官方的压缩包，大家还是一脸懵逼，不知道怎么用。这里做个小插曲，给大家以ubuntu版本的liunx系统为例，讲一下怎么升级node.js到最新稳定版本。3. node.js中文版官方网址
ubuntu官方包管理中，node.js最新版本是8.10.0版本，因为我们是一群患有重度强迫症的程序员，总是会在有新的稳定版本的东西出来后，就要更换，所以官方源中的版本并不满足于我们，so，我们要从其他源中来下载最新且稳定的版本。
首先打开我们的终端，然后在里面执行curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -这句命令，来获取最新的下载安装源，之后输入sudo apt-get install -y nodejs来安装最新版本的node.js。安装成功之后，我们执行node -v来看一下版本。(v8.12.0)
好，收！有点跑题了，有兴趣的小伙伴可以私下试一试，注：如果系统不小心瘫痪，本人概不负责(开个玩笑哈，我已经试验成功了，不然就不会写这篇文章了)
接下来，我们就来说说怎么安装最新版的vue-cli。其实很简单，就一句命令：npm install @vue/cli -g (啊，是的，我又要写注意了，其实就是想提醒一下linux系统的小伙伴，别忘了加sudo给权限。O(∩_∩)O)
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。当然，你还可以用下面这个命令来检查其版本是否正确(3.x):
vue --version
到此为止，Vue Cli就安装成功了，但是...emmm...你以为安装成功就大功告成了么？嘿嘿，接下来的坑，你们不想跳都不行了，恭喜你，成功进入天坑~~~
2. 创建一个项目
vue create
来，我们运行以下命令来创建一个新项目：
vue create hello-world
小伙伴们，这里有个坑，就是你新建项目的时候，不能用驼峰方式命名项目名称了，它会报错的，只能用全小写外加下划线的方式。不信邪的小伙伴们可以试试哈，要是成功了记得告诉我一声，让我也开心一下~~~
接下来我就讲讲具体怎么创建项目：
这里我选择的是自定义安装，也就是第二个。
因为个人习惯的问题，我选择的是babel、Router、Vuex、Linter/Formatter、unit Testing、E2E Testing。选择完成后，就按回车进入下一步。
因为我的项目不需要，所以我选择了n。
这里我选择的是第三个，标准配置。
我在这里选择的是第一个，在保存的时候检查。第二个的意思是在提交的时候检查。根据个人需要来选择吧。
前端的单元测试目前有两个比较热的框架，一个是karma+mocha+chai的方式，一个是jest。根据个人习惯选择就好，因为我比较喜欢第一种，所以我选择的是第一种。小伙伴们不用急，关于单元测试这块，我会找时间写博客的。
关于e2e测试，做前端开发的小伙伴有些可能对e2e测试没什么概念，我这里简单说一下这是做什么的。e2e，中文解释为端到端测试。首先前端的测试分为两种，一个是单元测试，另一个就是e2e测试了。e2e测试主要是来测试页面的业务逻辑，主要注重用户体验。可以模仿用户在页面的点点点操作。有兴趣的小伙伴可以专门学一下。这里就不在赘述了。
因为个人习惯吧，我比较喜欢用nightwatch框架，语法简洁，比较容易理解，至于Cypress框架，本人没有接触过，所以不敢妄加评论。有会的小伙伴可以教教我哈~~~~
这里是在问你，怎么存放这些配置文件。第一个是多带带存放，第二个是集成在package.json。我选择第一个，多带带存放。
这里是在询问你是否保存当前配置，我选择的是否。你也可以根据你的习惯选择是，下一个在创建项目的时候，就会出现一个你保存过的配置选项。
选择完成后，项目就会自动创建，并且会默认安装你选择的这些插件或模块。到此为止，项目就算创建完成了。但是，哈哈哈，是的，还有个坑在等着你们~~~创建过vue项目的小伙伴有没有遇到过安装chromedriver时，报错的？肯定有...
就比如上图中的错误。这个问题网上有一堆教程，有的会说，用npm install chromedriver –chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver这个命令就行了。没错，你在多带带安装这个插件的时候，可以用这个命令，但是咱们这是用@vue/cli命令在创建项目啊，如果这一步过不去，后面的就全都失败了，你打开项目文件夹之后就会傻眼了，里面除了一个package.json还有个node_module文件夹，这是项目创建失败的表现。这可咋整~~~别急，这个错误的出现可能是因为FQ的问题，有的小伙伴会说，我电脑安装了FQ软件了啊？可是，这个是通过npm管理器进行安装的，并不是所有FQ软件都能让它正常运行。所以我们需要在本地全局配置一下chormedriver源，打开终端就一个命令：npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver。然后在重新建项目就会发现一次性通过，堪称完美~~~
进入到这一步，就说明你已经成功了。然后我们打开项目目录：
左侧是新建好的项目，但右侧是vue-cli 2.x版本创建的目录。我们看到，新建的项目没有了build和config文件夹。这也是@vue/cli 3.0的新特性，一些webpack打包的配置，我们可以自己动手去配置了，正好也给了我们学webpack的机会。这里就先不讲新项目的webpack配置了，有兴趣的小伙伴可以自己研究着配置。我下篇博客会讲新项目究竟如何配置webpack。敬请期待~~~~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1763.html
摘要：从零开始搭建一个项目一搭建一个可靠成熟的项目介绍我是去年六月份接触的，当时还是个菜逼，当然现在也是，写了一年，抄代码的时候一直是，在别人的框架基础上开发，然后渐渐发现很多的模板都各有优点，所以慢慢的开始集合到了一起。 从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一） 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月...
摘要：查看安装是否正常回车后看到输出当前安装的版本号，例如，即安装正常通过以上步聚，说明已经安装完并能正常运行。再次用脚手架搭建项目第二步将模块安装完成后，就可以使用以下命令创建项目了。 前言 世间万难 无非一拖二懒三不读书 对 说的就是我 突然觉得这句话说的很对，自从上次写完nodejs安装及npm全局模块路径的设置已经过去两月有余，而我的vue框架学习也就止步于此。还是没有给自己施加压力...
摘要：什么是读音，类似于是一套用于构建用户界面的渐进式框架。的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 什么是vue.js Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化...
摘要：下面来就来讲讲脚手架的安装吧。如何安装安装只需要在终端下输入下面一条命令自带不需要安装安装完成后使用即可。原因是的问题，要求版本是。想用安装，就必须用安装一下。 前言 Vue作为前端三大框架（Angular，React，Vue）之一，号称是最简单，最容易上手的框架，同时也是行内的大趋势，还可以用来开发最火的小程序。具有开发快，双向数据流等特点，有些人认为Vue是Angular和Reac...
摘要：下面来就来讲讲脚手架的安装吧。如何安装安装只需要在终端下输入下面一条命令自带不需要安装安装完成后使用即可。原因是的问题，要求版本是。想用安装，就必须用安装一下。 前言 Vue作为前端三大框架（Angular，React，Vue）之一，号称是最简单，最容易上手的框架，同时也是行内的大趋势，还可以用来开发最火的小程序。具有开发快，双向数据流等特点，有些人认为Vue是Angular和Reac...
阅读 2292·2021-11-22 12:01
阅读 1945·2021-11-12 10:34
阅读 4483·2021-09-22 15:47
阅读 2796·2019-08-30 15:56
阅读 2846·2019-08-30 15:53
阅读 2380·2019-08-30 13:53
阅读 3344·2019-08-29 15:35
阅读 3085·2019-08-29 12:27
