VueJS: Các công cụ phát triển
Kiểm tra ứng dụng của bạn là một phần của sự phát triển web. Nuxt.js giúp bạn làm cho nó dễ dàng nhất có thể.
Kiểm tra đầu cuối
AVA là một khung kiểm tra JavaScript mạnh mẽ, pha trộn với jsdom , chúng ta có thể sử dụng chúng để thực hiện kiểm tra đầu cuối một cách dễ dàng.
Trước tiên, chúng ta cần thêm AVA và jsdom làm phụ thuộc phát triển:
npm install --save-dev ava jsdom
Sau đó thêm tập lệnh kiểm tra package.jsonvào tệp của chúng tôi và định cấu hình AVA để biên dịch các tệp mà chúng tôi nhập vào kiểm tra.
"scripts": {
"test": "ava",
},
"ava": {
"require": [
"babel-register"
]
},
"babel": {
"presets": [
"env"
]
}
Chúng tôi sẽ viết bài kiểm tra của chúng tôi trong testthư mục:
mkdir test
Hãy nói rằng chúng tôi có một trang trong pages/index.vue:
<template>
<h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
data () {
return { name: 'world' }
}
}
</script>
<style>
.red {
color: red;
}
</style>
Khi chúng tôi khởi chạy ứng dụng của mình với npm run devvà mở http: // localhost: 3000 , chúng tôi có thể thấy Hello world!tiêu đề màu đỏ của chúng tôi .
Chúng tôi thêm tập tin thử nghiệm của chúng tôi test/index.test.js:
import test from 'ava'
import { Nuxt, Builder } from 'nuxt'
import { resolve } from 'path'
// We keep a reference to Nuxt so we can close
// the server at the end of the test
let nuxt = null
// Init Nuxt.js and start listening on localhost:4000
test.before('Init Nuxt.js', async t => {
const rootDir = resolve(__dirname, '..')
let config = {}
try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
config.rootDir = rootDir // project folder
config.dev = false // production build
config.mode = 'universal' // Isomorphic application
nuxt = new Nuxt(config)
await new Builder(nuxt).build()
nuxt.listen(4000, 'localhost')
})
// Example of testing only generated html
test('Route / exits and render HTML', async t => {
let context = {}
const { html } = await nuxt.renderRoute('/', context)
t.true(html.includes('<h1 class="red">Hello world!</h1>'))
})
// Example of testing via DOM checking
test('Route / exits and render HTML with CSS applied', async t => {
const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
const element = window.document.querySelector('.red')
t.not(element, null)
t.is(element.textContent, 'Hello world!')
t.is(element.className, 'red')
t.is(window.getComputedStyle(element).color, 'red')
})
// Close the Nuxt server
test.after('Closing server', t => {
nuxt.close()
})
Bây giờ chúng tôi có thể khởi chạy thử nghiệm của mình:
npm test
jsdom có một số hạn chế vì nó không sử dụng trình duyệt. Tuy nhiên, nó sẽ bao gồm hầu hết các bài kiểm tra của chúng tôi. Nếu bạn muốn sử dụng trình duyệt để kiểm tra ứng dụng của mình, bạn có thể muốn xem Nightwatch.js .
Tiếng Anh và đẹp hơn
ESLint là một công cụ tuyệt vời để giữ cho mã của bạn sạch sẽ.
Prettier là một trình định dạng mã rất phổ biến.
Bạn có thể thêm ESLint với Prettier khá dễ dàng với Nuxt.js, trước tiên, bạn cần thêm các phụ thuộc npm:
npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
Sau đó, bạn có thể định cấu hình ESLint thông qua một .eslintrc.jstệp trong thư mục dự án gốc của bạn:
export default {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
"eslint:recommended",
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
"plugin:vue/recommended",
"plugin:prettier/recommended"
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
"semi": [2, "never"],
"no-console": "off",
"vue/max-attributes-per-line": "off",
"prettier/prettier": ["error", { "semi": false }]
}
}
Sau đó, bạn có thể thêm lintvà lintfixtập lệnh vào package.json:
"scripts": {
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}
Bây giờ bạn có thể khởi chạy lintđể kiểm tra lỗi:
npm run lint
hoặc lintfixcũng sửa những cái có thể làm được
npm run lintfix
ESLint sẽ lint tất cả các tệp JavaScript và Vue của bạn trong khi bỏ qua các tệp bị bỏ qua được xác định trong của bạn .gitignore.
Bạn cũng nên bật chế độ tải lại nóng của ESLint qua webpack. Bằng cách này, ESLint sẽ chạy tiết kiệm trong thời gian npm run dev. Chỉ cần thêm các mục sau vào nuxt.config.js:
...
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
})
}
}
}
Một cách tốt nhất là thêm "precommit": "npm run lint"vào gói.json của bạn để tự động mã hóa mã của bạn trước khi xác nhận mã của bạn.