极客观点
项目管理
HarmonyOS
我的目录结构如下：
-components
test.vue
-dist
app.js
-src
app.js
app.vue
vue.js
-index.html
-gulpfile.js
-package.json代码如下：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>cityList</title>
</head>
<body>
<div>111</div>
<script type="text/javascript" src="dist/app.js"></script>
</body>
</html>app.js
var Vue = require('vue');
new Vue(require('./app.vue'));app.vue
<template>
<div id="box">
<input type="text">
</div>
</template>
<script>
module.exports = {
components : {
'test' : require('../components/test.vue')
}
}
</script>test.vue
<style>
body{
background-color: #ccc;
}
</style>
<template>
<inputbox>123</inputbox>
<p>test.vue已经加载</p>
</template>
<script>
module.exports = {
events: {
test: function (data) {
console.log('run it.');
}
}
}
</script>gulpfile.js
var gulp = require('gulp')
var webpack = require('gulp-webpack')
var named = require('vinyl-named')
var appList = ['app','./test','../index']
gulp.task('default', ['bundle'], function() {
console.log('done')
})
gulp.task('bundle', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig()))
.pipe(gulp.dest('dist/'))
})
gulp.task('watch', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig({watch: true})))
.pipe(gulp.dest('dist/'))
})
/**
* @private
*/
function getConfig(opt) {
var config = {
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue'}
]
},
devtool: 'source-map'
}
if (!opt) {
return config
}
for (var i in opt) {
config[i] = opt[i]
}
return config
}
/**
* @private
*/
function mapFiles(list, extname) {
return list.map(function (app) {return 'src/' + app + '.' + extname})
}
现在，我想在页面中显示test.vue和app.vue的内容。
但是，页面上只显示了background-color这一个样式，其他都没显示到，这是什么问题呢？
更新：
完整可运行的代码放在了 https://github.com/yangjunjun/vue-pack-demo （使用 webpack 来构建）
你要明白 Vue 中组件的用法（请参考:http://cn.vuejs.org/guide/components.html）
index.html 修改为如下：
app.js 修改为如下：