1. 程式人生 > >vue安裝 搭建 以及在專案中安裝elementui

vue安裝 搭建 以及在專案中安裝elementui

vue安裝步驟

在安裝vue之前,先確保node和npm是否安裝。如果安裝ok,那麼接下來安裝vue

1. npm install vue  (安裝vue)

2. npm install --global vue-cli  (安裝vue-cli)

因為npm是國外的,使用起來比較慢,使安裝vue會出現報錯,那麼你可以試著  安裝 淘寶映象:

1. npm install -g cnpm --registry=https://registry.npm.taobao.org

2. cnpm install cnpm -g   (安裝cnpm)

3. cnpm install vue   (安裝vue)

4. cnpm install --global vue-cli   (安裝vue-cli)

vue搭建專案

1. vue init webpack 專案名稱


2.cd 專案目錄下

3.npm run dev   (執行專案)

4.npm i element-ui –S   (安裝elementui)

在package.json可以看到elementui已經安裝好了


5.在main.js中引入elementui  (main.js是入口檔案,所以在這裡引入就行,頁面就不用引入了)

6.前後端互動,要安裝axios,並且在main.js配置(安裝跟引入  跟elementui一樣)

頁面對接程式碼:

axios.get(url).then(res=>{
      if(res.data.retCode == 200){
	 //成功
      }else{
         //失敗
      }
})

作者:葉落森

相關推薦

vue-cli搭建專案引入jquery和bootstrap

在專案初始化好之後,首先安裝jqury庫 cnpm install jquery -S 同時把bootstrap庫也一起安裝了,待會再一起配置 cnpm install [email protected] -S &n

vue-cli搭建專案使用Echarts

1、安裝 cnpm install echarts --save-dev 2、在專案的main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 3、在Vue組建中使用

使用vue-cli 搭建專案使用rem佈局

使用vue.js搭建一個移動端專案,怎樣做到自適應呢?當然選擇rem佈局是比較方便快捷的。在使用vue-cli搭建好專案框架後,在目錄結構的index.html檔案中新增一段程式碼:<script>fnResize()window.onresize = funct

vue-cli搭建專案使用vuex實現狀態管理

1、安裝 使用vue-cli搭建好專案以後,安裝vuex npm install vuex --save-dev 2、建立Vuex.Store例項 對於大型應用,需要儲存的狀態可能很多,我們就將store中的state、getters 、mutations 和 a

vue安裝 搭建 以及專案安裝elementui

vue安裝步驟在安裝vue之前,先確保node和npm是否安裝。如果安裝ok,那麼接下來安裝vue1. npm install vue  (安裝vue)2. npm install --global vue-cli  (安裝vue-cli)因為npm是國外的,使用起來比較慢,

vue-cli安裝搭建初始專案

vue-cli腳手架 前提:node + npm 安裝好 一、介紹 vue-cli: Vue + ESLint + webpack + iview + ES6 Vue:主要框架ESLint:幫助我們檢查js程式設計時語法錯誤。原因:一個專案在多人開發,能達到一致的語法 webpack:設定代理、外掛

VUE專案安裝和使用vant元件

Vant 是有贊前端團隊基於有贊統一的規範實現的 Vue 元件庫,提供了一整套 UI 基礎元件和業務元件。 特性 50+ 個經過有贊線上業務檢驗的元件 單元測試覆蓋率超過 90% 完善的中英文文件和示例 支援 TypeScript 支援 SSR   元件中文

CocoaPods -- ios專案安裝和使用CocoaPods

CocoaPods是什麼? 當你開發iOS應用時,會經常使用到很多第三方開源類庫,比如JSONKit,AFNetWorking等等。可能某個類庫又用到其他類庫,所以要使用它,必須得另外下載其他類庫,而其他類庫又用到其他類庫,“子子孫孫無窮盡也”,這也許是比較特殊的情況。總之小編

vue---環境搭建以及生成專案

VUE環境搭建以及安裝 --生成專案 注:本人也是一名初學者,在工作清閒之餘,多學習一些語言, 部落格參考http://blog.csdn.net/wu__di/article/details/54234894 配置淘寶映象 配置webpack環境 配置roo

elasticsearch6.5.0安裝搭建以及kibana,cerebro,head,beat

首先,安裝java環境,java8以上版本。 echo $JAVA_HOME /home/admin/java/jdk1.8.0_131 es安裝不能使用root使用者啟動,所以要新建一個使用者,賦予使用者安裝目錄許可權 然後去官網下載es最新版本,我這裡用的是es6.2.3和es6.5.0,其中6.5.0

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

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

eclipse環境的搭建以及JDK的安裝步驟詳細

java開發環境:eclipse 可以從這裡下載 連結:https://pan.baidu.com/s/1yPTV4UrAyWnc12NbAIj-MA 密碼:bnma 安裝步驟如下: 從上鍊接獲取壓縮包下載到電腦之後,解壓,此時的eclipse是打不開

在.net core web api專案安裝swagger展示api介面(相當於生成api文件)

1,  建立或開啟專案後,在“程式包管理器控制檯”中執行以下命令新增包引用: Install-Package Swashbuckle.AspNetCore   2,在專案中開啟Startup.cs檔案,找到 Configure 方法,在其中新增如下程式碼:  app.Us

Eclipse安裝lombok,專案所有get、set方法報錯

Lombok是能自動接通編輯器和構建工具的一個Java庫。最大的特點是不用再一次寫額外的getter或者equals方法。然而專案已經匯入了lombok-1.16.6.jar,仍然報錯,或者說lombok的jar包沒有生效,經過查閱資料才知道,是lombok外掛沒安裝,查詢其官網能看到安裝方

linux安裝jdk以及eclipse的安裝

最近將系統換成了linux(ubuntu14.04),隨之而來的是各種軟體的配置,環境的配置,因此趁機將自己的過程整理出來。1:linux中怎麼安裝jdk2 將現在的jdk解壓到對應的目錄下面(我自己解壓的目錄為/home/username/java) 將檔案複製到對應的目錄

專案安裝 less 和 less-loader 命令

npm命令如下: npm install less less-loader --save-dev 或者 yarn命令如下: yarn add less less-loader --dev 建議安裝在本地依賴,沒必要裝全域性環境,安裝成功後 package.json 如下:

vue專案引入elementUI元件

1.安裝 elementUI npm i element-ui -S 2.引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk

CentOS6.6系統安裝Maven以及Eclipse配置Maven

目錄 1. 虛擬機器中maven的安裝 2. eclipse中配置maven 1. 虛擬機器中maven的安裝        基於對大資料的學習,初步入手分散式、叢集開發,為了方便專案的建立和管理,這裡引進常用的maven來做管理。下面

vue專案使用elementUI

1. 官方文件 2. 安裝 在vue專案目錄下,執行 npm i element-ui -S 3. 引入 在專案中按照說明引入,在main.js中,引入elementUI(這裡選完整

vue專案elementui的表格畫甘特圖

最近的專案要求甘特圖在elementui中實現,在此做出總結。 效能限制,不能傳入太多的資料。 條件(時間):計劃開始時間、計劃結束時間、開始時間、結束時間、最大時間和最小時間。 思維:渲染表格頭、渲染天數、填充色塊。 實現簡單的表格 <el-tab