VUE 集成 element-ui

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

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

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

啟動之后，修改 HelloWorld.vue

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

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

這個時候，頁面雖然有button 標簽，但是沒有button 樣式，
引入：

npm install babel-plugin-component -D

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

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

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

GPU云服務器云服務器 vue集成webrtc vue集成阿里云webrtc vue集成webrtc視頻語音通話 vue 集成webrtc實時音視頻demo

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97701.html

相關(guān)文章

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

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

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

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

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

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

or0fun 2019-08-26 17:05 評論0 收藏0
vue 服務器端渲染 nuxt.js初探

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

bingchen 2019-08-23 14:53 評論0 收藏0
前端小姿勢

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

JeOam 2019-08-02 16:11 評論0 收藏0