Parcel + Vue 入门尝鲜
Webpack 久负盛名，包罗万象。若是用其造轮子的话，难免修修补补。年前兴起了Parcel打包工具，号称“极速零配置”，让人不胜向往。这不得空了，就来尝尝鲜，记录下如何使用 Parcel + Vue进行开发。
这里是示例代码!
预备两个依赖
-
parcel-bundler(戳我)
这是 Parcel 打包工具，“极速零配置”的起源。 parcel-plugin-vue(戳我)
这是一个 parcel 插件，使 pacel 支持.vue文件。
项目结构
parcel-vue
├── package.json
├── .babelrc
├── index.html
├──src
├── App.vue
├── main.js这是基本的项目结构。
开始-
安装parcel相关开发依赖
yarn add parcel-bundler parcel-plugin-vue babel-preset-env -D -
安装vue
yarn add vue -
添加入口文件
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>parcel + vue</title> </head> <body> <div id="app"></div> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/main.js"></script> </body> </html> -
添加脚本内容
main.js和 vue组件App.vue// ./src/main.js import Vue from 'vue' import App from './App' new Vue({ el: '#app', render: h => h(App) })// App.vue <template> <h1>parcel vue</h1> </template> <script> export default { name: 'App' } </script> - 配置
.babelrc{ "presets": [ "env" ] }
大功告成！！！
额，再加条启动脚本吧！
// package.json
{
...,
"scripts": {
"start": "parcel index.html"
},
...
}Node执行:
yarn start好了，浏览器打开http://localhost:1234看看吧。
生产环境构建生产环境，只需要执行：
parcel build index.html --public-url ./这里以index.html为入口，parcel会自动识别和提取相关依赖资源，并在根目录下创建 dist 文件夹。这里 dist 名称是默认的，可以按意愿更改。可以通过命令 parcel build -h 查看具体的参数列表。
查看示例代码。
点击查看更多内容
3人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