GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 05/02/2018 | 00:00 GMT+7

Sử dụng vue mới cli 3 để ứng dụng Scaffold Vue.js

vue-cli version 3 mang lại trải nghiệm hoàn toàn mới cho nhà phát triển. Group Vue đã rất nỗ lực trong việc đảm bảo việc tạo dự án Vue.js diễn ra suôn sẻ và không yêu cầu cấu hình ban đầu. Đồng thời, việc mở rộng và tinh chỉnh cấu hình dự án một cách ngắn gọn và dễ dàng cũng được thực hiện.

Ta hãy xem xét một số tính năng của vue-cli mới.

v3 của vue-cli vẫn đang ở dạng alpha tại thời điểm viết bài này.

Bắt đầu

Trước tiên, bạn cần cài đặt nó:

$ npm install -g @vue/cli

Như bạn thấy , Vue.js hiện sử dụng các gói có phạm vi để phân phối các gói của chúng trong không gian tên @vue .

Sau đó, ta chỉ cần tạo một dự án bằng lệnh: 

$ vue create cli-test # cli-test is just any folder name

Điều đó sẽ mở ra một dấu nhắc hỏi bạn có muốn cấu hình mặc định ( eslint , babel ) hay bạn muốn thêm các tính năng bổ sung, chẳng hạn như:

  • TypeScript
  • Hỗ trợ ứng dụng web tiến bộ
  • Bộ định tuyến Vue
  • Vuex
  • Bộ xử lý trước CSS
  • Linter / Formatter
  • Kiểm tra đơn vị
  • Kiểm tra từ đầu đến cuối

Tùy thuộc vào tùy chọn bạn chọn, bạn sẽ nhận được nhiều câu hỏi hơn. Chỉ cần chọn những gì phù hợp nhất với bạn. Khi bạn hoàn thành, các phần phụ thuộc sẽ bắt đầu được cài đặt và dự án của bạn sẽ sẵn sàng hoạt động.

Cấu hình

vue-cli nên đã tạo một số cấu hình. Cấu hình mặc định được tạo trong package.json và có dạng như sau:

