Tăng cường quy trình làm việc Vue.js với Vue CLI 3

Chúng ta khó có thể tưởng tượng sự phát triển web hiện đại mà không có sự trợ giúp của các công cụ Giao diện dòng lệnh (CLI). Họ cực kỳ tạo điều kiện và tăng tốc quy trình phát triển bằng cách giảm số lượng công việc lặp đi lặp lại và tẻ nhạt. Thiết lập một dự án theo cách thủ công, với tất cả các tính năng theo dõi linting, xây dựng, kiểm tra, tiền xử lý, tối ưu hóa và phụ thuộc không giống như một công việc thú vị, phải không?

Đó là lý do tại sao tất cả các khung phát triển phía máy khách hiện đại (như Angular, React, v.v.) đều cung cấp phiên bản công cụ CLI của riêng họ và Vue.js cũng không ngoại lệ. Nhưng với phiên bản thứ ba mới nhất, Vue CLI đang đi trước một bước so với các phiên bản khác. Giờ đây nó không chỉ mạnh mẽ và linh hoạt mà còn đi kèm với GUI đầy đủ. Vâng, bạn đã nghe đúng. Vue CLI 3 cung cấp giao diện người dùng đồ họa đầy đủ.

Bắt đầu các dự án Vue.js mới giờ đây trở nên dễ dàng hơn bao giờ hết với Vue CLI mới và đó là GUI Vue UI. Hướng dẫn này sẽ chỉ cho bạn cách đưa Vue CLI vào sử dụng và làm thế nào Vue UI có thể tăng tốc công việc của bạn hơn nữa. Băt đâu nao!

Vue CLI là gì?

Vue CLI là một bộ công cụ để tạo mẫu nhanh, giàn giáo ứng dụng dễ dàng và quản lý dự án hiệu quả. Nó bao gồm ba vành đai công cụ chính:

• CLI là gói npm được cài đặt toàn cầu, cung cấp chức năng cốt lõi thông qua lệnh vue. Nó cho phép chúng tôi dàn dựng một dự án mới một cách dễ dàng (vue tạo), hoặc chỉ nhanh chóng tạo ra các ý tưởng thô (vue phục vụ). Nếu chúng ta muốn kiểm soát trực quan và cụ thể hơn đối với các dự án của mình, chúng ta có thể mở phiên bản GUI của CLI bằng cách chạy lệnh vue ui.
• Dịch vụ CLI là một phụ thuộc phát triển (tệp nhị phân vue-cli-dịch vụ), được cài đặt cục bộ vào mọi dự án được tạo bằng CLI. Nó cho phép chúng tôi phát triển dự án của mình (vue-cli-service service), đóng gói để sản xuất (vue-cli-service) và cũng để kiểm tra cấu hình của dự án webpack (kiểm tra vue-cli-service).
• Plugin CLI là các gói npm cung cấp các tính năng bổ sung cho các dự án của chúng tôi. Tên của họ bắt đầu bằng @ vue / cli-plugin- (đối với các plugin tích hợp) hoặc vue-cli-plugin- (đối với các plugin cộng đồng). Chúng ta có thể thêm chúng bất cứ lúc nào của quá trình phát triển thông qua lệnh vue add.

Trong các phần tiếp theo, chúng ta sẽ khám phá tất cả các loại hạt và bu lông của các công cụ và tiện ích nói trên, nhưng trước tiên, hãy xem các tính năng thực tế giúp Vue CLI trở nên mạnh mẽ và linh hoạt.

Vue CLI là một Hệ thống đầy đủ tính năng để tăng cường quy trình phát triển Vue.js của chúng tôi

Vue CLI tăng tốc và giảm bớt sự phát triển dự án Vue.js nhờ bộ sưu tập các tính năng tuyệt vời của nó. Hãy xem những tính năng đó là gì:

