全局安装yeoman

npm install --global yo gulp-cli bower generator-chrome-extension

在工作目录创建一个目录，yo chrome-extension

安装webpack

npm install --save webpack webpack-stream babel-loader vue vue-loader css-loader vue-template-compiler babel-preset-env

在gulpfile.babel.js文件顶端加入以下内容：

import wepackStream from 'webpack-stream'
import webpack from 'webpack'

gulp.task('babel', () => {
  return gulp.src('app/scripts.babel')
    .pipe(webpackStream(require('./webpack.config.js'), webpack)
      .on('error', function (err) {
        console.log(err);
        this.emit('end');
      }))
    .pipe(gulp.dest('app/scripts/'))
});

监听.vue变化

gulp.task('watch', ['lint', 'babel'], () => {
  $.livereload.listen();

  gulp.watch([
    'app/*.html',
    'app/scripts/**/*.js',
    'app/scripts/**/*.vue',
    'app/images/**/*',
    'app/styles/**/*',
    'app/_locales/**/*.json'
  ]).on('change', $.livereload.reload);

  gulp.watch(['app/scripts.babel/**/*.js', 'app/scripts.babel/**/*.vue'], ['lint', 'babel']);
  gulp.watch('bower.json', ['wiredep']);
});

添加lint

gulp.task('lint', lint('app/scripts.babel/**/*.js', {
  env: {
    es6: true
  },
  parserOptions: {
    sourceType: 'module'
  }
}));

在根目录创建webpack.config.js，加入以下内容：

module.exports = {
    context: __dirname + '/app/scripts.babel/',
    entry: {
        background: './background.js', // remove unused
        chromereload: './chromereload.js',
        contentscript: './contentscript.js',
        popup: './popup.js',
    },
    output: { filename: '[name].js' },
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader'
        }, {
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    }
}

在运行应用之前，记得gulp watch

为了安全起见，模板必须编译

创建文件：

app/scripts.babel/popup/Popup.vue

添加内容：

<template>
    <h1>Hello Vue!</h1>
</template>

添加popup.html文件，添加内容：

<div id="app"></div>

在popup.js添加内空：

import Vue from 'vue';
import Popup from './popup/Popup.vue';

new Vue({
    el: '#app',
    render: c => c(Popup)
});

在chrome浏览器加载app/