vue2.0項(xiàng)目引入element-ui

荊兆峰發(fā)布于2019-08-21 16:17 / 2715人閱讀

摘要：從新建項(xiàng)目到引入組件一新建項(xiàng)目查看和是不是已經(jīng)安裝好命令沒有安裝的先安裝環(huán)境安裝國內(nèi)的淘寶鏡像文件，后面的安裝可以全部改為安裝安裝你的運(yùn)行目錄新建項(xiàng)目進(jìn)入項(xiàng)目目錄安裝依賴運(yùn)行項(xiàng)目發(fā)布項(xiàng)目注電腦需要在安裝淘寶鏡像前執(zhí)行二

從新建vue項(xiàng)目到引入組件Element 一、新建項(xiàng)目

1.查看 node和npm是不是已經(jīng)安裝好命令：node -v  npm -v (沒有安裝的先安裝環(huán)境);
2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安裝國內(nèi)的淘寶鏡像文件，后面的安裝npm可以全部改為cnpm)
3.安裝 vue-cli   
    1、cnpm install -g vue
    2、cnpm install -g vue-cli 
4. 安裝 webpack   cnpm install -g webpack 
5.cd  你的運(yùn)行目錄
6.新建vue項(xiàng)目      vue init webpack vuedemo
7.進(jìn)入項(xiàng)目目錄     cd vuedemo
8.安裝依賴        cnpm install
9.運(yùn)行項(xiàng)目        cnpm run dev
10.發(fā)布項(xiàng)目       cnpm run build
注：mac電腦需要在安裝淘寶鏡像前執(zhí)行： sudo chown -R $USER /usr/local

二、使用element-ui前需安裝的模塊：

1. 安裝 Element-UI 模塊

   cnpm install element-ui --save

三、引入Element，前面已經(jīng)全局安裝了element-ui，只需要在Vue項(xiàng)目中引入即可

 1、打開項(xiàng)目：src/main.js,添加下面三條
      import ElementUI from "element-ui"
   import "element-ui/lib/theme-chalk/index.css"
   Vue.use(ElementUI)

四、然后在.vue文件里就直接可以用了

例如：做一下修改,加入element-button按鈕：

五、成功后的截圖：

云服務(wù)器 GPU云服務(wù)器 vue2.0 cdn web項(xiàng)目引入jquery element-ui element-ui dialog組件

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88374.html

相關(guān)文章

vue2.0項(xiàng)目引入element-ui

摘要：從新建項(xiàng)目到引入組件一新建項(xiàng)目查看和是不是已經(jīng)安裝好命令沒有安裝的先安裝環(huán)境安裝國內(nèi)的淘寶鏡像文件，后面的安裝可以全部改為安裝安裝你的運(yùn)行目錄新建項(xiàng)目進(jìn)入項(xiàng)目目錄安裝依賴運(yùn)行項(xiàng)目發(fā)布項(xiàng)目注電腦需要在安裝淘寶鏡像前執(zhí)行二從新建vue項(xiàng)目到引入組件Element 一、新建項(xiàng)目 1.查看 node和npm是不是已經(jīng)安裝好命令：node -v npm -v (沒有安裝的先安裝環(huán)境); 2....

GraphQuery 2019-08-01 17:34 評論0 收藏0
Vue國際化處理 vue-i18n 以及項(xiàng)目自動切換中英文

摘要：直接上預(yù)覽鏈接國際化處理以及項(xiàng)目自動切換中英文環(huán)境搭建命令進(jìn)入項(xiàng)目目錄，執(zhí)行以下命令安裝國際化插件項(xiàng)目增加國際化翻譯文件在項(xiàng)目的下添加文件夾增加中文翻譯文件以及英文翻譯文件，里面分別存儲項(xiàng)目中需要翻譯的信息。 0. 直接上預(yù)覽鏈接 Vue國際化處理 vue-i18n 以及項(xiàng)目自動切換中英文 1. 環(huán)境搭建命令進(jìn)入項(xiàng)目目錄，執(zhí)行以下命令安裝vue 國際化插件vue-i18n...

wangtdgoodluck 2019-08-26 11:51 評論0 收藏0
vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸

摘要：做項(xiàng)目過程中，需要用到后臺模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了，在學(xué)習(xí)使用的過程中又偶遇了。做項(xiàng)目過程中，需要用到后臺模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了mock，在學(xué)習(xí)使用的過程中又偶遇了axios-mock-adapter?，F(xiàn)在將實(shí)例展示如下：準(zhǔn)備實(shí)例是建立在vue-cli的基礎(chǔ)上實(shí)現(xiàn)需要提前安裝的插件有：axios：npm install axio --savemockjs：npm ins...

RancherLabs 2019-08-22 18:49 評論0 收藏0
Vue2.0 + ElementUI 手寫權(quán)限管理系統(tǒng)后臺模板（一）——簡述

摘要：簡介最近寫了一個(gè)基于權(quán)限管理系統(tǒng)的后臺模板，包含了正常項(xiàng)目開發(fā)所需的框架功能，開發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來會讓你擁有一個(gè)自己完全掌控的框架。簡介最近寫了一個(gè)基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺模板，包含了正常項(xiàng)目開發(fā)所需的框架功能，開發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來會讓你擁有一個(gè)自己完全掌控的框架。源碼地址...

_ivan 2019-08-23 14:06 評論0 收藏0
WEBPACK+VUE2.0開發(fā)請求本地模擬數(shù)據(jù)的配置方法

摘要：在其的下面增加以下代碼代碼為在根目錄下創(chuàng)建存放模擬的數(shù)據(jù)文件我命名為，名字可以根據(jù)自己口味定義，但是要跟第一步的配置依賴要一樣。數(shù)據(jù)存放文件也需要更改為為請求的地址，為查詢數(shù)據(jù)的入口請求請求歐了早期在vue構(gòu)建工程文件在build里面有dev-server.js，但是后來構(gòu)建去除了該文件集成到了webpack的webpack.dev.conf.js里面。在項(xiàng)目制作過程中，作為一個(gè)前...

galaxy_robot 2019-08-22 11:22 評論0 收藏0