spring boot + vue + element-ui全棧開發入門——整合element-ui

冬子哥發表於2018-02-09
Spring BootVueUI全棧

 一.IDE開發工具

 

常用的開發工具有webstorm和sublime。

我個人喜好用Atom+外掛的形式

開啟Atom，在file --> settings --> packages中收入vue開發相關的外掛

beautify：程式碼格式

atom-html-preview：html程式碼提示

language-vue、language-vue-component：vue語言

lint-sass-vue：vue的sass語言

vue-autocomplete：vue語法提示

 

檔案結構如下：

 

二、安裝元件

 

進入package.json同級目錄

 

執行

cnpm install --save axios

　　

安裝axios，用於呼叫http請求

 

 

安裝element-ui庫

cnpm install --save element-ui

　　

安裝font-awesome圖示庫

cnpm install --save font-awesome

　　

安裝sass庫

cnpm install --save-dev node-sass
cnpm install --save-dev sass-loader

　　

安裝mock.js

cnpm install --save-dev mockjs
cnpm install --save-dev axios-mock-adapter

 

其中，axios-mock-adapter能攔截http請求的同時模擬需要的資料　

 

 

三、生成好看的主題風格

 

進去https://elementui.github.io/theme-chalk-preview/#/zh-CN網站，選擇喜歡的顏色

這裡，我選擇了一個深藍色作為主題顏色，並下載

 

 

把下載的主題放置目錄下 src\assets\theme

 

四、編寫程式入口

 

在main.js中匯入“font-awesome”和“element-ui”

import 'font-awesome/css/font-awesome.min.css'

import ElementUI from 'element-ui'
import './assets/theme/element-#0b0a3e/index.css'
Vue.use(ElementUI)

　　

完整的main.js程式碼如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

import 'font-awesome/css/font-awesome.min.css'

import ElementUI from 'element-ui'
import './assets/theme/element-#0b0a3e/index.css'
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　　

 

 

 

返回目錄

 

git程式碼地址：https://github.com/carter659/spring-boot-vue-element.git

 

如果你覺得我的部落格對你有幫助，可以給我點兒打賞，左側微信，右側支付寶。

有可能就是你的一點打賞會讓我的部落格寫的更好:)

相關文章