使用webstrom搭建Vue+Element+axios+mockjs前端Demo

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>

结果如下：

到这里，基本的组件就已经搭建完毕了。