使用webstrom搭建Vue+Element+axios+mockjs前端Demo
Vue官网地址:https://cn.vuejs.org/Element官网地址:http://element-cn.eleme.io/#/zh-CNaxios npm地址:https://www.npmjs.com/package/axiosmock GitHub地址:https://github.com/ToNiQian/mockjs一、全局安装vue cli使用npm,命...
Vue官网地址:https://cn.vuejs.org/
Element官网地址:http://element-cn.eleme.io/#/zh-CN
axios npm地址:https://www.npmjs.com/package/axios
mock GitHub地址:https://github.com/ToNiQian/mockjs
一、全局安装vue cli
使用npm,命令如下:
npm install --global vue-cli
检查npm全局vue是否安装成功
npm list -g --depth 0
安装成功,如图:
二、进入工程目录构建vue项目
操作如下(我的工程目录为E:\Vue):
npm构建命令如下:
vue init webpack vue-demo
注意:项目名称要小写
三、使用Webstrom打开工程
使用package.json,运行工程
网页查看工程是否正常运行
正常运行,如图:
四、使用Element-ui
使用webstrom安装element,File>Setting>Languages&Frameworks>Node.js and NPM>+
搜索element-ui并安装
五、main.js中引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
六、安装axios
同样方式,安装axios并在main.js中引用。
import axios from 'axios'
Vue.prototype.$http = axios
将axios变为全局变量$http,可在其他组件中测试功能是否正常。
mounted(){
this.$http({
method: 'get',
url: '/list'
}).then(res=>{
console.log(res);
})
}
七、安装mockjs
同样方式,安装mockjs,然后新建api文件夹,创建mock.js,编写模拟接口
import Mock from 'mockjs'
Mock.mock('/list', {
txt: '你好'
})
最后在main.js中引用mock.js
import './api/mock'
测试结果如下:
八、安装vuex
同样方式,安装vuex,然后新建store文件夹,创建index.js,复制如下代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
user: '张三'
}
export default new Vuex.Store({
state
})
在组件中测试,获取user
<script>
import store from '../store/index'
export default {
store,
mounted(){
console.log(store)
}
}
</script>
结果如下:
到这里,基本的组件就已经搭建完毕了。
更多推荐
所有评论(0)