package.json
{
  // ...
  "vue": {
    "lintOnSave": true
  },
  "babel": {
    "presets": [
      "@vue/app"
    ]
  },
  "eslintConfig": {
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Bạn có thể thấy gói @vue/app mới có tất cả cấu hình Babel mà Vue cần để chạy. Nhưng bạn vẫn có thể tinh chỉnh nó và thêm bất kỳ cấu hình nào khác mà bạn muốn.

Theo cấu hình eslint, nó bao gồm plugin:vue/essential có bộ luật được đề xuất cho Vue theo hướng dẫn kiểu của nó . Ngoài ra, nó cũng bao gồm eslint:recommended nhưng có thể thay đổi tùy theo sở thích của bạn. Ví dụ: nếu bạn chọn có eslint và xinh hơn, thay vào đó bạn sẽ nhận được @vue/prettier beautiful.

Bạn có thể yêu cầu cli đặt cấu hình trong các file riêng biệt nếu bạn chọn các tính năng theo cách thủ công. Điều đó sẽ tạo ra một số file tùy thuộc vào sự lựa chọn của bạn, chẳng hạn như .babelrc , .postcssrc , jest.config.js , tslint.json , v.v. Bạn có thể chuyển sang file cấu hình bất kỳ lúc nào bằng cách xóa nó khỏi package.json và chuyển nó sang file cấu hình tương ứng của nó.

Khi chọn các tùy chọn theo cách thủ công, bạn sẽ được hỏi liệu bạn có muốn lưu cấu hình đó làm cài đặt trước cho dự án trong tương lai hay không. Cấu hình đó được lưu trong ~ / .vuerc , đề phòng khi bạn cần sửa đổi nó.

npm Scripts

Ngoài ra, bạn sẽ nhận được môi trường production và phát triển không cấu hình đã được cài đặt theo các phương pháp hay nhất. Môi trường dành cho nhà phát triển đi kèm với tính năng reload module nóng, xây dựng nhanh và hơn thế nữa trong khi môi trường production cung cấp quá trình rút gọn, nối module , tối ưu hóa mã, v.v.

Điều này xảy ra nhờ vue-cli-service , được sử dụng trong các tập lệnh npm của các file package.json của bạn. Bên trong, vue-cli-service có các cấu hình webpack sẵn sàng cho các môi trường khác nhau.

Các tập lệnh có sẵn cho ta theo mặc định là:

  • phục vụ : “vue-cli-service serve –open”
  • xây dựng : “vue-cli-service build”
  • lint : “vue-cli-service lint”. Bạn không cần phải chạy thủ công, nó có thể chạy tự động nếu bạn chọn lưu hoặc trước khi commit

Và nếu bạn đã thêm nhiều tính năng hơn, bạn có thể nhận được một số tập lệnh bổ sung:

  • kiểm tra : “vue-cli-service test”
  • e2e : “vue-cli-service e2e”
  • e2e-open : “vue-cli-service e2e: open”

Bạn có thể chạy bất kỳ cái nào trong số đó bằng cách sử dụng npm run . Ví dụ: npm run serve sẽ khởi động một server nhà phát triển.

Các biến môi trường

vue-cli sử dụng file .env thông thường như được đề xuất bởi ứng dụng mười hai yếu tố . Điều đó đảm bảo nó tuân theo các quy ước tiêu chuẩn và tương thích chéo với các hệ thống khác.

Bạn có thể xác định file .env như sau:

.env
VUE_APP_BASE_URI=/api
VUE_APP_DEBUG=true

Chỉ các biến bắt đầu bằng `VUE_APP_` mới được tải. Đảm bảo rằng bạn đặt tên chúng một cách chính xác.

Và chúng sẽ được tải và có sẵn bằng process.env.VUE_APP_BASE_URI chẳng hạn.

Bạn cũng có thể xác định các biến môi trường cho mỗi môi trường. Đối với điều đó, bạn phải thêm hậu tố thích hợp, được lấy từ biến NODE_ENV:

  • .env.development
  • .env.production
  • .env.test

Chúng sẽ overrides các giá trị .env cơ sở. Ví dụ: từ ví dụ trước, tốt hơn là ta nên xác định VUE_APP_DEBUG dựa trên môi trường:

.env.development
VUE_APP_DEBUG=true
.env.production
VUE_APP_DEBUG=false

Ủy quyền

Bạn có thể cấu hình proxy bằng cách thêm đối tượng proxy vào file package.json để chuyển tiếp một số cuộc gọi đến một url cụ thể đang được phát triển:

package.json
{
  "proxy": {
    "/api": "http://localhost:4000"
  }
}

Bằng cách đó, tất cả các lệnh gọi trùng với mẫu /\/api/ sẽ được chuyển tiếp đến http: // localhost: 4000

Tệp vue.config.js

Theo mặc định, bạn sẽ có khóa cấu hình vue trên package.json của bạn , nhưng bạn có thể chuyển cấu hình đó sang file vue.config.js .

Tệp vue.config.js dùng để cấu hình ứng dụng. Hiện tại, đã có một số thuộc tính bạn có thể sử dụng, nhưng dự kiến rằng file này sẽ là mục tiêu cho các tính năng hoặc plugin sắp tới:

vue.config.js
module.exports = {
  lintOnSave: true,
  configureWebpack: {
    output: {
      path: __dirname + "/cool-build"
    }
  }
};

Tôi nghĩ lintOnSave khá mô tả về nó.

Các configureWebpack key cho phép ta thay đổi cấu hình mặc định webpack nội bộ. Điều đó thực sự mạnh mẽ, vì theo mặc định, bạn có các tính năng phổ biến nhất được cài đặt cho các môi trường khác nhau mà không cần cấu hình nào cả. Nhưng nếu cần, bạn có thể tinh chỉnh bằng phím này. Trong ví dụ, tôi chỉ thay đổi đường dẫn kết quả được mặc định thành /dist .

Các configureWebpack đối tượng sẽ được sáp nhập với một nội bộ. Bạn cũng có thể sử dụng một hàm chấp nhận cấu hình làm đối số:

vue.config.js
module.exports = {
  configureWebpack: config => {
    // ...
  }
};

Thêm các plugin CLI

Bạn luôn có thể bắt đầu từ cấu hình mặc định cơ bản và thêm chức năng khi bạn sử dụng các plugin. Tất cả chúng đều hoạt động theo cùng một cách: bạn cài đặt chúng, sau đó gọi chúng và chúng sẽ làm điều kỳ diệu cho bạn.

Ví dụ: giả sử bạn cần có chức năng Ứng dụng web tiến bộ (PWA) và bạn đã không chọn chức năng này khi tạo dự án. Để thêm nó dễ dàng như:

$ npm install @vue/cli-plugin-pwa
$ vue invoke pwa # you don't need the @vue/cli-plugin- prefix

Các plugin cũng có thể có các tùy chọn khi chúng được gọi. Ví dụ: cli-plugin-eslint có thể được gọi với các đối số sau:

$ vue invoke eslint --config airbnb --lintOn save

Kết thúc

Bạn đã thấy tổng quan về vue-cli mới. Nó có một kiến trúc được xác định rõ ràng giúp nó có thể mở rộng trong khi bắt đầu từ cấu hình 0. Nó cũng bao gồm một số trường hợp thông thường như proxy hoặc cài đặt các biến môi trường. Mong đợi nhiều tính năng và plugin thú vị hơn trong tương lai.

Giữ bình tĩnh 🦄

Tags:

Các tin liên quan