node版本说明：about.md

不适用pug

template/.eslintignore

@@ -1,3 +1,5 @@
 core/*.js
-core/*/*.js
+core/**/*.js
 build/*.js
+
+src/**/*.*

template/.eslintrc.js

@@ -1,31 +1,32 @@
 // https://eslint.org/docs/user-guide/configuring
 
 module.exports = {
-  root: true,
+    root: true,
-  parser: 'babel-eslint',
+    parser: 'babel-eslint',
-  parserOptions: {
+    parserOptions: {
-    sourceType: 'module'
+        sourceType: 'module'
-  },
+    },
-  globals: {
+    globals: {
-     "chrome": true
+        "chrome": true
-    // chrome: true
+        // chrome: true
-  },
+    },
-  env: {
+    env: {
-    browser: true,
+        browser: true,
-  },
+    },
-  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
-  extends: 'standard',
+    extends: 'standard',
-  // required to lint *.vue files
+    // required to lint *.vue files
-  plugins: [
+    plugins: [
-    'html'
+        'html'
-  ],
+    ],
-  // add your custom rules here
+    // add your custom rules here
-  'rules': {
+    rules: {
-    // allow paren-less arrow functions
+        // allow paren-less arrow functions
-    'arrow-parens': 0,
+        'arrow-parens': 0,
-    // allow async-await
+        // allow async-await
-    'generator-star-spacing': 0,
+        'generator-star-spacing': 0,
-    // allow debugger during development
+        // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-  }
+        'indent': ['error', 'tab'],
+    }
 }

template/About.md

@@ -0,0 +1,21 @@
+### 特别注意: 
+项目使用的node版本为8.+,否则会遇到这个问题:
+
+https://github.com/YuraDev/vue-chrome-extension-template/issues/19
+
+我使用的是8.4.0
+## 怎么切换node版本
+`mac`
+> 安装`n`扩展包: sudo npm i n -g
+![](../docs/about/7f59e923.png)
+
+> 安装指定版本node: sudo n 8.4.0
+![](../docs/about/6db62665.png)
+
+> 切换版本: sudo n
+![](../docs/about/bc372062.png)
+
+> 验证node版本: node -v
+![](../docs/about/098511ee.png)
+`win`
+- 补充...

template/package.json

@@ -18,6 +18,7 @@
   "scripts": {
     "lint": "eslint --ext .js,.vue src",
     "dev": "webpack --config ./core/webpack.dev.js --hide-modules",
+    "dev-info": "webpack --config ./core/webpack.dev.js",
     "build": "webpack --config ./core/webpack.prod.js -p --progress  --hide-modules --colors"
   },
   "devDependencies": {
@@ -31,7 +32,7 @@
     "babel-register": "^6.26.0",
     "buble": "^0.16.0",
     "buble-loader": "^0.4.1",
-    "clean-webpack-plugin": "^0.1.17",
+    "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.2.0",
     "cross-env": "^5.1.0",
     "css-loader": "^0.28.7",

template/src/devtools/index.js

@@ -1,3 +1,3 @@
 chrome.devtools.panels.create('panel', 'img/logo.png', 'pages/panel.html', function (panel) {
-  console.log('hello from callback')
+    console.log('hello from callback')
 })

template/src/devtools/panel.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import root from './root.vue'
+
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
-  el: '#root',
+    el: '#root',
-  render: h => h(root)
+    render: h => h(root)
 })

template/src/devtools/root.vue

@@ -2,17 +2,18 @@
     div devtools
 </template>
 <script>
-  export default {
+    export default {
-    data: () => ({
+        data: () => ({}),
-    }),
+        computed: {},
-    computed: { },
+        created() {
-    created () { },
+        },
-    mounted () { },
+        mounted() {
-    methods: { }
+        },
-  }
+        methods: {}
+    }
 </script>
 <style lang="scss">
-  div {
+    div {
-    color: blue
+        color: blue
-  }
+    }
 </style>

template/src/manifest.js

