飘刃，速度碾压 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/

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

转载于:https://juejin.im/post/5cc2b9205188252b7711c8f7