入手vue-cli 3.x

筆者環境 macOS node v8.11.3

準備工做

首先查看本地版本

注：vue-cli須要要8.9+版本，我使用的n模塊，進行node版本管理。
由於以前曾經安裝2.x版本 因此先執行卸載

npm

npm uninstall vue-cli -g

使用yarn

yarn global remove vue-cli

卸載完成後 從新使用 npm或者yarn進行安裝

npm install -g @vue/cli
#或者使用
yarn global add @vue/cli

如今 我用yarn成功安裝3.5.5版本

項目建立

vue create yourProject

第一個選擇是選擇默認設置仍是去手動選擇功能
在這裏我選擇了默認的包含了基本的Babel+ESLint的預製和yarn
固然也能夠選本身定製

babel：使用babel將最新版的js語法進行轉換
typescript：使用TypeScript寫源碼
PWA：漸進式WEB應用
Router：使用vue-router
Vuex：使用vuex
CSS Pre-processors：css預處理器選擇
Linter / Formatter：代碼規範選擇
Unit Testing：單元測試
E2E Testing：e2e測試

以上就是項目的根目錄，能夠看到跟之前相比變得更加簡潔
執行build

啓動項目

在vue-cli的項目中，@vue/cli-service 安裝了一個名爲 vue-cli-service 的命令。能夠在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。

npm run serve
# 或者
yarn serve
# 進行調用

如下說明參考官方文檔
1.vue-cli-service serve [options] 【entry】(啓動開發服務器)

選項：

• --open 在服務器啓動時打開瀏覽器
• --copy 在服務器啓動時將 URL 複製到剪切版
• --mode 指定環境模式 (默認值：development)
• --host 指定 host (默認值：0.0.0.0)
• --port 指定 port (默認值：8080)
• --https 使用 https (默認值：false)

2.vue-cli-service build [options] 【entry|pattern 】(dist 目錄產生一個可用於生產環境的包)

選項：

• --mode 指定環境模式 (默認值：production)
• --dest 指定輸出目錄 (默認值：dist)
• --modern 面向現代瀏覽器帶自動回退地構建應用
• --target app | lib | wc | wc-async (默認值：app)
• --name 庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 字段或入口文件名)
• --no-clean 在構建項目以前不清除目標目錄
• --report 生成 report.html 以幫助分析包內容
• --report-json 生成 report.json 以幫助分析包內容
• --watch 監聽文件變化

3.vue-cli-service inspect [options] [...paths]（審查項目的vue-cli webpack config）

選項：

• --mode 指定環境模式 (默認值：development)

4.npx vue-cli-service help 查看全部命令。

下面咱們來簡單使用下

這樣經過命令行工具 咱們使用的vue-cli3 構建的項目成功在本地8888端口 運行起來了

後續

文章內容都很簡單基礎，後續會跟隨這個演示項目進行更新。