Skip to content

Commit 9ff5c26

Browse files
author
ruanxin79
committed
vue-jsx
1 parent 05aaa44 commit 9ff5c26

37 files changed

+12672
-0
lines changed

‎README.md

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# vue-jsx<==vue-router,完整的demo示例
2+
3+
> A Vue.js project
4+
5+
#### 在VUE项目中使用JSX来书写你的单文件组件，而无需繁琐的使用createElement函数来构建你的组件，更多的语法实例在这里：[babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage)
6+
7+
## Ready
8+
9+
```bash
10+
1. git clone https://github.com/noteScript/vue_jsx.git
11+
2. cd vue_jsx
12+
3. npm install
13+
4. npm run dev
14+
```
15+
16+
## Build Setup
17+
18+
``` bash
19+
# install dependencies
20+
npm install
21+
22+
# serve with hot reload at localhost:8080
23+
npm run dev
24+
25+
# build for production with minification
26+
npm run build
27+
28+
# build for production and view the bundle analyzer report
29+
npm run build --report
30+
31+
# run unit tests
32+
npm run unit
33+
34+
# run e2e tests
35+
npm run e2e
36+
37+
# run all tests
38+
npm test
39+
```
40+
### 需要注意的文件
41+
>.babelrc
42+
`
43+
{
44+
"presets": [
45+
["env", {
46+
"modules": false,
47+
"targets": {
48+
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
49+
}
50+
}],
51+
"stage-2"
52+
],
53+
"plugins": ["transform-runtime","transform-vue-jsx"],
54+
"env": {
55+
"test": {
56+
"presets": ["env", "stage-2"],
57+
"plugins": ["istanbul","transform-vue-jsx"]
58+
}
59+
}
60+
}
61+
`
62+
63+
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎build/build.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use strict'
2+
require('./check-versions')()
3+
4+
process.env.NODE_ENV = 'production'
5+
6+
const ora = require('ora')
7+
const rm = require('rimraf')
8+
const path = require('path')
9+
const chalk = require('chalk')
10+
const webpack = require('webpack')
11+
const config = require('../config')
12+
const webpackConfig = require('./webpack.prod.conf')
13+
14+
const spinner = ora('building for production...')
15+
spinner.start()
16+
17+
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18+
if (err) throw err
19+
webpack(webpackConfig, function (err, stats) {
20+
spinner.stop()
21+
if (err) throw err
22+
process.stdout.write(stats.toString({
23+
colors: true,
24+
modules: false,
25+
children: false,
26+
chunks: false,
27+
chunkModules: false
28+
}) + '\n\n')
29+
30+
if (stats.hasErrors()) {
31+
console.log(chalk.red(' Build failed with errors.\n'))
32+
process.exit(1)
33+
}
34+
35+
console.log(chalk.cyan(' Build complete.\n'))
36+
console.log(chalk.yellow(
37+
' Tip: built files are meant to be served over an HTTP server.\n' +
38+
' Opening index.html over file:// won\'t work.\n'
39+
))
40+
})
41+
})

‎build/check-versions.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
'use strict'
2+
const chalk = require('chalk')
3+
const semver = require('semver')
4+
const packageConfig = require('../package.json')
5+
const shell = require('shelljs')
6+
function exec (cmd) {
7+
return require('child_process').execSync(cmd).toString().trim()
8+
}
9+
10+
const versionRequirements = [
11+
{
12+
name: 'node',
13+
currentVersion: semver.clean(process.version),
14+
versionRequirement: packageConfig.engines.node
15+
}
16+
]
17+
18+
if (shell.which('npm')) {
19+
versionRequirements.push({
20+
name: 'npm',
21+
currentVersion: exec('npm --version'),
22+
versionRequirement: packageConfig.engines.npm
23+
})
24+
}
25+
26+
module.exports = function () {
27+
const warnings = []
28+
for (let i = 0; i < versionRequirements.length; i++) {
29+
const mod = versionRequirements[i]
30+
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
31+
warnings.push(mod.name + ': ' +
32+
chalk.red(mod.currentVersion) + ' should be ' +
33+
chalk.green(mod.versionRequirement)
34+
)
35+
}
36+
}
37+
38+
if (warnings.length) {
39+
console.log('')
40+
console.log(chalk.yellow('To use this template, you must update following to modules:'))
41+
console.log()
42+
for (let i = 0; i < warnings.length; i++) {
43+
const warning = warnings[i]
44+
console.log(' ' + warning)
45+
}
46+
console.log()
47+
process.exit(1)
48+
}
49+
}

‎build/dev-client.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
'use strict'
3+
require('eventsource-polyfill')
4+
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
5+
6+
hotClient.subscribe(function (event) {
7+
if (event.action === 'reload') {
8+
window.location.reload()
9+
}
10+
})

