1.安装node、vue这些最基础最简单的安装的就一一省略过。

1.1 axios 安装

1.2安装 Element-Ui 插件

1.3 安装 qs

1.4  安装 Mock

2.新建一个vue工程,打开cmd cd到工程目录下,或者在文件夹选中项目工程同时按住Ctrl+shift键,右击选中的项目找到【在此处打开powershell窗口】,点击打开

效果如下:

执行命令: vue init webpack

? Generate project in current directory? Yes  选择Yes

? Project name (project2) 你的项目名称

? Project description (A Vue.js project) 项目的描述

? Author (xxx<xxx@xx-xxxxx>) 作者

? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - r
ender functions are required elsewhere

直接回车,

? Install vue-router? (Y/n)  是否要安装路由,看个人情况安装,一般选择安装

? Use ESLint to lint your code? (Y/n)  是否用ESLint 检测代码,学习使用可以选择N,因为安装之后对语法要求非常严格,可能发生不必要的警告或错误,真正项目开发时一定要开启来。

? Set up unit tests (Y/n) 是否要安装测试过程,因情况而定。

? Setup e2e tests with Nightwatch? (Y/n) 因情况而定。

接下来就是一直回车 ----》等待安装完成

2.1 安装 axios  axios具体怎么用,语法是什么请参考官方文档:https://www.npmjs.com/package/axios  英文看不懂???没关系!参考:https://www.kancloud.cn/yunye/axios/234845

执行命令:npm install --save axios   等待安装完毕

vue  main.js配置

导入axios  ===>

import Axios from 'axios'
挂载到原型身上:
Vue.prototype.$axios=Axios;//异步组件挂载到原型
配置完成之后axios就已经安装完成了。
如何使用????
 this.$axios.get("请求url地址").then((response)=>{
console.log(response);//请求成功的数据
}).catch((error)=> {
console.log(error);//请求失败的错误信息
});
使用如此简单还在等什么
2.2 安装 Element-Ui 插件 Element-UI是做什么的呢???它是一款前端UI框架,如何使用???请参考官方文档:http://element-cn.eleme.io/#/zh-CN

执行命令:npm i element-ui -S  等待安装完毕

vue  main.js配置

导入element-ui===>

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element);

配置完成,就可以使用了,使用方法参考文档

2.3 安装qs  qs 是个工具插件,axios post请求时要用到
执行命令:npm install qs 等待安装完毕

vue  main.js配置

导入qs===>

import QS from 'qs'

以上三个插件安装完毕,接下来就是终极配置了。
vue  main.js配置 
// 超时时间
Axios.defaults.timeout = 5000;
// http请求拦截器
Axios.interceptors.request.use(config => {
if(config.method=='post'){
config.data=QS.stringify(config.data);//防止post请求参数无法传到后台 在这里就用到了qs
}
let loading = Element.Loading.service({//使用element-ui的加载条组件
fullscreen: true,
text: '拼命加载中...',
});
return config
}, error => {
let loading = Element.Loading.service({});
loading.close(); //关闭加载前,记得重新定义实例
return Promise.reject(error)
});
// http响应拦截器
Axios.interceptors.response.use(data => {
let loading = Element.Loading.service({});
loading.close();
return data
}, error => {
let loading = Element.Loading.service({
fullscreen: true,
text: '拼命加载中...',
});
loading.close();
return Promise.reject(error)
});

  

2.4 安装 mock 插件,mock 插件是做什么的???  请看官方文档:http://mockjs.com/
命令安装: npm install mockjs 等待安装完毕 如何使用??
在vue 工程下新建一个mock.js的文件,文件名名称为什么要用mock?文件名如何命名无所谓自己喜欢就好。
mock.js里面怎么写?请参考如下代码:
//引入mockjs
const Mock = require('mockjs')
//使用mockjs模拟数据
Mock.mock('/api/data',{
'foods|10-50': [{
'name': "@ctitle(2,10)",
"img": "@image('600x600',#b7ef7c)",
"brief": "@csentence(1,50)",
"price|0-20.0-2": 1,
"num": 0,
"minusFlag": true,
"time": "@time",
"peisongfei|0-100.0-2": 1,
"limit|0-50": 1
}]
});
Mock.setup({
timeout: 2000//请求两秒后才加载数据
});

 语法请参考官方文档

