由于公司项目要用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.js进行快速开发的完整系统，提供：vue
- 经过 @vue/cli 搭建交互式的项目脚手架。
- 经过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
- 一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 能够经过项目内的配置文件进行配置；
- 能够经过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套彻底图形化的建立和管理 Vue.js 项目的用户界面。
接下来废话少说，我就直接说说vue-cli最新版本怎么安装，怎么新建项目。node
- 安装Vue Cli
1. 关于旧版本
Vue Cli的包名称由vue-cli改为了@vue/cli。若是你已经全局安装了旧版本的vue-cli(1.x或2.x)，你须要先经过npm uninstall vue-cli -g卸载它。(注：安装linux系统的注意一下，包括深度以及ubuntu用户，执行这句命令前，须要添加sudo来给这条语句一个执行权限)linux2. Node版本要求
Vue Cli须要Node.js 8.9或更高版本。目前我电脑中安装的是8.12.0版本。windows系统的小伙伴们能够直接在node官网下载安装包进行安装。可是linux系统的小伙伴们就没那么幸运了，即便是下载了node官方的压缩包，你们仍是一脸懵逼，不知道怎么用。这里作个小插曲，给你们以ubuntu版本的liunx系统为例，讲一下怎么升级node.js到最新稳定版本。webpack3. 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)程序员
好，收！有点跑题了，有兴趣的小伙伴能够私下试一试，注：若是系统不当心瘫痪，本人概不负责(开个玩笑哈，我已经试验成功了，否则就不会写这篇文章了)web
接下来，咱们就来讲说怎么安装最新版的vue-cli。其实很简单，就一句命令：npm install @vue/cli -g (啊，是的，我又要写注意了，其实就是想提醒一下linux系统的小伙伴，别忘了加sudo给权限。O(∩_∩)O)chrome
安装以后，你就能够在命令行中访问 vue 命令。你能够经过简单运行vue，看看是否展现出了一份全部可用命令的帮助信息，来验证它是否安装成功。固然，你还能够用下面这个命令来检查其版本是否正确(3.x):vue-cli
vue --versionnpm
到此为止，Vue Cli就安装成功了，可是...emmm...你觉得安装成功就大功告成了么？嘿嘿，接下来的坑，大家不想跳都不行了，恭喜你，成功进入天坑~~~
2. 建立一个项目
vue create
来，咱们运行如下命令来建立一个新项目：
vue create hello-world
小伙伴们，这里有个坑，就是你新建项目的时候，不能用驼峰方式命名项目名称了，它会报错的，只能用全小写外加下划线的方式。不信邪的小伙伴们能够试试哈，要是成功了记得告诉我一声，让我也开心一下~~~
接下来我就讲讲具体怎么建立项目：
- 首先，咱们在终端里输入命令，而后回车，出现如下界面：
这里我选择的是自定义安装，也就是第二个。
- 接下来进入第二步，选择你须要的模块。
由于我的习惯的问题，我选择的是babel、Router、Vuex、Linter/Formatter、unit Testing、E2E Testing。选择完成后，就按回车进入下一步。
- 接下来会让你进行一系列的框架或插件版本选择，首先是路由部分
由于个人项目不须要，因此我选择了n。
- eslint配置
这里我选择的是第三个，标准配置。
- 检查设置
我在这里选择的是第一个，在保存的时候检查。第二个的意思是在提交的时候检查。根据我的须要来选择吧。
- 单元测试
前端的单元测试目前有两个比较热的框架，一个是karma+mocha+chai的方式，一个是jest。根据我的习惯选择就好，由于我比较喜欢第一种，因此我选择的是第一种。小伙伴们不用急，关于单元测试这块，我会找时间写博客的。
- e2e(端到端测试)
关于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。敬请期待~~~~