Vue-cli3.0實戰探究

隨着時間的推動，咱們迎來了vue-cli3.0的面世，愈來愈圖像化和傻瓜式，方便了前端開發的入門。

此文僅以MacOS爲例：

• vue-cli的安裝

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

 

• 用UI界面建立項目

vue ui

等待建立成功

相比可視化界面來講，沒有命令行那麼直接和快速，強烈推薦用命令行安裝