視覺化構建工具探索之Vue Cli3.0 & 阿里飛冰

Vue Cli3.0視覺化構建工具——Vue UI

一、安裝環境

安裝了最新的Vue CLI。開啟Terminal，輸入： npm install -g @vue/cli or yarn global add @vue/cli

使用-V來檢視剛剛安裝的版本： vue -V 3.0.0-rc.10

更新vue-cli之後，之前的2.0版本的構建方式就不可用了 需要再下載

yarn global add @vue/cli-init

初始化Vue UI，在一個乾淨的目錄下輸入：

vue ui

該命令自動開啟瀏覽器，顯示如下介面

二、新增專案

新增新專案有兩種方式

1.視覺化新增

視覺化新增

如果儲存過自定義專案配置，開始建立時，會在第一個選項顯示；配置的選項會同步到vue.config.js這個檔案中

點選建立專案之後，可以儲存此次配置，在以後建立專案時使用相同配置

跳過此次步驟，開始下載相關外掛，此時命令列同步下載，視覺化工具通過操控命令列來新建專案

2.命令列新增

vue create <project-name>

? Please pick a preset: (Use arrow keys)
❯ my-test (vue-router, vuex, sass, babel, eslint)
  default (babel, eslint)
  Manually select features
  
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
 
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): SCSS/SASS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
 ? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) n
複製程式碼

按下空格鍵進行選取

Vue CLI v3.0.0-rc.10
✨  Creating project in /Users/zjy/ttt.
?  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.0.1
info No lockfile found.
[1/4] ?  Resolving packages...
⠐ @babel/highlight@7.0.0-beta.47
複製程式碼

開始構建專案

三、工具分析

1.外掛

安裝完成之後，可以檢視專案下安裝的外掛，可以新增其他外掛

2.依賴

檢視專案依賴的資源，可以直接檢視相關官網或原始碼

3.配置

可對專案進行配置，配置的選項會在vue.config.js中

4.任務

可以本地除錯，打包，

對專案進行效能分析

四、Vue Cli3專案結構分析

少了很多資料夾，目錄結構更加清晰，vue-cli2.0中的build，config統一到了vue.config.js中 移除了static資料夾，新增了public Src中新增了views資料夾，用來存放檢視元件，components中存放公共元件

1.vue.config.js配置

參考文件：配置文件

module.exports = {
 baseUrl: '/',
 outputDir: 'dist',
 lintOnSave: true,
 compiler: false,
 // 調整內部的 webpack 配置。
 // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // 配置 webpack-dev-server 行為。
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
  proxy: null, // string | Object
  before: app => {}
 }
 ....
}
複製程式碼

阿里飛冰

飛冰：官網

進如官網下載GUI工具，選擇模板建立專案，專案頁面可選擇區塊新增元件

選擇模板，新建專案

建立好的專案目錄

本地除錯：

頁面中新增元件

點選頁面列表右側對應的+號，即可選擇對應框架下的物料源，將在該頁面目錄下生成一側Component資料夾，存放下載的元件資源，配置路之後，即可生效。

專案目錄

匯入已有專案

專案適配設定：文件

已有專案接入 Iceworks

將已有專案接入到 Icewokrs 中，需要增加對應資訊的專案描述

1. 描述專案可被 Iceworks 識別 package.json 檔案 keywords 欄位增加 ice-scaffold 表示這是一個適配 ice 規範的模板專案。

{
  "name": "my-project",
  "keywords": ["ice-scaffold"],
  // ...
}
複製程式碼

2. 描述專案使用的框架語言

package.json 檔案增加 scaffoldConfig 欄位物件，示例如下：

{
  // ...
  "scaffoldConfig": {
    "type": "react",
    "name": "ice-design-pro",
    "title": "ICE Design Pro",
    "screenshot": "https://img.alicdn.com/tfs/TB1_bulmpOWBuNjy0FiXXXFxVXa-1920-1080.png"
  }
}
複製程式碼

其中 scaffoldConfig.type 欄位描述當前專案所使用的框架名 react vue angular 等，此欄位用於與物料源相對映。

3. package.json 存在可執行命令 npm run start npm run build

這兩個命令用於 啟動除錯服務 構建專案 功能使用，你可以使用自己定義的命令列工具。

{
  "scripts": {
    "start": "custom-cli start",
    "build": "custom-cli build"
  }
}
複製程式碼

結語

Vue Cli3.0針對vue專案進行視覺化構建，阿里飛冰針對了主流的三大框架，但對react物料支援最多，同時也支援自定義物料進行構建。但該產品目前處於初期階段，不足之處較多，例如專案下載依賴失敗率較大，匯入的專案頁面目錄必須為pages，編譯之後的檔案目錄必須為build，否則軟體無法識別並進行展示。隨著軟體進一步優化，這些問題應該會逐步解決。對於有自己固定框架模板的團隊來說，可以考慮使用這樣一套成熟的工具來快速搭建專案。

廣而告之

本文釋出於薄荷前端週刊，歡迎Watch & Star ★，轉載請註明出處。

歡迎討論，點個贊再走吧 ｡◕‿◕｡ ～