使用Vue-cli和NutUI快速擼一個Vue專案

林如風發表於2019-04-09
VueUI

最近接到一個緊急vue的h5專案，產品要求2天上線，雖然心裡一萬個神獸在奔跑 ，可是飯不能不吃，活不能不做，面對挑戰我們要迎難而上，選對對的工具，讓不可能變得可能。

下面這篇文章是我做完這個專案做的總結，2天開發時間意味著的開發測試是同時進行的，也就說盡量少出錯，不出錯，這就需要功能強大，打磨細膩的構建工具和元件庫了，我選擇的是 vue官網提供的vue-cli和nut-ui元件庫，接下來是詳細的使用介紹。

安裝vue-cli

如果是 window電腦開發直接在npm中安裝 npm install -g @vue/cli; 如果是 mac 開發sudo npm install -g @vue/cli;如果沒有安裝node，可以先現在node，注意 node版本目前要求在8.9以上, 然後通過 vue create xxx 建立一個專案，vue-cli初始化有一個選項，第一個是一個預設的配置，第二個是自定義配置，這裡我沒選擇第一個配置就好。

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
複製程式碼

我們通過package.json可以看到有3個node啟動命令，我們開發使用第一個。然後就是引入nutui元件庫，我看了下官網提供了多種引入方式，如果專案特別緊急，火燒眉毛的這種建議簡單粗暴~

首先下載NutNI

npm i @nutui/nutui -S
複製程式碼

然後找到main.js然後直接：

import NutUI from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.css';

NutUI.install(Vue);
複製程式碼

做完這些，我們就可以快速的使用它進行我們專案的開發了。最終用了 1天時間完成了專案的開發，5個頁面重構加資料互動，是不是很快，第二天在測試過程中發現專案過大，於是簡單的修改了下配置，由500多kb變成了 100多kb減少了 4成。不得不感慨NutUI提供的按需載入功能之強大。

安需載入的方式

首先， 下載 npm i @nutui/babel-plugin-separate-import -D 然後在根目錄下找到 babel.config.js 在裡面增加一個配置

"plugins": [
["@nutui/babel-plugin-separate-import", {
    "style": "css"
}]
]
複製程式碼

然後根據使用的頻率，如果希望整個專案都能用例如 Dialog 這類的元件推薦在main.js這個檔案中引用

import { Dialog} from '@nutui/nutui';
Dialog.install(Vue);
複製程式碼

接下來就可以在專案裡面使用了。 如果我們選擇了手動配置裡面的ts，那麼我們建立的專案就變成了xx.ts 引用多個元件時候記得注意書寫格式

import { Dialog, Picker} from '@nutui/nutui';
複製程式碼

最後，祝願大家使用開心，我在 git上同時也放了demo，vue-cli+nut 需要的可以直接拿走~

相關文章