在vue main.js 配置如下:

require('./mock')//此部分引入的是我们所编写的mockjs文档    此处一定要加载进来,重要、重要、重要

接下来就可以在其他.vue页面肆无忌惮的使用了。
如何使用?? look
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
created(){
this.$axios.get("/api/data").then((response)=>{
console.log(response);
}).catch((error)=> {
console.log(error);
});
}
}

 效果:

 
 
 
 

搭建vue脚手架,包含Axios、qs、Element-UI、mock等插件的安装配置的更多相关文章

  1. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  2. Vue(十八)Element UI

    Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...

  3. 搭建vue脚手架

    1.Node.js安装 1.1下载安装 在node.js 官网下载, 根据自己电脑系统安装,一直点下一步即可 1.2测试安装是否成功 Windows+R打开cmd窗口,输入node -v回车出现版本号 ...

  4. 搭建vue脚手架---vue-cli

    vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下 ...

  5. vue脚手架用axios请求本地数据

    首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...

  6. Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)

    ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...

  7. .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记

    1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...

  8. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  9. vue-cli 2.0搭建vue脚手架步骤

    1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue- ...

随机推荐

  1. Linux之 linux7防火墙基本使用及详解

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld  停止: systemctl disab ...

  2. 2.运行成功的Demo(Python+Appium)

    1.打开Appium运行 2.在Pycharm输入代码如下所示: from appium import webdriver desired_caps = {} #初始化 desired_caps['p ...

  3. Jqmobile Secha Ionic比较

    1. Jqmobile 轻量级框架,它的语言基于 jquery 语言容易上手,运行速度快,但是没有 MVC 多人协作 开发的概念,项目比较大后 代码不易维护     (中小项目  1-2 个人开发很适 ...

  4. RHEL6安装Oracle 11g R2

    收藏PDF版质料请点这里:http://download.csdn.net/detail/jifeng3518/6464999 1.使用DVD做yum源1.1.新建dvd挂载目录[root@oracl ...

  5. OneProxy常用参数说明

    5.2.OneProxy常用参数说明 OneProxy的所有可用参数可通过oneproxy --help-all查看.所有参数均可以写入文件中,由OneProxy启动时加载 5.2.1.基本参数 -- ...

  6. 解决移动端H5海报滑动插件适应大部分手机问题 手机端高度自适应

    Html5微信端滑屏海报在各种尺寸的手机上总会有这样那样的问题,经过多次制作总结出来一些小心得,分享下. 我使用的是jquery插件swiper.min.js,动画可以利用animate.css,如果 ...

  7. C# 通过二进制,将多个文件合并为一个。

    C# 通过二进制,将多个文件合并为一个. /// <summary> /// 合并文件 /// </summary> /// <param name="strD ...

  8. char、varchar、varchar2区别

    char varchar varchar2 的区别 区别:1.CHAR的长度是固定的,而VARCHAR2的长度是可以变化的, 比如,存储字符串“abc",对于CHAR (20),表示你存储的 ...

  9. 转转转!!Spring MVC控制器用@ResponseBody声明返回json数据报406的问题

    本打算今天早点下班,结果下午测试调试程序发现一个问题纠结到晚上才解决,现在写一篇博客来总结下. 是这样的,本人在Spring mvc控制层用到了@ResponseBody标注,以便返回的数据为json ...

  10. 马士兵Spring-声明式事务管理-XML

    1.com.cy.model中User.java  和 Log.java 实体 和上一节一样: 2.DAO的实现类com.cy.dao.impl中的UserDAOImpl.LogDAOImpl.jav ...