作为一名前端人员,并且作为一名使用过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进行二次封装:
封装目录结构是: