Vue:vue2.0全家桶搭建element-ui+axios+vuex+mockjs_vue2+element初始化项目-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44599809/article/details/104145173

本文档详细介绍了如何使用Vue2.0搭建项目，包括初始化项目、集成Element-UI、设置Axios、应用MockJS以及Vuex的状态管理。通过一步步操作，帮助开发者理解并实现这些技术的集成和使用，适用于快速启动Vue项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为一名前端人员，并且作为一名使用过vue框架的前端人员，相信都听说过vue全家桶（1.项目构建工具vue-cli、2.路由vue-router:http://router.vuejs.org、3.状态管理vuex:http://vuex.vuejs.org、4.http请求工具axios:http://www.axios-js.com/zh-cn/docs/、5.样式element-ui:https://element.eleme.cn/#/zh-CN/component/installation、6.以及有时候后台没有提供接口需要自己模拟数据请求，我经常使用的mockjs）。为了方便与大家共同交流，特将自己搭建项目的方法记录下来。

初始化vue2.0项目
使用elment-ui
使用axios
使用mockjs
使用vuex

一、初始化项目

之前已经分享过如何进行vue-cli 2.0安装及项目搭建，如果忘了，则可以去查看之前博客，在这里我就直接使用脚手架安装项目；

vue init webpack vue_all  //默认安装即可，vue-router就已经安装整合到项目中
cd vue_all
npm run dev  //运行项目即可

若自己想封装组件然后注册成全局组件，在components下创建base文件夹，存放需要注册至全局的组件，有mian.js文件中写如下代码：

// 引用公共组件
let componentFiles = require.context('./components/base', false, /\.vue$/)
componentFiles.keys().map((item, index) => {
  let componentFile = item.replace(/^\.\/(.*)\.\w+$/, '$1');
  let value = componentFiles(item)
  Vue.component(`cui${componentFile}`, value.default)
})

二、element-ui

1.	npm i element-ui –save   //安装element-ui插件
2.	在main.js文件中输入以下代码：
	import ElementUI from 'element-ui'
	import 'element-ui/lib/theme-chalk/index.css'
	Vue.use(ElementUI)
3. 若想按需引入组件，则可以按照element-ui官网进行相关插件安装，官网地址：https://element.eleme.cn/#/zh-CN/component/quickstart
4. 这里只是介绍简单项目搭建，若想更加深入的了解可去官网查看

在这里插入图片描述
以上即完成element-ui的安装，参考官网给出的组件与使用方法，在页面中需要的地方调用即可。

三、Axios

axios是promise实现的，提到promise，首先应该想到IE不支持，所以应该先加个垫片，给IE做下兼容性处理:

npm install --save babel-polyfill  //安装es6转译组件
然后再main.js中引入 ：
import 'babel-polyfill'

安装axios

npm i axios --save

为了方便项目当中对于接口的管理，我常会对axios进行二次封装：
封装目录结构是：