• Kiến trúc dựa trên plugin. Vue CLI được xây dựng hoàn toàn xung quanh các plugin, điều này làm cho nó rất linh hoạt và có thể mở rộng. Chúng ta có thể chọn những plugin bổ trợ nào được thêm vào trong quá trình tạo dự án. Nhưng chúng tôi không chỉ giới hạn ở những điều này, chúng tôi có thể thêm bất kỳ số lượng bổ trợ bất cứ lúc nào sau khi tạo dự án.
• Vue CLI hoàn toàn có thể cấu hình, mở rộng và có thể nâng cấp.
• Một tập hợp các plugin được cài đặt sẵn chính thức, tích hợp các công cụ hạng nhất từ hệ sinh thái phía trước (Babel, ESLint, TypeScript, PWA, Jest, Mocha, Cypress và Nightwatch).
• Một cài đặt trước mặc định duy nhất, mà chúng ta có thể sửa đổi theo nhu cầu của mình trong quá trình tạo dự án hoặc sau đó.
• Không cần phải đẩy ra. Trái ngược với các công cụ React và Angular CLI, chúng tôi có thể kiểm tra và tinh chỉnh cấu hình webpack của dự án một cách an toàn bất cứ lúc nào sau khi tạo mà không cần phải đẩy ứng dụng và chuyển sang cấu hình thủ công.
• Hỗ trợ nhiều trang.
• Tạo mẫu ngay lập tức mà không cần bất kỳ cấu hình.
• Các mục tiêu xây dựng khác nhau cho phép chúng tôi sản xuất các phiên bản khác nhau của dự án của chúng tôi, chúng tôi có thể sử dụng một và cùng một cơ sở mã và xây dựng nó dưới dạng một ứng dụng, thư viện hoặc các thành phần web.
• Tính năng chế độ hiện đại. Điều này sẽ xây dựng ứng dụng của chúng tôi cho các trình duyệt hiện đại, nhưng với dự phòng tự động cho những trình duyệt cũ hơn. Thật tuyệt phải không?
• GUI đầy đủ để tạo, cập nhật và quản lý các dự án phức tạp một cách dễ dàng.
• API Plugin UI. Vue UI hiển thị API plugin mà chúng ta có thể sử dụng để thêm chức năng tùy chỉnh vào phiên bản GUI của CLI.
• Rất nhiều plugin hữu ích từ cộng đồng.

Bắt đầu với Vue CLI

Sau khi chúng tôi tìm hiểu về phép thuật Vue CLI, đã đến lúc thấy nó trong thực tế. Trước tiên, chúng tôi cần cài đặt Vue CLI 3. Nó yêu cầu Node.js 8,9+ (khuyến nghị 8.11.0+), vì vậy chúng tôi cần đảm bảo rằng chúng tôi có nó trên máy của mình. Sau đó, chúng tôi chỉ cần mở terminal hoặc dấu nhắc lệnh và chạy:

1

npm install -g @vue/cli

Sau khi cài đặt xong, chúng ta có thể bắt đầu sử dụng lệnh vue. Để kiểm tra xem mọi thứ có hoạt động chính xác không, chúng tôi chạy vue --version. Điều này sẽ hiển thị phiên bản Vue CLI đã cài đặt. Bây giờ, hãy khám phá những gì chúng ta thực sự có thể làm với Vue CLI.

Tạo mẫu ngay lập tức

Mặc dù Vue CLI được thiết kế chủ yếu để làm việc với các dự án phức tạp, nó cho phép chúng tôi thử các ý tưởng thô của mình một cách nhanh chóng và dễ dàng. Tính năng tạo mẫu ngay lập tức của nó có thể được kích hoạt bằng cách cài đặt bổ trợ Vue CLI Service toàn cầu:

1

npm install -g @vue/cli-service-global

Từ bây giờ, chúng ta có thể sử dụng lệnh vue phục vụ bất cứ khi nào chúng ta muốn. Hãy thử nó. Chúng tôi tạo một tệp App.vue với nội dung sau:

1

<template>

2

  <h1>Hello, Vue!</h1>

3

</template>

Sau đó, trong cùng một thư mục, chúng tôi chạy:

1

vue serve

Điều này sẽ khởi động máy chủ phát triển Vue CLI và sẽ chạy ứng dụng trên https: // localhost: 8080 /. Khi chúng tôi mở trình duyệt tại địa chỉ này, chúng tôi sẽ thấy một Hello, Vue! tiêu đề.

Tạo một dự án mới

Phần trước chỉ là một sự khởi động. Bây giờ chúng ta hãy làm một cái gì đó phức tạp hơn.

