史上最详细Vue-CLI脚手架快速创建Vue项目教程

---

前言

Vue CLI是用于快速Vue.js开发的完整系统。俗称Vue CLI脚手架，是一套大众化的前端自动化解决方案，他的核心是 webpack，框架是vue，还有相关辅助插件组成。

安装Vue CLI

安装步骤省略，输入命令 vue -V 输出如下版本信息，即安装成功了，提示：2.0以下版本是没有提供图形化界面的，只能通过命令创建。

使用参考文档

1、https://cli.vuejs.org/guide/

2、https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#%E5%BC%80%E5%A7%8B

一、创建项目存储文件夹

二、CMD打开当前文件夹所在路径

通过以下vue ui命令使用图形界面来创建和管理项目：

vue ui

三、项目的配置

1、创建项目存储位置

2、项目名命名

3、项目预设

选择手动，这样自己定制，项目会比较简洁。

4、项目功能配置

es6语法检查，默认选中，最好去掉，不然你会爆炸的。

5、项目历史记录配置

6、是否保存模板（下一次可以使用该配置模板开发）

看你喜好，想存就存。

7、测试

项目创建完成之后，可测试是否成功，

8、扩展，集成Element-ui

其实如上步骤，我们使用脚手架就已经快速创建好了一个前端项目了，实际中，你可能还要依赖于其他框架如Element-ui和vue完成整个项目页面的开发，以及还要其他必要的库，如axios库。你可以通过命令的方式在开发工具中，进行安装，也可以直接在vue_cli可视化界面进行安装。

如下已经成功安装了。

9、安装Axios依赖库

根据实际需求，可选择依赖的环境。

10、本地测试

使用开发工具打开刚刚我们使用脚手架创建好的项目。

运行测试（不同的开发工具方式可能不一样，有的开发工具不需要命令启动），这里以IDEA为开发工具：

输入命令：

npm run serve

输出以上信息表示成功了。

11、测试element-ui

找到入口页面，App.vue，我们试着使用element-ui的button将该行代码换掉。

element-ui官网：https://element.eleme.cn/#/zh-CN/component/button

浏览器页面效果

12、测试axios库

导入axios库

import axios from 'axios'

编写业务请求HTTP接口：

 // GET请求
 axios.get('/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

关于axios的具体使用，有如下推荐文档：

1、https://github.com/axios/axios

2、https://www.kancloud.cn/yunye/axios/234845

3、http://www.axios-js.com/zh-cn/docs/

13、axios发送HTTP请求解决后端跨越问题

穿越该篇博文，你想要的都有