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 查看具体的参数列表。
查看示例代码。
點擊查看更多內(nèi)容
3人點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