lệnh vue tạo sử dụng một quá trình tương tác để chọn các tùy chọn cho một dự án mới. Hãy chạy nó và đi qua các tùy chọn của nó.

1

vue create vuecli-project

Tạo một dự án mới với Vue CLI

Trong cửa sổ đầu tiên, chúng tôi được mời chọn một cài đặt trước. Chỉ có một cài đặt sẵn có sẵn trong hộp, được gọi là mặc định. Chúng tôi sẽ chọn tùy chọn thứ hai, đó là chọn thủ công các tính năng chúng tôi cần cho dự án và nhấn Enter để tiếp tục.

Trong cửa sổ tiếp theo, chúng tôi sử dụng các phím mũi tên để điều hướng lên và xuống danh sách các tính năng và phím cách để chọn những gì chúng tôi muốn. Ở đây, cùng với Babel và Linter / Formatter đã được chọn, tôi cũng đã kiểm tra Router và Vuex. Khi bạn đã chọn các tính năng cần thiết, nhấn Enter để tiếp tục.

Trong cửa sổ tiếp theo, chúng tôi được hỏi có nên sử dụng chế độ lịch sử cho bộ định tuyến hay không. Tôi chỉ cần nhấn Enter để chấp nhận mặc định là Có.

Trong cửa sổ tiếp theo, chúng ta cần chọn cách chúng ta muốn được cấu hình Linter. Tôi đã chọn ESLint + Prettier.

Trong cửa sổ tiếp theo, chúng tôi chọn khi Linter được sử dụng để kiểm tra dự án. Tôi đã chọn Lint khi lưu, áp dụng mỗi lần lưu tệp.

Trong cửa sổ tiếp theo, chúng tôi cần quyết định cách chúng tôi muốn định cấu hình dự án của mình. Chọn xem bạn muốn sử dụng các tệp cấu hình riêng biệt cho từng tính năng hay để bao gồm tất cả cài đặt cấu hình trong tệp pack.json. Tôi thích một tệp duy nhất và đã chọn tùy chọn In pack.json.

Trong cửa sổ cuối cùng, chúng tôi có khả năng lưu toàn bộ cấu hình tạo dự án dưới dạng cài đặt sẵn dễ sử dụng cho các dự án trong tương lai. Tôi tiết kiệm của tôi là spa đơn giản. Các cài đặt trước được lưu trong thư mục người dùng bên trong tệp .vuerc.

Khi chúng tôi hoàn thành quá trình tạo, dự án sẽ được tạo và cấu hình, và các gói được yêu cầu sẽ được tải xuống và cài đặt.

Khám phá cấu trúc dự án

Trong phần này, chúng ta sẽ khám phá những gì Vue CLI đã tạo ra cho chúng ta.

Trong thư mục dự án hiển thị ở trên, chúng tôi có các tệp và thư mục sau:

• Thư mục node_modules chứa các gói mà ứng dụng và công cụ phát triển yêu cầu.
• Thư mục chung chứa các tài sản dự án tĩnh, sẽ không được bao gồm trong quy trình đóng gói.
• Thư mục src chứa ứng dụng Vue.js với tất cả các tài nguyên.
• .gitignore chứa danh sách các tệp và thư mục được loại trừ khỏi điều khiển phiên bản Git.
• babel.config.js chứa các cài đặt cấu hình cho trình biên dịch Babel.
• pack.json chứa danh sách các gói cần thiết cho phát triển Vue.js cũng như các lệnh được sử dụng cho các công cụ phát triển.
• gói-lock.json chứa một danh sách đầy đủ các gói, theo yêu cầu của dự án và các phụ thuộc của chúng.
• README.md chứa thông tin chung về dự án.

Thư mục src mới tạo

Bây giờ chúng ta hãy xem xét kỹ hơn về thư mục src:

Trong thư mục src hiển thị ở trên, chúng tôi có các tệp và thư mục sau:

