使用 Parcel 构建 Vue.js 应用程序

构建和组合 Vue.js 应用程序的典型方法是使用 webpack,事实上,几乎所有与 Vue 相关的东西都假定你将使用 webpack. 然而,你没有 have 可以使用 Vue.js 没有构建工具,或者你可以使用替代的模块组合器。在这一点上,构建 webpack 几乎是一个笑话(https://andsky.com/tech/tutorials/vuejs-demistifying-vue-webpack),但这不是城市中唯一的选择。目前区块上的新孩子是 ParcelJS)。

因此,让我们看看如何为 Vue.js 应用程序设置包。

编写 app

与我们通常的步骤不同,让我们继续前进,在我们做任何其他事情之前设置骨骼应用程序文件。

在您的项目目录中,创建一个名为src的新目录(最终的文件结构将看起来像这样:)

1./my-project
2├── package.json // Generate this with `npm init`
3├── index.html
4├── .babelrc // Babel is needed.
5└── src
6    ├── App.vue
7    └── main.js

您可以从典型的基本index.html开始。

 1[label index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4  <head>
 5    <meta charset="utf-8">
 6    <title>My Vue.js App</title>
 7  </head>
 8  <body>
 9    <div id="app"></div>
10    <!-- Note the reference to src here. Parcel will rewrite it on build. -->
11    <script src="./src/main.js"></script>
12  </body>
13</html>

然后添加Vue bootstrap代码。

1[label src/main.js]
2import Vue from 'vue';
3import App from './App.vue';
4
5new Vue({
6  el: '#app',
7  render: h => h(App)
8});

然后是app组件。

 1[label src/App.vue]
 2<template>
 3  <div id="app">
 4    <h1>{{ msg }}</h1>
 5  </div>
 6</template>
 7
 8<script>
 9export default {
10  name: 'app',
11  data () {
12    return {
13      msg: 'Welcome to Your Vue.js App!'
14    }
15  }
16}
17</script>
18
19<style lang="css">
20  #app {
21    color: #56b983;
22  }
23</style>

扔在「.babelrc」也,只是为了好的尺度。

1[label .babelrc]
2{
3  "presets": [
4    "env"
5  ]
6}

添加部分

设置 Parcel 就像安装几个依赖一样简单。

首先,让我们安装Vue应用程序本身所需的一切。

1# Yarn
2$ yarn add vue
3
4# NPM
5$ npm install vue --save

然后包裹,Vue的插件,和babel-preset-env......

1# Yarn
2$ yarn add parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env -D
3
4# NPM
5$ npm install parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env --save-dev

现在......好吧,实际上就是这样。

行走部位

您现在应该能够在项目目录中运行npx 包裹来运行您的应用程序以热重新加载的开发模式。

(如果您想知道「npx」是什么,请点击这里(https://andsky.com/tech/tutorials/workflow-npx).只要您安装了「NPM 5.2.0」或更高版本,它就应该起作用。

但是如果我想要`Slint`怎么办?

在这种情况下,继续安装eslint,eslint-plugin-vue和parcel-plugin-eslint。

1# Yarn
2$ yarn add eslint eslint-plugin-vue parcel-plugin-eslint -D
3
4# NPM
5$ npm install eslint eslint-plugin-vue parcel-plugin-eslint --save-dev

(不要忘了创建你的.eslintrc.js)

1[label .eslintrc.js]
2// https://eslint.org/docs/user-guide/configuring
3
4module.exports = {
5  extends: [
6    'eslint:recommended',
7    'plugin:vue/essential'
8  ]
9}

什么是LESS / SASS / PostCSS?

它们是由包裹外包支持的! 即使在Vue组件中! 有关内置资产类型的更多信息,请参阅官方包裹文档。

想要更多信息?

看看我们的更多(深入的包裹指南)(https://andsky.com/tech/tutorials/tooling-parcel)。哦,和,像往常一样,阅读官方文件!包裹的好和短。