零配置打包工具Parcel 快速入门 -- vue示例

新的打包工具parcel，号称零配置，开箱即用，今天迫不及待入手看看~以vue作为示例：demo 目录结构src├── App.vue├── index.js├── router.js└── components├──├── Home.vue├──└── ....babelrcindex.htmlpackage.jsonreadme.md（1）创...

Bob丶抱抱

690人浏览 · 2018-02-27 22:06:36

Bob丶抱抱 · 2018-02-27 22:06:36 发布

新的打包工具parcel，号称零配置，开箱即用，今天迫不及待入手看看~
以vue作为示例：
demo 目录结构

src
├── App.vue
├── index.js
├── router.js
└── components
├──   ├── Home.vue
├──   └── ...
.babelrc
index.html
package.json
readme.md

（1）创建根目录 parcel-vue-demo
（2）更新node版本, 8.0以上
（3）初始化 package.json

yarn init -y

或者 npm (后面统一用yarn)

npm init -y

（4）安装依赖

// 依赖库
yarn add vue vue-router
// 打包工具
yarn add parcel-bundler parcel-plugin-vue babel-preset-env  --dev

其中parcel-plugin-vue 是处理.vue文件；babel-preset-env 支持更多es6特性
（5）根目录添加.babelrc配置文件

{
  "presets": [
    ["env", {"targets": {}}]
  ]
}

（6）根目录添加index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
  <title>parcel-vue-demo</title>
</head>
<body>
  <div id="myapp"></div>
  <script src="./src/index.js"></script>
  <!-- <MyApp></MyApp> -->
</body>
</html>

（7）添加src目录, 增加index.js, router.js, App.vue, Components等
源码详见: https://github.com/comeonbob/weShare/tree/develop/articles/frontend/js/parcel/vue_demo

（8）开始启动
运行 Run

git clone https://github.com/vueadmin/parcel-vue.git

npm i

npm run dev

编译 Build

npm run build

可能遇到的错误

(1) 运行npm run dev 后’targets of undefined’, parcel-bundler源码的问题, 作者已更新: https://github.com/parcel-bundler/parcel/pull/886
(2) 运行后，浏览器控制台报错，vue引入和渲染方式不同，编译错误。详见： https://www.npmjs.com/package/parcel-plugin-vue
(3) 编译错误，提示node版本问题，node版本需要大于 8.0

参考资料：
Parcel+vue 入门实战： https://segmentfault.com/a/1190000012427886
Parcel 初体验： https://zhuanlan.zhihu.com/p/34033344
fork的一个parcel-vue demo: https://github.com/comeonbob/parcel-vue

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^