javascript - vue如何使用组件？-PHP中文网问答

我的目录结构如下：

 -components
     test.vue
 -dist
     app.js
 -src
     app.js
     app.vue
     vue.js
 -index.html
 -gulpfile.js
 -package.json

代码如下：

index.html




    
    cityList


    111

app.js

var Vue = require('vue'); 
new Vue(require('./app.vue'));

app.vue

test.vue

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这一个样式，其他都没显示到，这是什么问题呢？