飄刃，速度碾壓 Vue-CLI 的輕量級 Vue 項目構建工具

飄刃，是前兩天才首次公開發布的輕量級 Vue 項目前端工程構建工具，使用 Rollup 打包。

官網：www.chjtx.com/pr1/

如下是官方的對比

飄刃 VS Vue-CLI

對比環境 華爲榮耀 MagicBook Windows 10 家庭版 i5 8G 64位 聯通4G熱點 30多個組件的小型 Vue 項目

	飄刃	Vue-CLI
工具版本	piaoren@0.1.1	@vue/cli@3.6.3
依賴包數	487	689
安裝命令	npm i -g piaoren	npm i -g @vue/cli
安裝時間	18s	1m 42s
支持編碼	Pug Sass ES6+	Pug Sass Less Stylus ES6+ TypeScript
建立項目	pr1 init 只須要填項目名稱	vue create/vue init 須要填選多項
啓動命令	pr1 start	vue serve
啓動時間	2s 與項目內容多少無關	6.8s 項目內容多少決定
熱更響應	支持更新 css 和刷新頁面 兩種方式，不支持 js 更新 更新 js 須要刷新頁面 響應速度 當即	支持 css 和 js 更新，vue 組件更新 有點雞肋，很大機率須要手動更新 才能看到預期效果，每次變化都需 要編譯，響應速度 稍慢
打包工具	Rollup	Webpack
打包時間	5s 項目內容多少決定	10s 項目內容多少決定
靜態資源	全部資源路徑在任何地方 都固定相對於入口文件	少於4k的圖片會被轉爲 base64 保存在css文件裏
多頁應用	無需配置	須要配置 pages
插件支持	Rollup 插件規範	Webpack 插件規範
單元測試	暫不支持	可選

總結：飄刃安裝時間、啓動速度、響應速度、打包時間都優於 Vue-CLI，可是配置方面不及 Vue-CLI 豐富。中小型無需配置的項目選擇飄刃，大中型須要多方面資源配合的項目選擇 Vue-CLI。

官方快速上手操做

npm i -g piaoren
複製代碼

把飄刃安裝到全局，任意目錄均可以運行飄刃的命令 pr1

pr1 init

? Project name:           # 項目名稱至少兩個字符，由大小寫字母、中劃線、下劃線，及數字組成，數字不能爲首字符
? Project description:    # 可不填
複製代碼

將會自動生成項目名稱命名的文件夾，包含若干工程文件

進入工程目錄，執行如下命令開啓開發模式

npm run dev
複製代碼

• 修改 src/main.js ，添加 Layout 組件

// main.js
import Vue from 'vue/dist/vue.esm.browser.js'
import Layout from './pages/Layout.vue'

// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  components: {
    Layout
  },
  template: '<Layout/>'
})
複製代碼

• 建立 src/pages 目錄，並添加 src/pages/Layout.vue 文件

<!-- pages/Layout.vue -->
<template lang="pug">
div
  div.top
    input(v-model="text")
    button(@click="submit") 添加
  ul
    Item(v-for="(i, k) in items" :name="i" :key="k")
</template>
<script> import Item from './Item.js' export default { components: { Item }, data () { return { text: '', items: [] } }, methods: { submit () { this.items.push(this.text) this.text = '' } } } </script>
<style lang="sass" scoped> $bg: #ccc; .top { padding: 20px; background: $bg; } </style>
複製代碼

• 建立 src/pages/Item.js

// pages/Item.js
import html from './Item.html'

export default {
  template: html,
  props: {
    name: String
  }
}
複製代碼

• 建立 src/pages/Item.html

<!-- pages/Item.html -->
<li class="item">{{ name }}</li>

<style scoped> .item { background: #eee; } </style>
複製代碼

在瀏覽器訪問 http://localhost:8686/

開發完成後，使用如下命令打包

npm run build
複製代碼

打包完成後可在 dist 目錄雙擊 index.html 到瀏覽器訪問，若是項目包含 ajax 請求，file:// 協議文件沒法跨域，能夠在 dist 目錄運行 pr1 start 8080 開啓飄刃服務，在瀏覽器訪問 http://localhost:8080/

歡迎嘗試飄刃，若有什麼疑問，極歡迎留言評論