• Thư mục tài sản được sử dụng cho các tài nguyên tĩnh theo yêu cầu của ứng dụng và sẽ được bao gồm trong quy trình đóng gói.
• Thư mục thành phần được sử dụng cho các thành phần của ứng dụng.
• Thư mục khung nhìn được sử dụng cho các thành phần sẽ được hiển thị bằng tính năng định tuyến URL.
• App.vue là thành phần gốc.
• main.js là tệp JavaScript tạo đối tượng Vue.
• router.js được sử dụng để cấu hình bộ định tuyến Vue.
• store.js được sử dụng để định cấu hình lưu trữ dữ liệu được tạo bằng Vuex.

Thay đổi cấu hình dự án

Cấu hình dự án mặc định chứa các cài đặt hợp lý, nhưng nếu chúng ta cần, chúng ta có thể thay đổi chúng bằng cách thêm tệp vue.config.js vào thư mục dự án hoặc bằng cách thêm phần vue vào tệp pack.json. Hãy thử cái đầu tiên: Chúng tôi tạo tệp vue.config.js và đặt tùy chọn sau vào đó:

1

module.exports = {

2

  runtimeCompiler: true

3

}

Điều này sẽ cho phép các thành phần xác định các mẫu của chúng dưới dạng chuỗi, thay vì sử dụng các thành phần mẫu. Để khám phá bộ tùy chọn cấu hình đầy đủ, bạn có thể sử dụng truy cập trang Vue CLI Config.

Phát triển dự án

Như chúng ta đã thấy ở trên, Vue CLI Service đi kèm với ba tập lệnh mặc định: phục vụ, xây dựng và kiểm tra. Cái đầu tiên được sử dụng cho quá trình phát triển. Chúng tôi chạy dự án của chúng tôi với lệnh npm run phục vụ:

Khi chúng tôi mở ứng dụng của mình trong trình duyệt, chúng tôi sẽ thấy trang sau:

Đây là trang Home.vue, sử dụng thành phần HelloWorld.vue.

Lệnh phục vụ bắt đầu một máy chủ phát triển, dựa trên máy chủ webpack-dev, với tính năng Thay thế mô-đun nóng (HMR) đang hoạt động. Điều này có nghĩa là khi chúng tôi thực hiện các thay đổi trong các thành phần của mình và lưu chúng, chúng sẽ được phản ánh ngay lập tức và trang sẽ được cập nhật trong trình duyệt.

Thêm chức năng mới cho dự án với các plugin Vue CLI

Tại một số điểm phát triển ứng dụng của chúng tôi, chúng tôi có thể cần thêm một số chức năng bổ sung cho dự án và vì thế chúng tôi sẽ cần cài đặt các plugin Vue CLI. Một plugin Vue CLI có thể sửa đổi cấu hình webpack và tiêm các lệnh mới vào vue-cli-service. Để cài đặt một plugin, chúng tôi sử dụng lệnh vue add.

Hãy giả sử rằng chúng tôi muốn sử dụng các thành phần Bootstrap cho dự án của chúng tôi. May mắn thay, có một plugin bootstrap-vue, có thể cung cấp chúng cho chúng ta. Để cài đặt nó, chúng tôi chạy:

1

vue add bootstrap-vue

Sau khi cài đặt plugin, trong thư mục src, chúng tôi sẽ tìm thấy thư mục bổ trợ mới nơi đặt plugin mới.

Bây giờ, để kiểm tra chức năng của plugin, hãy sửa đổi tệp About.vue:

1

<template>

2

  <div class="about">

3

    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">

4

        <p>For more information visit website</p>

5

      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>

6

    </b-jumbotron>

7

  </div>

8

</template>

Và khi chúng ta trỏ đến trang Giới thiệu trong trình duyệt, chúng ta sẽ thấy trang được cập nhật và tạo kiểu với Bootstrap:

Xây dựng dự án sản xuất

Khi ứng dụng sẵn sàng triển khai, bạn cần tạo một nhóm các gói chỉ chứa mã và nội dung ứng dụng, cùng với các mô-đun mà chúng phụ thuộc, để các tệp này có thể được triển khai đến máy chủ HTTP sản xuất.

Xây dựng ứng dụng

Để xây dựng ứng dụng của chúng tôi, chúng tôi chạy:

1

npm run build --modern

