飘刃，速度碾压 Vue-CLI 的轻量级 Vue 项目构建工具-白红宇

飘刃，是前两天才首次公开发布的轻量级 Vue 项目前端工程构建工具，使用 Rollup 打包。

官网：

以下是官方的对比

飘刃 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.jsimport Vue from 'vue/dist/vue.esm.browser.js'import Layout from './pages/Layout.vue'// eslint-disable-next-line no-newnew Vue({  el: '#app',  components: {    Layout  },  template: '
    '})复制代码

创建 src/pages 目录，并添加 src/pages/Layout.vue 文件


    
    复制代码

创建 src/pages/Item.js

// pages/Item.jsimport html from './Item.html'export default {  template: html,  props: {    name: String  }}复制代码

创建 src/pages/Item.html


    {
   { name }}
复制代码

在浏览器访问

开发完成后，使用以下命令打包

npm run build复制代码

打包完成后可在 dist 目录双击 index.html 到浏览器访问，如果项目包含 ajax 请求，file:// 协议文件无法跨域，可以在 dist 目录运行 pr1 start 8080 开启飘刃服务，在浏览器访问

欢迎尝试飘刃，如有什么疑问，极欢迎留言评论