您的位置：首页 > 产品设计 > UI/UE

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

2018-02-27 22:06 846 查看

新的打包工具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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航