使用 Parcel 構建 Vue.js 項目

時間 2019-11-10

標籤使用 parcel 構建 vue.js vue 項目欄目 JavaScript 简体版

原文原文鏈接

Parcel 是一款 Web 應用打包工具，與 Webpack 相比，最大的特色就是極速零配置。
由於使用 npm 會出現莫名其妙的安裝失敗問題，因此這裏使用 yarn 管理依賴。javascript

初始化項目

yarn init

安裝依賴

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

項目目錄

與 Vue CLI 3 構建的目錄大體相同。html

├── 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 添加執行腳本。vue

{
  "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"
  }
}