@@ -1,41 +1,40 @@
-
 module.exports = {
-  name: 'Vue Extension',
+    name: 'Vue Extension',
-  version: '1.0.0',
+    version: '1.0.0',
-  description: 'Vue.js Chrome Extension Template (wcer)',
+    description: 'Vue.js Chrome Extension Template (wcer)',
-  author: 'yura',
+    author: 'yura',
-  manifest_version: 2,
+    manifest_version: 2,
-  icons: { '16': 'icons/16.png', '128': 'icons/128.png' },
+    icons: {'16': 'icons/16.png', '128': 'icons/128.png'},
-  permissions: [
+    permissions: [
-    '<all_urls>',
+        '<all_urls>',
-    '*://*/*',
+        '*://*/*',
-    'activeTab',
+        'activeTab',
-    'tabs',
+        'tabs',
-    'cookies',
+        'cookies',
-    'background',
+        'background',
-    'contextMenus',
+        'contextMenus',
-    'unlimitedStorage',
+        'unlimitedStorage',
-    'storage',
+        'storage',
-    'notifications',
+        'notifications',
-    'identity',
+        'identity',
-    'identity.email'
+        'identity.email'
-  ],
+    ],
-  browser_action: {
+    browser_action: {
-    default_title: 'title',
+        default_title: 'title',
-    default_popup: 'pages/popup.html'
+        default_popup: 'pages/popup.html'
-  },
+    },
-  background: {
+    background: {
-    persistent: false,
+        persistent: false,
-    page: 'pages/background.html'
+        page: 'pages/background.html'
-  },
+    },
-  devtools_page: 'pages/devtools.html',
+    devtools_page: 'pages/devtools.html',
-  options_page: 'pages/options.html',
+    options_page: 'pages/options.html',
-  content_scripts: [{
+    content_scripts: [{
-    js: [ 'js/inject.js' ],
+        js: ['js/inject.js'],
-    run_at: 'document_end',
+        run_at: 'document_end',
-    matches: ['<all_urls>'],
+        matches: ['<all_urls>'],
-    all_frames: true
+        all_frames: true
-  }],
+    }],
-  content_security_policy: "script-src 'self' 'unsafe-eval'; object-src 'self'",
+    content_security_policy: "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  web_accessible_resources: [ 'panel.html', 'js/content.js' ]
+    web_accessible_resources: ['panel.html', 'js/content.js']
 }

template/src/options/index.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import root from './root.vue'
+
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
-  el: '#root',
+    el: '#root',
-  render: h => h(root)
+    render: h => h(root)
 })

template/src/options/root.vue

@@ -2,17 +2,18 @@
     div options
 </template>
 <script>
-  export default {
+    export default {
-    data: () => ({
+        data: () => ({}),
-    }),
+        computed: {},
-    computed: { },
+        created() {
-    created () { },
+        },
-    mounted () { },
+        mounted() {
-    methods: { }
+        },
-  }
+        methods: {}
+    }
 </script>
 <style>
-  div {
+    div {
-    color: blue
+        color: blue
-  }
+    }
 </style>

template/src/popup/index.js

@@ -7,6 +7,6 @@ Vue.config.productionTip = false
 Vue.use(ElementUI)
 /* eslint-disable no-new */
 new Vue({
-  el: '#root',
+    el: '#root',
-  render: h => h(root)
+    render: h => h(root)
 })

template/src/popup/root.vue

@@ -1,23 +1,26 @@
-<template lang="pug">
+<template>
-    div
+    <div>
-      el-button(type="primary" @click="tab") New tab 
+        666
+        <el-button type="primary" @click="tab">test</el-button>
+    </div>
 </template>
 <script>
-  export default {
+    export default {
-    data: () => ({
+        data: () => ({}),
-    }),
+        computed: {},
-    computed: { },
+        created() {
-    created () { },
+        },
-    mounted () { },
+        mounted() {
-    methods: {
+        },
-      tab () {
+        methods: {
-        chrome.tabs.create({ url: 'pages/app.html' })
+            tab() {
-      }
+                chrome.tabs.create({url: 'pages/app.html'})
+            }
+        }
     }
-  }
 </script>
 <style lang="scss">
-  div {
+    div {
-    color: blue
+        color: blue
-  }
+    }
 </style>

template/src/tab/index.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import root from './root.vue'
+
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
-  el: '#root',
+    el: '#root',
-  render: h => h(root)
+    render: h => h(root)
 })

template/src/tab/root.vue

@@ -1,18 +1,24 @@
 <template lang="pug">
-    div tab
+    <div>
+    <button>222</button>
+
+
+    </div>
+
 </template>
 <script>
-  export default {
+    export default {
-    data: () => ({
+        data: () => ({}),
-    }),
+        computed: {},
-    computed: { },
+        created() {
-    created () { },
+        },
-    mounted () { },
+        mounted() {
-    methods: { }
+        },
-  }
+        methods: {}
+    }
 </script>
 <style lang="scss">
-  div {
+    div {
-    color: blue
+        color: blue
-  }
+    }
 </style>