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