Vue 在Vue中快速使用ElementUI

2021-09-20 21:51:12 字數 1236 閱讀 5771

最近使用vue,順道使用elementui,在vue專案中音容elementui的方法

idea開啟termianl,在vue專案中使用npm安裝

1.安裝:

npm install element-ui -s
2.引入:

(1)整體引入

在專案的main.js中寫入:

import elementui from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

vue.use(elementui)

(2)部分引入

先安裝:babel-plugin-component

npm install babel-plugin-component -d
然後修改vue專案中的.babelrc配置檔案

在env的test中增加"libraryname": ["element-ui"],這項配置

然後你就可以向下面這樣,單獨使用部分元件啦  

import  from 'element-ui'//這裡僅引用了button, select這兩個元件

import 'element-ui/lib/theme-chalk/index.css'

vue.use(button)

vue.use(select)

當然也可以像下面這樣

import  from 'element-ui'//這裡僅引用了button這個元件

import 'element-ui/lib/theme-chalk/index.css'

vue.component(button.name, button);

專案搭建中遇到的問題:

在import的index.css時候提示未找到dependency,將

import 'element-ui/lib/theme-default/index.css'
改為

import 'element-ui/lib/theme-chalk/index.css'

vue快速使用

1 引用指令碼 vm.data data true vm.el document.getelementbyid example true 例項 使用srcipt做法 doctype html html head meta charset utf 8 title title head body div...

stylus在vue中的使用

stylus是乙個css預處理器,比較流行的css預處理器有sass less stylus,它們都一樣,都是css的語法糖,可以使用變數,可以有簡單的邏輯,使css的開發效率更高,更易維護。stylus來自node社群,它的語法相容性強,個人覺得也更加簡潔,選擇在vue中使用。以webpack模板...

axios在vue中的使用

axios的安裝與配置 使用 npm npm install axios使用script匯入 在vue cli中使用 import axios from axios 在原型上定義方法,就可以在元件的methods中寫this.http 這個 http名字可以自己自定義,但注意不要重複衝突 vue.p...