Xây dựng ứng dụng Vue.js với parceljs

Cách chuẩn tắc để xây dựng và đóng gói ứng dụng Vue.js là sử dụng webpack và thực sự, hầu hết mọi thứ liên quan đến Vue đều giả định bạn sẽ sử dụng webpack. Tuy nhiên, bạn không cần phải làm vậy. Bạn có thể sử dụng Vue.js mà không cần công cụ xây dựng hoặc bạn có thể sử dụng một trình gói module thay thế. Ở thời điểm này, gần như là một trò đùa khi cấu hình webpack có thể là một hành trình khá huyền bí , nhưng nó không phải là lựa chọn duy nhất trong thị trấn. Đứa trẻ mới trong khối lúc này là ParcelJS . Về cơ bản, nó thực hiện role tương tự như webpack, nhưng hoạt động như một công cụ không cấu hình. Bạn chỉ cần cài đặt các phần phụ thuộc và chạy bản parcel build , và một ứng dụng được đóng gói hoàn hảo.

Vì vậy, ta hãy xem cách cài đặt parceljs cho ứng dụng Vue.js.

Viết ứng dụng

Ngược lại với các bước thông thường , hãy tiếp tục và cài đặt file ứng dụng sườn trước khi ta làm bất kỳ điều gì khác.

Trong folder dự án của bạn, hãy tạo một folder mới có tên là src . (Cấu trúc file cuối cùng sẽ giống như thế này :)

./my-project
├── package.json // Generate this with `npm init`
├── index.html
├── .babelrc // Babel is needed.
└── src
    ├── App.vue
    └── main.js

Bắt đầu với index.html cơ bản điển hình của bạn.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Vue.js App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- Note the reference to src here. Parcel will rewrite it on build. -->
    <script src="./src/main.js"></script>
  </body>
</html>

Sau đó thêm mã Vue bootstrap.

src / main.js

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

new Vue({
  el: '#app',
  render: h => h(App)
});

Và bây giờ là thành phần App .

src / App.vue

<template>
  <div id="app">
    <h1></h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App!'
    }
  }
}
</script>

<style lang="css">
  #app {
    color: #56b983;
  }
</style>

Ném vào .babelrc cũng vậy, chỉ là một biện pháp tốt.

.babelrc

{
  "presets": [
    "env"
  ]
}

Thêm parceljs

Cài đặt Parcel đơn giản như cài đặt một số phụ thuộc.

Đầu tiên, hãy cài đặt mọi thứ ta cần cho chính ứng dụng Vue.

# Yarn
$ yarn add vue

# NPM
$ npm install vue --save

Sau đó, parceljs, một plugin cho Vue và babel-preset-env …

# Yarn
$ yarn add parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env -D

# NPM
$ npm install parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env --save-dev

Bây giờ ... tốt, đó thực sự là nó.

Đang chạy parceljs

Đến đây bạn có thể chạy ứng dụng của bạn ở chế độ phát triển với tính năng reload nóng bằng cách chạy npx parcel trong folder dự án của bạn. Để xây dựng cho production với tính năng thu nhỏ và loại bỏ mã chết, chỉ cần sử dụng npx parcel build .

(Nếu bạn đang thắc mắc npx là gì, hãy xem ở đây . Nó sẽ hoạt động miễn là bạn đã cài đặt NPM 5.2.0 hoặc mới hơn.)

Nhưng nếu tôi muốn `eslint` thì sao?

Tôi rất vui vì bạn đã hỏi. Trong trường hợp đó, hãy tiếp tục và cài đặt eslint , eslint-plugin-vue và parcel-plugin-eslint .

# Yarn
$ yarn add eslint eslint-plugin-vue parcel-plugin-eslint -D

# NPM
$ npm install eslint eslint-plugin-vue parcel-plugin-eslint --save-dev

(Đừng quên tạo .eslintrc.js của bạn)

.eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/essential'
  ]
}

Điều gì về LESS / SASS / PostCSS?

Chúng được hỗ trợ bởi Parcel out-of-the box! Ngay cả trong các thành phần Vue! Để biết thêm thông tin về các loại tài sản tích hợp, hãy xem tài liệu chính thức về Parcel .

Muốn biết thêm thông tin?

Hãy xem hướng dẫn chi tiết hơn về parceljs . Ồ, và như mọi khi, hãy đọc tài liệu chính thức ! parceljs là tốt đẹp và ngắn.

Tags:

Các tin liên quan