天天看點

Vue2.0 ElementUI MintUI 安裝全過程

Vue開發速度确實很快

是以在這裡記錄了安裝全過程 供大家參考

一, 安裝node.js 

https://nodejs.org/en/download/

安裝非常簡單 我下載下傳的 windows 64位版本 的安裝包一路 下一步 搞定

然後在cmd 指令行中 

node -v
           

我顯示的版本号為 v8.9.0

安裝好node.js 也會自動安裝了npm 包管理器 

接下來輸入  

npm -v
           

顯示版本号 為5.5.1

二, 安裝VSCODE編輯器

https://code.visualstudio.com/

這個編輯器個人比較推薦 因為裡面有VUE插件 而且速度很快

還是下載下傳 windows版本 一路下一步搞定

然後打開VSCODE 

菜單欄中 檢視 -- 擴充 搜尋 VUE 找到這個插件 

具體使用方法 裡面有詳細介紹 安裝即可

三, 設定淘寶 npm 鏡像

在cmd 指令行中 輸入

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

最後提示

updated 1 package in 19.874s

然後輸入

cnpm -v 
           

檢視安裝資訊

四, 安裝Webpack

使用管理者權限 打開cmd指令行

webpack 必須還是要裝的 雖然安裝vue工程的時候 會自己安裝 但是建議還是先安裝吧

這裡建議國内Monkey  install 都采用 cnpm 來安裝 

cnpm install -g webpack
           

五, 安裝VUE

官網 https://cn.vuejs.org/

我們使用VSCODE打開一個檔案夾 然後使用組合鍵Ctrl+`打開終端視窗 

首先安裝Vue

cnpm install vue
           

接下來安裝Vue cli

cnpm install --global vue-cli
           

然後初始化工程 後面的 . 代表目前目錄 一路回車搞定 建議在問詢是否使用eslint時 選擇否

vue init webpack .
           

然後會自動安裝依賴項目  如果這裡不成功 我們可以手動安裝依賴

cnpm install
           

最後依賴安裝完畢 我們就可以啟動項目了

npm run dev
           

終端會提示

DONE  Compiled successfully in 2439ms    
 I  Your application is running here: http://localhost:8888
           

到這裡 Vue就安裝完畢

六,  內建 ElementUI 

ElementUI 是桌面UI架構   官網 http://element.eleme.io/

在終端或者使用cmd指令行 在工程目錄下輸入

cnpm i element-ui -S
           

然後打開src 目錄下的 App.vue 檔案 在template 中 插入一個按鈕

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <el-button type="primary">主要按鈕</el-button> <!-- 新插入代碼 -->
    <router-view/>
  </div>
</template>
...
           

然後打開 src 目錄下的 main.js 檔案 加入element-ui的引用如下代碼

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'; //引用庫
import 'element-ui/lib/theme-chalk/index.css'; //引用樣式
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI) //使用庫

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
           

重新運作 npm run dev 

看到藍色按鈕 代表已經內建成功

七,  內建 MintUI 

MintUI 是移動端的UI庫   官網 http://mint-ui.github.io/ 

內建方法和 ElementUI 基本一緻 

在終端或者使用cmd指令行 在工程目錄下輸入

npm install mint-ui -S
           

App.vue 中增加一個按鈕

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <mt-button>按鈕</mt-button>
    <router-view/>
  </div>
</template>
           

main.js 中

import Vue from 'vue'
import App from './App'
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
import router from './router'

Vue.config.productionTip = false
Vue.use(MintUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
           

最後檢視一下頁面效果

面看到一個灰了吧唧的按鈕 代表內建成功

繼續閱讀