使用vue-cli(vue脚手架)快速构建项目的方法

vue-cli是vue.js项目官方发布的脚手架，使用vue-cli可以快速创建vue项目。本文将从实践的角度介绍整个施工过程。

1.前言避坑

其实这次使用vue-cli的过程并不顺利。经过反复尝试，我遇到了以下错误：

创建vue-cli项目时出现错误报告

在网上搜了很多资料，发现原来的node版本太低了。虽然这个“太低”的问题我没有找到官方的解释，但是根据国外网友的经验，我至少应该用node6。在我将node4更新为node8之后，我没有报告错误，并且顺利地构建了它。相关问答帖：https://github.com/vuejs/vue-cli/issues/618

确认节点和npm的版本

把这个放在前面就是说我们希望在搭建之前，要保证节点更新到6以上，这样可以少走一些弯路。让我们开始正式介绍整个建造过程。

2.使用vue-cli构建项目

下面的整个过程都是基于node.js和cnpm的安装，这里不详细介绍如何安装node.js。这里简单介绍一下如何在全球范围内安装cnpm:

Npm安装cnpm-g-registry=https://registry.npm.taobao.org事实上，使用npm命令和cnpm命令来安装vue-cli是可以的。个人觉得用NPM安装比较慢，很可能因为网络问题出错，所以用cnpm比较稳定。

(1)全局安装vue-cli，并在命令提示符窗口中执行：

cnpm安装-g vue-CLI

安装vue-cli

以上提示表示vue-cli安装成功，可以正式创建vue-cli项目。

(2)成功安装vue-cli后，通过cd命令进入要放置项目的文件夹，在命令提示符窗口中执行命令创建vue-cli项目：

vue init网络包

创建vue-cli项目

确认项目创建后，需要输入项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等。详见上图。安装成功执行后，将生成以下文件目录：

生成文件目录

(3)生成文件目录后，使用cnpm安装依赖项：

cnpm安装

安装依赖关系

(4)最后需要执行命令：npm运行dev启动项目，启动完成后会自动弹出默认网页：

启动一个项目

启动一个项目

默认网页

至此，即使你成功用vue-cli搭建了一个vue项目，传播百花齐放~

3.目录结构及其相应的功能

通过vue-cli构建vue项目会自动生成一系列文件，这些文件的具体结构和文件对应的作用可以解释如下：

构建/# webpack编译任务配置文件：开发环境和生产环境 . 配置/项目核心配置 . 节点_模块/。程序入口文件 App.vue #程序入口vue组件 组件/#组件 . 资产/#资源文件夹。 一般放一些静态资源文件.静态/#纯静态资源(直接复制到dist/static/) 测试/ 单元/#单元测试 规格说明/#测试规范测试入口文件 karma.conf.js #测试运行配置文件 e2e/#端到端测试 规格说明/#测试规范 自定义-断言/#端到端测试自定义断言运行测试脚本运行测试脚本night watch . conf . js #运行测试配置文件巴别塔配置文件。编辑配置#编辑配置文件。gitignore #用于过滤一些受版本控制的文件。例如，如果node_modules文件夹index.html # index.html入口模板文件 package.json #项目文件记录了一些命令和依赖项以及简短的项目描述信息 README.md #介绍了您自己的项目，则可以参考github上带有更多star的项目。构建/以上是本文的全部内容。希望对大家的学习有帮助，支持我们。