‎build/dev-server.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
'use strict'
2+
require('./check-versions')()
3+
4+
const config = require('../config')
5+
if (!process.env.NODE_ENV) {
6+
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
7+
}
8+
9+
const opn = require('opn')
10+
const path = require('path')
11+
const express = require('express')
12+
const webpack = require('webpack')
13+
const proxyMiddleware = require('http-proxy-middleware')
14+
const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production')
15+
? require('./webpack.prod.conf')
16+
: require('./webpack.dev.conf')
17+
18+
// default port where dev server listens for incoming traffic
19+
const port = process.env.PORT || config.dev.port
20+
// automatically open browser, if not set will be false
21+
const autoOpenBrowser = !!config.dev.autoOpenBrowser
22+
// Define HTTP proxies to your custom API backend
23+
// https://github.com/chimurai/http-proxy-middleware
24+
const proxyTable = config.dev.proxyTable
25+
26+
const app = express()
27+
const compiler = webpack(webpackConfig)
28+
29+
const devMiddleware = require('webpack-dev-middleware')(compiler, {
30+
publicPath: webpackConfig.output.publicPath,
31+
quiet: true
32+
})
33+
34+
const hotMiddleware = require('webpack-hot-middleware')(compiler, {
35+
log: false,
36+
heartbeat: 2000
37+
})
38+
// force page reload when html-webpack-plugin template changes
39+
// currently disabled until this is resolved:
40+
// https://github.com/jantimon/html-webpack-plugin/issues/680
41+
// compiler.plugin('compilation', function (compilation) {
42+
// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
43+
// hotMiddleware.publish({ action: 'reload' })
44+
// cb()
45+
// })
46+
// })
47+
48+
// enable hot-reload and state-preserving
49+
// compilation error display
50+
app.use(hotMiddleware)
51+
52+
// proxy api requests
53+
Object.keys(proxyTable).forEach(function (context) {
54+
let options = proxyTable[context]
55+
if (typeof options === 'string') {
56+
options = { target: options }
57+
}
58+
app.use(proxyMiddleware(options.filter || context, options))
59+
})
60+
61+
// handle fallback for HTML5 history API
62+
app.use(require('connect-history-api-fallback')())
63+
64+
// serve webpack bundle output
65+
app.use(devMiddleware)
66+
67+
// serve pure static assets
68+
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
69+
app.use(staticPath, express.static('./static'))
70+
71+
const uri = 'http://localhost:' + port
72+
73+
var _resolve
74+
var _reject
75+
var readyPromise = new Promise((resolve, reject) => {
76+
_resolve = resolve
77+
_reject = reject
78+
})
79+
80+
var server
81+
var portfinder = require('portfinder')
82+
portfinder.basePort = port
83+
84+
console.log('> Starting dev server...')
85+
devMiddleware.waitUntilValid(() => {
86+
portfinder.getPort((err, port) => {
87+
if (err) {
88+
_reject(err)
89+
}
90+
process.env.PORT = port
91+
var uri = 'http://localhost:' + port
92+
console.log('> Listening at ' + uri + '\n')
93+
// when env is testing, don't need open it
94+
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
95+
opn(uri)
96+
}
97+
server = app.listen(port)
98+
_resolve()
99+
})
100+
})
101+
102+
module.exports = {
103+
ready: readyPromise,
104+
close: () => {
105+
server.close()
106+
}
107+
}

‎build/utils.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
'use strict'
2+
const path = require('path')
3+
const config = require('../config')
4+
const ExtractTextPlugin = require('extract-text-webpack-plugin')
5+
6+
exports.assetsPath = function (_path) {
7+
const assetsSubDirectory = process.env.NODE_ENV === 'production'
8+
? config.build.assetsSubDirectory
9+
: config.dev.assetsSubDirectory
10+
return path.posix.join(assetsSubDirectory, _path)
11+
}
12+
13+
exports.cssLoaders = function (options) {
14+
options = options || {}
15+
16+
const cssLoader = {
17+
loader: 'css-loader',
18+
options: {
19+
minimize: process.env.NODE_ENV === 'production',
20+
sourceMap: options.sourceMap
21+
}
22+
}
23+
24+
// generate loader string to be used with extract text plugin
25+
function generateLoaders (loader, loaderOptions) {
26+
const loaders = [cssLoader]
27+
if (loader) {
28+
loaders.push({
29+
loader: loader + '-loader',
30+
options: Object.assign({}, loaderOptions, {
31+
sourceMap: options.sourceMap
32+
})
33+
})
34+
}
35+
36+
// Extract CSS when that option is specified
37+
// (which is the case during production build)
38+
if (options.extract) {
39+
return ExtractTextPlugin.extract({
40+
use: loaders,
41+
fallback: 'vue-style-loader'
42+
})
43+
} else {
44+
return ['vue-style-loader'].concat(loaders)
45+
}
46+
}
47+
48+
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
49+
return {
50+
css: generateLoaders(),
51+
postcss: generateLoaders(),
52+
less: generateLoaders('less'),
53+
sass: generateLoaders('sass', { indentedSyntax: true }),
54+
scss: generateLoaders('sass'),
55+
stylus: generateLoaders('stylus'),
56+
styl: generateLoaders('stylus')
57+
}
58+
}
59+
60+
// Generate loaders for standalone style files (outside of .vue)
61+
exports.styleLoaders = function (options) {
62+
const output = []
63+
const loaders = exports.cssLoaders(options)
64+
for (const extension in loaders) {
65+
const loader = loaders[extension]
66+
output.push({
67+
test: new RegExp('\\.' + extension + '$'),
68+
use: loader
69+
})
70+
}
71+
return output
72+
}

‎build/vue-loader.conf.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict'
2+
const utils = require('./utils')
3+
const config = require('../config')
4+
const isProduction = process.env.NODE_ENV === 'production'
5+
6+
module.exports = {
7+
loaders: utils.cssLoaders({
8+
sourceMap: isProduction
9+
? config.build.productionSourceMap
10+
: config.dev.cssSourceMap,
11+
extract: isProduction
12+
}),
13+
transformToRequire: {
14+
video: 'src',
15+
source: 'src',
16+
img: 'src',
17+
image: 'xlink:href'
18+
}
19+
}

0 commit comments

Comments
 (0)