Vue-CLI脚手架

前言
安装Vue CLI
使用参考文档
- 一、创建项目存储文件夹
- 二、CMD打开当前文件夹所在路径
- 三、项目的配置
- - 1、创建项目存储位置
  - 2、项目名命名
  - 3、项目预设
  - 4、项目功能配置
  - 5、项目历史记录配置
  - 6、是否保存模板（下一次可以使用该配置模板开发）
  - 7、测试
  - 8、扩展，集成Element-ui
  - 9、安装Axios依赖库
  - 10、本地测试
  - 11、测试element-ui
  - 12、测试axios库
  - 13、axios发送HTTP请求解决后端跨越问题

前言

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请求解决后端跨越问题

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

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

基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
一步步教你搭建Android开发环境（有图有真相）--“自吹自擂：史上最详细、最啰嗦、最新的搭建教程”
声明:转摘请注明http://blog.csdn.net/longming_xu/article/details/28241045 前言:为什么要写这么一篇文章?网上介绍Android开发环境搭建的文 ...
史上最详细的Kali Linux破解Wifi无线网络教程
有人说,我会用WiFi万能钥匙就是懂破解了?这想法的确是有点天真,如果说出去可能会被人取笑.首先今天给大家讲解下Wifi破解的原理. 1.Wifi万能钥匙的工作原理是共享收集比如A装了万能钥匙,然后 ...
史上最详细、最完全的jupyter notebook使用教程，Python使用者必备！——ipython系列之三
一.什么是jupyter 1.简介: jupyter notebook是一种 Web 应用,能让用户将说明文本.数学方程.代码和可视化内容全部组合到一个易于共享的文档中.它可以直接在代码旁写出叙述性文 ...
server新手引导 sql_史上最详细SQL Server 2008安装步骤图解新手教程
编者按:本篇由IT认证考试资源网介绍SQL Server 2008的安装,SQL Server 2008在企业中是非常重要的应用,例如各种财务系统.erp系统.oa系统等都会用到sql数据库,网站也可 ...
react脚手架快速创建react项目
方法一: 1.本地安装node.js/npm 此步省略 2. npm install -g create-react-app 3.create-react-app my-project 4.npm ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
android项目实战博学谷源码_Vue框架：史上最详细的Vue实战项目之喵喵电影（视频+源码）...
Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.所以,对于web前端开 ...
ESP8266 Non-OS SDK 开发之旅基础篇① 初识 Non-OS SDK，史上超级详细手把手教小白20分钟快速搭建SDK软件开发环境，完成第一个例子Hello World！
文章目录 1.前言 2. SDK概述 2.1 SDK使用流程 2.2 ESP8266 HDK -- 硬件开发工具 2.3 ESP8266 SDK -- 软件开发工具包 2.3.1 Non-OS SDK ...

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