使用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>

結果如下:

到這裏,基本的組件就已經搭建完畢了。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章