Đối số --modern tạo hai phiên bản của ứng dụng. Một trong số chúng được nhắm mục tiêu cho các trình duyệt hiện đại hỗ trợ các tính năng JavaScript mới nhất và cái còn lại là dự phòng cho các trình duyệt cũ hơn cần thư viện bổ sung để xử lý các tính năng đó. Điều thú vị là sau khi chúng tôi triển khai ứng dụng, việc lựa chọn một phiên bản sẽ được sử dụng là hoàn toàn tự động!

Lưu ý: Khi chúng tôi chạy lệnh xây dựng, Vue CLI cho phép chúng tôi chỉ định tùy chọn --target, cho phép chúng tôi sử dụng cơ sở mã của mình cho các trường hợp sử dụng khác nhau. Mục tiêu xây dựng mặc định được đặt để xây dựng một ứng dụng. Chúng tôi có thêm hai tùy chọn để lựa chọn: xây dựng mã của chúng tôi dưới dạng thư viện hoặc dưới dạng các thành phần web. Kiểm tra trang Mục tiêu xây dựng để biết thêm chi tiết.

Khám phá thư mục dist

Khi quá trình xây dựng hoàn thành, một thư mục dist được tạo trong thư mục gốc của dự án. Hãy cùng khám phá nội dung của nó:

Tệp index.html sẽ là điểm vào cho ứng dụng. Nó chứa các thành phần liên kết và tập lệnh sẽ tải tất cả các tệp CSS và JavaScript cần thiết từ các thư mục css và js.

Vì vậy, bây giờ, chúng tôi đã sẵn sàng để triển khai ứng dụng của chúng tôi đến một máy chủ sản xuất. Có rất nhiều lựa chọn để lựa chọn. Bạn có thể tìm hiểu về nhiều người trong số họ bằng cách truy cập trang Triển khai.

Hãy để GUI-fy Dự án của chúng tôi với Vue UI

Vue CLI 3 là một rất mạnh mẽ, nhưng điều này đi kèm với một mức giá. Có quá nhiều lựa chọn, lệnh và tùy chọn để cấu hình và ghi nhớ. Điều này làm cho nó phức tạp hơn và khó làm việc hơn. Để đưa mọi thứ trở lại trạng thái dễ dàng và hạnh phúc, Guillaume Chau đã tạo Vue UI, giúp đơn giản hóa đáng kể trải nghiệm phát triển và làm cho nó dễ tiếp cận hơn. Thoạt đầu nghe có vẻ hơi lạ khi kết hợp công cụ CLI với giao diện đồ họa, nhưng như bạn sẽ thấy sau này, sự cộng sinh đặc biệt này khá mạnh mẽ và hiệu quả.

Tái tạo dự án của chúng tôi với Vue UI

Trong phần này, chúng ta sẽ thực hiện cùng một dự án mà chúng ta đã tạo trước đây, nhưng lần này chúng ta sẽ sử dụng Vue UI.

UI Vue được tạo với khung UI riêng và không cần Electron để chạy nó trong trình duyệt. Chỉ cần chạy lệnh vue ui, bất kể trong thư mục nào:

1

vue ui

Trình quản lý dự án Vue được khởi chạy với tab Dự án được chọn. Không có dự án nào. Để có một số dự án được liệt kê ở đây, chúng ta cần tạo chúng thông qua UI hoặc nhập các dự án được tạo bằng CLI. Hãy xem cách chúng ta có thể tạo một dự án mới.

Chúng tôi chuyển sang tab Tạo, điều hướng đến thư mục mong muốn cho ứng dụng của chúng tôi và nhấp vào nút Tạo dự án mới tại đây.

Trong màn hình tiếp theo, chúng tôi đặt tên cho thư mục dự án và chọn trình quản lý gói mà chúng tôi thích.

Trong màn hình tiếp theo, chúng tôi được phép chọn một cài đặt trước cho dự án. Nó có thể là mặc định, thủ công, từ xa hoặc cài đặt trước tùy chỉnh mà chúng tôi đã tạo trước đây. spa-đơn giản là một ví dụ về cài đặt trước tùy chỉnh. Ở đây, chúng tôi chọn Thủ công.

Trong màn hình tiếp theo, chúng tôi chọn các plugin chúng tôi muốn cài đặt.

Cuối cùng, chúng tôi đặt cài đặt cấu hình cho các plugin chúng tôi đã chọn để cài đặt. Khi chúng tôi sẵn sàng, chúng tôi nhấn nút Tạo dự án.

