1. 程式人生 > >vue新建專案(二)安裝element-ui

vue新建專案(二)安裝element-ui

步驟

1.在package.jsondependencies 欄位下面增加 "element-ui": "^1.3.4" 這裡的1.3.4是需要安裝的那個版本。
element-ui官網
2.cd 專案目錄
3.npm install
4. 看到如下結果
[email protected] /Users/xhdx/Desktop/pname
└─┬ [email protected]
├── [email protected]
├── [email protected]
├── [email protected]


└── [email protected]

5.在main.js 下面增加element-ui 的應用

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

6.測試,在src/components/Hello.vue 裡面增加一個測試按鈕;在第4行和第5行之間插入如下程式碼(插入位置大家隨意)

<el-button type="primary">主要按鈕</el-button>

7.執行npm run dev


8.效果:
這裡寫圖片描述

推薦

餓了麼前端還有一套開源的手機端UI,mint-ui
這個引入也很簡單,看文件就行。

相關推薦

vue新建專案()安裝element-ui

步驟 1.在package.json 的 dependencies 欄位下面增加 "element-ui": "^1.3.4" 這裡的1.3.4是需要安裝的那個版本。 element-ui官網。

新建VUE 2.0 專案及引入Element UI 步驟及常見問題

新建Vue專案: 淘寶映象(npm install -g cnpm –registry=https://registry.npm.taobao.org) webpack(cnpm install webpack -g 或 npm install webpack -g) Vue

vue專案中引用element-ui時 讓el-input 獲取焦點的方法

在製作專案的時候遇到一個需求,點選一個按鈕彈出一個input輸入框,並讓輸入框獲得焦點,專案中引用了element-ui 在網上查找了很多方法,但是在實際使用中發現了一個問題無論是使用$ref獲取input元素然後使用focus方法還是使用餓了麼元件自帶的autoFocus都只有在第一次點選按鈕的時候可以讓

vue 專案全域性修改element-ui的樣式

引入了element-ui,但是和我們自己的樣式顏色有很大的不同, 修改例子:在src檔案下建立 element-var.scss,程式碼如下 $--color-primary: yellow;  /*修改按鈕primary的顏色*//* 改變 icon 字型路徑變數,必需 */$--font-

Vue專案中使用element-ui,並引入第三方圖示庫iconfont

1、安裝 npm install element-ui --save-dev 2、在main.js檔案中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.c

基於vue cli 3.0建立前端專案安裝cube-ui

前提條件: 安裝node.js。 國內的開發者最好先配置淘寶映象。 之後用cnpm來代替npm命令。 專案建立過程: 開啟cmd,輸入命令進入目標工作空間,以本機專案為例: cd  /d  d: cd  D:\workplace 輸入全域性安裝vuecli的命令:c

vue-cli中安裝element ui步驟以及遇到的坑

安裝vue-cli  1.安裝vue:npm install vue 2.全域性安裝vue-cli:npm install --global vue-cli 3.建立webpack模板專案:vue init webpack project(檔名) 4.進入cd到專案檔案,

vue-cli axios封裝(element-ui

def IT 配置 quest AD 錯誤 攔截器 ESS 登錄 1.http.js /** * * http配置 */ import axios from ‘axios‘import { Loading, Message } from ‘element-ui‘ // a

如何在vue項目中引入element ui組件

main 現在 目錄 pre use -c theme 部分 spa (1)安裝element ui,即: npm i element-ui -S 然後在項目中的node_modules目錄下查看是否有element-ui文件夾,如果有說明安裝成功了; (2)引入ele

如何在vue項目中引入element-ui

-s -- sta brush 如何 java 安裝 imp ava 安裝 elementUI npm install element-ui --save 引入elementUI import ElementUI from ‘element-ui‘ import ‘e

Vue單頁應用中Element ui中的el-tree單選功能

      在VUE單頁應用專案開發過程樹形中有一個需求,需要選中樹形控制元件(可以是點選選中行或者複選框),但是隻能選中一個。控制元件使用的是Element ui中的el-tree,但是找了一下並沒有單選元件的API,慢慢琢磨中。 &nbs

vue 新建專案在IE9 10 打不開

並不是webpack配置問題。也不是babel沒編譯。 這個鍋其實是 webpack-dev-server的問題。它裡面通過socket給瀏覽器的程式碼有 部分 es6的程式碼 如 const 這

vue-cli按需引入element-ui

按照element-ui官方提供的步驟一步一步調整,最後可能會報錯,對應不同錯誤,有如下不同的執行方式: 如果報錯Module build failed: Error: Couldn't find preset "es2015" relative to directory  則執行

vue新建專案(三)構建單頁應用(SPA)

在前面的兩篇《vue新建專案(一)vue-cli新建模板專案》 和 《vue新建專案(二)安裝element-ui》 中,我們已經新建一個vue專案且安裝了一套UI,但是這個只是一個頁面,那麼怎麼新建一

基於Vue.js 2.x系列 + Element UI + RBAC/AUTH許可權 的響應式後臺管理系統

前言專案前端地址: https://github.com/lmxdawn/vue-admin-html專案後端地址: https://github.com/lmxdawn/vue-admin-php歡迎大家的star20180519 更新  1.增加檔案上傳外掛,主要用於管理

vue+element ui專案總結點()table合計欄目,按照起始年份--截止年份 插入資料並向後追加資料以最後一條年份+1

1.oninput 事件在使用者輸入時觸發; <template> <div class="test_box"> <p>hell,你好</p> <p>encodeURI編碼後轉碼的路由引數內容----<span

使用vue-ui來建立專案安裝vue-cli-plugin-element外掛

vue-ui的使用 在要新建專案的目錄下開啟cmd,輸入: vue ui 此時瀏覽器會彈出視窗,如果不彈出,手動輸入提示的url。 開啟瀏覽器的頁面如下: 點選中間的建立 點選在此建立專案 輸入專案資料夾,以及包管理器,這裡選擇npm,點選下一步

vue筆記(vue專案整合element-ui-全域性

開啟vue專案,推薦使用webstorm,在如圖位置輸入命令:1. 安裝 loader 模組:npm install style-loader -Dnpm install css-loader -Dnp

Vue專案Element-Ui按需引入

重點:不管是全部引入還是按需引入,都要安裝element-ui的。   npm i element-ui -D 完事後可以在package.json的dev標籤下看到element。 npm i element-ui -D (解釋一下:npm是node包管理器,i是insta

Vue.js框架--Ui框架的Element UI 按需引入(十五)

主要操作技能:  1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart  藉助 babel-plugin-component,我們可以只引入需要的元件,以達到減小專案體積的目的