VUE 集成 element-ui

waterc 發(fā)布于2019-08-23 11:56 / 479人閱讀

摘要：項(xiàng)目偏管理類型，沒有太復(fù)雜的交互設(shè)計(jì)。因此就選用了框架進(jìn)行頁面開發(fā)。簡(jiǎn)單說下，首先第一步搭建工程。從官網(wǎng)，用命令搭建，記得配置環(huán)境。啟動(dòng)之后，修改主要是體現(xiàn)項(xiàng)目中引入然后再修改測(cè)試看到頁面插件較大，我們項(xiàng)目也就引用一些常用組件。

項(xiàng)目偏管理類型，沒有太復(fù)雜的交互設(shè)計(jì)。因此就選用了element-ui框架進(jìn)行頁面開發(fā)。
簡(jiǎn)單說下，首先第一步搭建vue工程。從vue官網(wǎng)，用命令搭建，記得配置node環(huán)境。

啟動(dòng)之后，修改 HelloWorld.vue

主要是體現(xiàn)element-ui---
項(xiàng)目中引入：

npm i element-ui -S

然后再 main.js

import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUI)

修改 HelloWorld.vue

看到頁面

element 插件較大，我們項(xiàng)目也就引用一些常用組件?？梢灾灰胄枰慕M件，以達(dá)到減小項(xiàng)目體積的目的
例如：我們只引用 button 組件：
修改main.js
import {Button} from "element-ui"
Vue.use(Button)

這個(gè)時(shí)候，頁面雖然有button 標(biāo)簽，但是沒有button 樣式，
引入：

npm install babel-plugin-component -D

加載樣式：
修改 .babelrc 文件 plugins 屬性

  "plugins": ["transform-vue-jsx", "transform-runtime", [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],

然后刷新下界面 button 按鈕有樣式了！

云服務(wù)器 GPU云服務(wù)器 vue集成webrtc vue集成阿里云webrtc vue集成webrtc視頻語音通話 vue 集成webrtc實(shí)時(shí)音視頻demo

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97701.html

相關(guān)文章

webpack插件實(shí)現(xiàn)自動(dòng)抽取css中的主題色樣式，并一鍵動(dòng)態(tài)切換主題色（element-ui）

摘要：項(xiàng)目項(xiàng)目中用了，有切換主題色的需要。但官方的方式，有幾個(gè)問題需要下載整個(gè)的樣式，并替換其中的樣式顏色。代碼已開源在，歡迎并提交其他庫的主題色獲取方法。項(xiàng)目項(xiàng)目中用了element-ui，有切換主題色的需要。但官方的方式，有幾個(gè)問題：1、需要下載整個(gè)element-ui的樣式css，并替換其中的css樣式顏色。文件較大，下載慢且影響性能。2、只能替換element-ui本身的顏色樣式，...

dcr309duan 2019-08-26 12:15 評(píng)論0 收藏0
Vue現(xiàn)有項(xiàng)目改造為Nuxt項(xiàng)目

摘要：好了，項(xiàng)目啟動(dòng)了，目錄結(jié)構(gòu)也清楚了，接下來就是整個(gè)現(xiàn)有項(xiàng)目的遷移了目前正在改造項(xiàng)目，文章尚未寫完，會(huì)抽時(shí)間不定期的繼續(xù)更新項(xiàng)目的改造過程及分享改造過程中遇到的問題公司項(xiàng)目，最初只為了實(shí)現(xiàn)前后端分離式開發(fā)，直接選擇了vue框架進(jìn)行開發(fā)，然而現(xiàn)在項(xiàng)目基本完成了，發(fā)現(xiàn)蜘蛛根本就抓取不到網(wǎng)站數(shù)據(jù)，搜索引擎搜出來，都是一片空白沒有數(shù)據(jù)，需要對(duì)項(xiàng)目做SEO優(yōu)化。本人第一次接觸SEO的優(yōu)化，完全...

Invoker 2019-08-26 10:25 評(píng)論0 收藏0
vue 集成 typescript Element UI 之懶人集成法

摘要：背景最近有點(diǎn)時(shí)間，就想把我的項(xiàng)目版本升級(jí)一下，順便在折騰一下踩過的坑官方已經(jīng)寫了，但會(huì)有一個(gè)小坑，但都有解決方案正文引入有好幾種方案，一種引入是還是在文件里寫，不過是集成之后在里加個(gè)。背景最近有點(diǎn)時(shí)間，就想把我的vue項(xiàng)目版本升級(jí)一下，順便在折騰一下typescript... 踩過的坑 element ui官方已經(jīng)寫了d.ts，但會(huì)有一個(gè)小坑，但issue都有解決方案... 正文v...

or0fun 2019-08-26 17:05 評(píng)論0 收藏0
vue 服務(wù)器端渲染 nuxt.js初探

摘要：在調(diào)研插件后，發(fā)現(xiàn)無法滿足以及等要求時(shí)，果斷選用了做服務(wù)器渲染。布局目錄該目錄名為保留的，不可更改。服務(wù)器啟動(dòng)的時(shí)候，該目錄下的文件會(huì)映射至應(yīng)用的根路徑下。它可以在服務(wù)端或路由更新之前被調(diào)用?？捎糜谥付ǚ?wù)端返回的請(qǐng)求狀態(tài)碼。開頭還是來一段廢話：年關(guān)將近，給大家拜個(gè)早年，愿大家年會(huì)都能抽大獎(jiǎng)，來年行大運(yùn)。廢話不多說，直接進(jìn)正文項(xiàng)目環(huán)境：前端vue項(xiàng)目，需要將新增的幾個(gè)路由頁...

bingchen 2019-08-23 14:53 評(píng)論0 收藏0
前端小姿勢(shì)

摘要：文章包含學(xué)習(xí)中遇到的問題小白水平可能會(huì)包含一些錯(cuò)誤或者還沒寫完或者非最佳實(shí)踐僅供參考父子組件的參考官方文檔點(diǎn)我父級(jí)不需要操作額外代碼子代操作方法一這個(gè)的官方會(huì)有介紹子代操作方法二通過這個(gè)實(shí)現(xiàn)的看了不少文章，這種比較多以為例子先簡(jiǎn)單介紹文章包含學(xué)習(xí)中遇到的問題小白水平可能會(huì)包含一些錯(cuò)誤或者還沒寫完... 或者非最佳實(shí)踐僅供參考 1.父子組件的v-model 參考vue官方文檔...

JeOam 2019-08-02 16:11 評(píng)論0 收藏0