Bây giờ dự án sẽ được tạo và chúng tôi sẽ được chuyển hướng đến bảng điều khiển của dự án.

Sử dụng Bảng điều khiển dự án UI Vue

Trong phần Plugin, tất cả các plugin đã cài đặt được liệt kê. Để cài đặt một plugin mới, chúng tôi nhấn nút Thêm plugin.

Tại đây, chúng tôi có thể tìm kiếm plugin chúng tôi cần và khi tìm thấy nó, chúng tôi nhấn nút Cài đặt. Trong trường hợp của chúng tôi, chúng tôi tìm kiếm và cài đặt plugin bootstrap-vue.

Khi plugin được cài đặt, trong tab Cấu hình, chúng ta có thể đặt các tùy chọn được cung cấp.

Trong tab Tệp đã thay đổi, chúng tôi có thể kiểm tra tệp nào bị ảnh hưởng và làm thế nào. Ở đây, tôi không muốn thực hiện bất kỳ thay đổi nào, vì vậy tôi nhấn nút Bỏ qua.

Trong phần Phụ thuộc, chúng tôi đã liệt kê tất cả các phụ thuộc chính và phát triển. Để thêm phụ thuộc, chúng tôi nhấp vào nút Cài đặt phụ thuộc.

Trong cửa sổ phương thức, chúng ta có thể tìm kiếm các phụ thuộc chính hoặc phát triển và cài đặt chúng.

Trong phần Cấu hình, chúng tôi có thể tùy chỉnh các cài đặt được cung cấp cho các plugin chúng tôi đã thêm. Tại đây, chúng tôi có các cài đặt cho chính Vue CLI và cho plugin ESLint.

Phần Nhiệm vụ cung cấp cho chúng tôi cách thuận tiện để sử dụng tất cả các lệnh có sẵn được cung cấp từ Vue CLI và từ các plugin khác. Trong màn hình này, tác vụ phục vụ được chọn. Chúng ta có thể thay đổi các tham số của nó bằng cách nhấn nút Tham số.

Trong cửa sổ phương thức, chúng tôi chọn các tham số chúng tôi muốn chạy tác vụ.

Khi chúng tôi chạy tác vụ phục vụ, bảng điều khiển sẽ cập nhật với một số thông tin hữu ích.

Khi chúng ta chuyển sang tab đầu ra, chúng ta sẽ nhận được các bản ghi cho quá trình tác vụ.

Khi chúng tôi chuyển sang tab Trình phân tích, chúng tôi nhận được một biểu đồ đẹp tóm tắt thông tin cho toàn bộ dự án.

Nhiệm vụ xây dựng gần như tương tự với nhiệm vụ phục vụ, ngoại trừ việc trước đây tạo ra một gói sản xuất có thể được sử dụng để triển khai ứng dụng.

Chúng ta có thể đặt tham số cho tác vụ xây dựng theo cách tương tự như với tác vụ phục vụ.

Trường đầu ra của tác vụ kiểm tra cung cấp cho chúng tôi thông tin về cấu hình gói web được giải quyết.

Và đó là nó. Chúng tôi đã tạo lại thành công dự án của chúng tôi với Vue UI. Nhưng như chúng ta đã thấy quá trình tạo và cấu hình dễ dàng và dễ chịu hơn nhiều khi chúng ta sử dụng GUI.

Phần kết luận

Trong hướng dẫn này, chúng tôi đã học được rằng Vue CLI là một hệ thống hoàn chỉnh để phát triển web hiện đại. Nó cho phép chúng tôi hoạt động với toàn bộ hệ sinh thái Vue và các công cụ của bên thứ 3 một cách nhanh chóng và dễ dàng. Tất nhiên, chúng tôi không bắt buộc phải sử dụng Vue CLI cho các dự án Vue.js của chúng tôi. Đây hoàn toàn là sự lựa chọn của chúng tôi. Nhưng khi chúng tôi nhắm đến tốc độ và chất lượng, Vue CLI sẵn sàng giúp đỡ trong việc tạo, quản lý và triển khai các dự án của chúng tôi một cách chuyên nghiệp.