隨着時間的推動,咱們迎來了vue-cli3.0的面世,愈來愈圖像化和傻瓜式,方便了前端開發的入門。
此文僅以MacOS爲例:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
您能夠*.vue使用vue serve和vue build命令只使用一個文件快速進行原型設計,可是它們須要先安裝一個額外的全局插件:
npm install -g @vue/cli-service-global
不過在國內環境推薦用cnpm 或者yarn 安裝:
cnpm install -g @vue/cli-service-global
yarn add @vue/cli-service-global
您能夠選擇基本Babel + ESLint設置附帶的默認預設,也能夠選擇「手動選擇功能」以選擇所需的功能
vue create hello-world
能夠使用上下方向鍵來切換選項。若是隻須要 babel 和 eslint 支持,那麼選擇第一項,就完事了,靜靜等待 vue 初始化項目
vue-cli 內置支持了8個功能特性,能夠多選:使用方向鍵在特性選項之間切換,使用空格鍵選中當前特性,使用 a 鍵切換選擇全部,使用 i 鍵翻轉選項。
- TypeScript 支持使用 TypeScript 書寫源碼。
- Progressive Web App (PWA) Support PWA 支持。
- Router 支持 vue-router 。
- Vuex 支持 vuex 。
- CSS Pre-processors 支持 CSS 預處理器。
- Linter / Formatter 支持代碼風格檢查和格式化。
- Unit Testing 支持單元測試。
- E2E Testing 支持 E2E 測試。
選擇默認:
$ cd hello-world
$ yarn serve
vue ui
等待建立成功
相比可視化界面來講,沒有命令行那麼直接和快速,強烈推薦用命令行安裝