Tour of Heroes – phiên bản Vue.js 2.0
Kho chứa này chứa một phiên bản thực hiện ứng dụng hướng dẫn ‘Tour of Heroes’ của Angular 2 bằng Vue.js 2.0.
Mục tiêu chính của dự án này của tôi là so sánh (với lợi ích của riêng mình) Angular 2 và Vue 2 từ khía cạnh triển khai.
Mục tiêu phụ là xem tôi có thể đặt gần Vue 2 với React trong việc xây dựng các thành phần. Vue 2 đã giới thiệu khả năng sử dụng hàm render trong các thành phần và khả năng sử dụng JSX. Vì tôi quen thuộc hơn với React, tôi muốn xem tôi có thể đẩy xa Vue để tích hợp các mô phỏng giống React.
Điểm nổi bật
- Hàm
renderVue 2 cho tất cả các thành phần - JSX cho tất cả các hàm
render - Redux qua
revuecho Redux > Vue bindings (https://github.com/revue/revue) - Định tuyến qua
vue-router(https://github.com/vuejs/vue-router)
Cài đặt/sử dụng
Sao chép/tải kho chứa về
npm install
Do sự cố với revue và Vue 2.0 (https://github.com/revue/revue/issues/19), bạn cũng cần chỉnh sửa tệp sau:
node_modules/revue/revue.common.js-
Dòng này (nên là dòng 114):
_this.$set(_this.$data, realProp, deepProp(store.getState(), storeProp));
nên được thay thế bằng:
_this[realProp] = deepProp(store.getState(), storeProp);
gulp dev sẽ biên dịch/bắt webpack mọi thứ
BYOWS (Mang theo máy chủ web của riêng bạn). Nếu bạn sử dụng IIS/IIS Express, tệp web.config chứa một quy tắc chuyển hướng để đảm bảo tất cả các định tuyến được xử lý đúng cách.
.eslintrc.json
{
"extends": ["airbnb-base", "plugin:import/errors", "plugin:import/warnings"],
"parser": "babel-eslint",
"env": {
"mocha": true
},
"plugins": ["import"],
"settings": {
"import/resolver": {
"webpack": {
"config": "./webpack/webpack-base.config.js"
}
},
"import/ignore": ["node_modules", ".png$", ".jpg$"]
},
"rules": {
"import/no-duplicates": "off",
"import/no-named-as-default": "off",
"max-len": "off",
"import/no-extraneous-dependencies": ["error", {
"devDependencies": true,
"optionalDependencies": true
}],
"linebreak-style": ["error", "windows"],
"react/jsx-filename-extension": 0,
"import/prefer-default-export": "off"
}
}
.gitignore
/stats.json
/node_modules
/dist
gulpfile.js
const gulp = require('gulp');
const gutil = require('gulp-util');
const webpack = require('webpack');
const webpackConfigBase = require('./webpack/webpack-base.config');
const webpackConfigDev = require('./webpack/webpack-dev.config');
const path = require('path');
const del = require('del');
const fs = require('fs');
const webpackStatsDev = {
hash: true,
version: true,
timings: true,
assets: true,
chunks: false,
chunkModules: false,
modules: false,
cached: false,
reasons: true,
source: true,
errorDetails: true,
chunkOrigins: false,
colors: true,
};
function deployToPath(destinationPath) {
gulp.src('./dist/**')
.pipe(gulp.dest(destinationPath));
}
gulp.task('clean', () => del(['./dist/**']));
gulp.task('dev', ['clean', 'webpack-dev']);
gulp.task('webpack-dev', (callback) => {
webpack(webpackConfigDev(webpackConfigBase), (err, stats) => {
if (err) {
throw new gutil.PluginError('webpack', err);
}
fs.writeFileSync(
path.join(__dirname, 'stats.json'),
JSON.stringify(stats.toJson('verbose')));
let deployPath;
process.argv.forEach((value, index, map) => {
if (value === '-path') {
deployPath = map[index + 1];
}
});
if (deployPath) {
deployToPath(deployPath);
}
gutil.log('[webpack]', stats.toString(webpackStatsDev));
});
});
index.html
<html>
<head>
<title>Vue QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/app.css">
</head>
<!-- 3. Display the application -->
<body>
<div id="app">
</div>
<script src="/dist/vendor.bundle.js"></script>
<script src="/dist/app.bundle.js"></script>
</body>
</html>
Chi tiết tải về:
Tác giả: aweber1
Nguồn: https://github.com/aweber1/tour-of-heroes-vue2
