vue2.0項目引入element-ui

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

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

從新建vue項目到引入組件Element 一、新建項目

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  你的運行目錄
6.新建vue項目      vue init webpack vuedemo
7.進(jìn)入項目目錄     cd vuedemo
8.安裝依賴        cnpm install
9.運行項目        cnpm run dev
10.發(fā)布項目       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項目中引入即可

 1、打開項目：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項目引入jquery element-ui element-ui dialog組件

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

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

相關(guān)文章

vue2.0項目引入element-ui

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

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

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

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

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

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

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

_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里面。在項目制作過程中，作為一個前...

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