Vue.js使用vue-cli快速构建vue项目

        之前说要整理一篇npm构建vue项目的文章，今天终于想起来了，今天就来搞一搞吧。构建vue项目之前，首先我们要了解的一下npm和vue-cli。

什么是npm？

        首先说一说什么是npm，npm全称Node Package Manager，它是一个NodeJs的包管理工具，它可以通过命令在项目导入第三方包。我们使用vue-cli构建vue项目就需要用到npm。npm有以下几种应用场景：
        （1）允许用户从NPM服务器下载别人编写的第三方包到本地使用。
        （2）允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
        （3）允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
        这三个是我从菜鸟教程上粘过来的，我只在第一种场景下使用过，作为一个后端人员，对这个研究还真不多，详细的我也就不解释了。水平有限，我就只分享我知道的吧。

什么是vue-cli？

        Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。我自己就把它当成了一个快速构建vue项目的工具，说实话是真的快。直接跳过繁琐的配置。直接通过命令就构建、vue项目。

安装npm

        我们要想使用npm必须要现在我们的电脑上安装它。在新版的NodeJs中已经集成了npm，所以我们直接安装NodeJs就可以使用vue了。

安装NodeJS

        安装NodeJs我们可以直接去它官网下载安装包就行。这里放一个官网的连接：NodeJS官网，如下图：

        我下载的是图中的10.13.2版本。现在它已经又更新了。下载完成之后一路默认安装即可。当然也可以修改默认的安装路径，不过修改之后会涉及到一个node cache缓存的路径配置问题，我嫌麻烦就没有修改，如果不修改，npm下载的所有包都会默认存放在系统的C盘中。

验证安装是否成功

        好了，继续说正题。安装完成之后，我们打开命令行验证一下是否成功。输入如下图命令node -v和npm -v，如果出现版本号，即说明安装成功。

安装vue-cli

        安装完npm之后，我们还无法构建vue项目，因为构建vue项目其实使用的是vue-cli，npm只是辅助我们下载第三方包的。另外就是让用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。而vue-cli我们就可以理解问是vue提供的编写命令行的程序，如果不安装vue-cli，系统就无法识别我们输入的命令。下面我们安装vue-cli。

安装命令

npm install -g @vue/cli

        我们输入安装命令之后会出现如下界面，这就是在安装vue-cli，如果已经安装的话会更新，没有安装就会直接安装。

验证安装是否成功

        安装完成之后，我们打开命令行验证一下是否成功。输入命令vue --version，如果出现如下图的版本号，即说明安装成功。

快速构建vue项目

        到这里，我们的一切准备工作就完成了，我们可以打开编辑器来构建vue项目，我使用的vscode，可能有一些人用的是Hbuilder或者webstorm，还是其他的一些编辑器软件，命令都是一样的，只要找到并打开软件提供命令行编辑面板就可以了。

项目创建

        项目的构建命令就如下图所示，格式vue init webpack 项目名称，我在这里构建了一个名为myproject的项目。下图正在下载项目模板。

完成配置

        模板下载完成时候，我们会进入一个交互配置，由我们自己来选择。输入y或者n即可。一般有一些文章会说直接一路默认就可以，不过，千万不要一路默认，我就被坑的很惨。

        上图，我已经标注了几个配置的，其中ESLint那一项，千万不要确认，如果选择yes之后，项目中的js代码无论少一个分号，或者哪里多一个空格都会导致项目启动失败，这个JS的语法本来就不是特别严谨，如果加上ESLint验证之后，那将是灾难，个人感觉。我当时就被这玩意搞得很烦，之后索性在构建项目的时候就把这一项给禁用了。禁用之后我们就可以一路回车到底了。如下图是在正在下载第三方包构建项目。vue-cli构建的项目默认会引入一些常用的第三方包。剩下的就是等待了。如果你的网络不是太慢的话，大概一两分钟就可以构建成功。

        如果我们看到命令行界面中出现如下部分，则说明我们的项目已经构建成功了。

项目目录结构

        下图，我已经标注了几个目录，之后的vue项目开发我们就主要跟这几个目录打交道。

        这里我介绍一下，这几个目录里边的构造，和具体是干什么的。
        build：build文件夹是存放我们项目完成之后打包部署的文件。vue-cli构建的vue项目的默认的打包命令npm run build
        src：src目录下有assets，这个文件夹中一般存放一些静态的图片文件。components，这个文件夹存放的是我们自己编写的vue组件文件，vue项目的开发都是使用单文件组件的形式来开发，也就是组件化开发。router，这个文件夹中存放的是我们控制路由跳转的js文件——index.js。App.vue，这个单文件组件是vue-cli给我们提供的一个主组件容器，我们的所有组件都会被加载到在这个组件中，然后再将App.vue渲染至浏览器。main.js，这个文件是我们整个项目的入口文件。这里我们指定了，最终的App.vue文件渲染到哪个html文件的哪个元素中，一般都是只有一个index.html中的div中，div的id为#app。这也就是为什么vue项目被称作单页面应用。项目只通过html文件来显示。

运行项目

        最后我们来运行一下项目，vue-cli构建的项目，默认的运行命令为：npm run dev如下图：

        注意这里，一定是在项目的根目录下的命令行界面运行。不然是无法运行成功的，如果出现如上图所示就说嘛项目运行成功。vue这里给我们预先写好了一个页面，我们来看一下。直接ctrl+鼠标点击上图的地址就可以跳转至浏览器。运行效果如下图：