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/>'
})
最後檢視一下頁面效果
面看到一個灰了吧唧的按鈕 代表內建成功