Blog đơn giản – Vue2-pwa
Blog đơn giản dựa trên các REST API của django-tastypie được xây dựng bằng Vuejs2-pwa. Nó bao gồm cách một ứng dụng vue js có thể được cấu trúc cùng với xác thực cơ bản đã được thiết lập. Cách các thành phần có thể được xây dựng để đạt được chức năng mong muốn tổng thể mà không cần lặp lại mã mỗi lần.
Điểm Light house cho pwa: 91/100
Sử dụng hình ảnh có độ phân giải cao trên màn hình chính, do đó thời gian tải ứng dụng mất thời gian và vì vậy nó có điểm thấp về hiệu suất.
Bạn có thể tìm thấy bản demo hoạt động tại đây -> demo
Các Plugin đã sử dụng:
- Vuetify
- axios (Cho http)
- Isotope (Cho grid)
- VeeValidate (Các kiểm tra hợp lệ)
Ghi chú:
- Ứng dụng hiện đang được triển khai trên Heroku nên nó hơi chậm. Ngay cả phần backend cũng được triển khai trên Heroku.
Các mục đã bao gồm:
- Xác thực
- Tạo bài viết
- Thao tác giao diện người dùng theo TRẠNG THÁI
Cần làm:
- Thêm chức năng bình luận
- Chuyển hướng nếu không xác thực hoặc không hiển thị nội dung
- Thêm chức năng thẻ
Thiết lập Xây dựng
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.eslintignore
build/*.js
config/*.js
.eslintrc.js
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
.gitignore
.DS_Store
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
test/unit/coverage
test/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.swp
Thông tin tải về:
Tác giả: deepak-singh
Nguồn: https://github.com/deepak-singh/vue-blog-pwa
Cảm ơn bạn!
