Vue Cli安装以及使用

 

因为公司项目要用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 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

接下来废话少说，我就直接说说vue-cli最新版本怎么安装，怎么新建项目。

1. 安装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。

• 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。敬请期待~~~~