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>
結果如下:
到這裏,基本的組件就已經搭建完畢了。