使用 Parcel 构建 Vue.js 项目

2024年1月8日 186次阅读 来源: yumiko

Parcel 是一款 Web 应用打包工具，与 Webpack 相比，最大的特点就是极速零配置。

因为使用 npm 会出现莫名其妙的安装失败问题，所以这里使用 yarn 管理依赖。

初始化项目

yarn init

安装依赖

yarn add parcel-bundler --dev
yarn add vue vue-router

项目目录

与 Vue CLI 3 构建的目录大致相同。

├── public
│   └── index.html               
├── src                                 
│   ├── components
│   │    ├── componentA.vue
│   │    └── componentB.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── package.json 
// main.js

import Vue from 'vue';
import App from './App.vue';

import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});
<!-- public/index.html -->
<!-- 引入 main.js -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>parcel-vue</title>
</head>
<body>
  <div id="app"></div>
  <script src="../src/main.js"></script>
</body>
</html>

由于我是局部安装 Parcel，所以要执行 parcel 命令需要在 package.json 添加执行脚本。

{
  "name": "parcel-vue",
  "version": "1.0.0",
  "main": "public/index.html",
  "scripts": {
    "dev": "parcel public/index.html",
    "build": "rm -rf dist && parcel build public/index.html --public-url ./"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^2.6.0",
    "parcel-bundler": "^1.12.1",
    "vue-template-compiler": "^2.6.8"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vue-hot-reload-api": "^2.3.3",
    "vue-router": "^3.0.2"
  }
}

执行构建

启动开发服务器：

yarn run dev

项目打包构建：

yarn run build

最后

Parcel 从 v1.7.0 开始添加对 .vue 文件的支持，所以现在构建 Vue.js 项目几乎就是零配置，非常方便。

    原文作者：yumiko
    原文地址: https://segmentfault.com/a/1190000018642678
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