Merge Develop

generator/index.js

@@ -12,51 +12,45 @@ const originalFiles = [
 
 let srcFileList = [];
 
-module.exports = (api, options, rootOptions, opts) => {
-
-  if (!api.hasPlugin('vue-router')) {
-    api.extendPackage({
-      dependencies: {
-        "vue-router": "^3.0.1"
-      }
-    })
-  }
+const devDependencies = {
+  "node-sass": "^4.9.0",
+  "sass-loader": "^7.0.1",
+  "@vue/eslint-config-airbnb": "^4.0.0",
+  "@vue/eslint-config-prettier": "^3.0.5",
+  "babel-plugin-transform-imports": "^1.5.1",
+  "eslint-plugin-html": "^4.0.1",
+  "eslint-friendly-formatter": "^4.0.1",
+  "svg-inline-loader": "^0.8.0",
+}
 
-  if (!api.hasPlugin('vuex')) {
-    api.extendPackage({
-      dependencies: {
-        "vuex": "^3.0.1"
-      }
-    })
-  }
+const newDependencies = {
+  "vue-router": "^3.0.1",
+  "vuex": "^3.0.1",
+}
 
-  if (!api.hasPlugin('node-sass')) {
-    api.extendPackage({
-      devDependencies: {
-        "node-sass": "^4.9.0",
-      }
-    })
-  }
+module.exports = (api, options, rootOptions, opts) => {
 
-  if (!api.hasPlugin('sass-loader')) {
-    api.extendPackage({
-      devDependencies: {
-        "sass-loader": "^7.0.1",
-      }
-    })
-  }
+  // Install Dev Dependecies
+  Object.keys(devDependencies).forEach( dependencyName => {
+    if (!api.hasPlugin(dependencyName)) {
+      api.extendPackage({
+        "devDependencies": {
+          [dependencyName] : devDependencies[dependencyName]
+        }
+      })
+    }
+  });
 
-  api.extendPackage({
-    devDependencies: {
-      "eslint-plugin-html": "^4.0.1",
-      "eslint-config-airbnb-base": "^13.1.0",
-      "eslint-config-prettier": "^3.1.0",
-      "eslint-plugin-import": "^2.14.0",
-      "eslint-plugin-prettier": "^3.0.0",
-      "eslint-friendly-formatter": "^4.0.1",
-      "svg-inline-loader": "^0.8.0",
+  // Install new Dependecies
+  Object.keys(newDependencies).forEach( dependencyName => {
+    if (!api.hasPlugin(dependencyName)) {
+      api.extendPackage({
+        "dependencies": {
+          [dependencyName] : newDependencies[dependencyName]
+        }
+      })
     }
-  })
+  });
 
   api.postProcessFiles(files => {
     const fileList = Object.keys(files);
@@ -69,7 +63,7 @@ module.exports = (api, options, rootOptions, opts) => {
         const currentPath = api.resolve(file)
         try {
           fs.unlinkSync(currentPath);
-          console.log('successfully deleted '+file);
+          console.log('successfully deleted', file);
         } catch (err) {
           console.error(err); 
         }

generator/template/_eslintrc.js

@@ -11,12 +11,12 @@ module.exports = {
     browser: true,
     node:true
   },
-  extends: ['airbnb-base', 'prettier', 'plugin:vue/recommended'],
+  extends: ['@vue/airbnb', '@vue/prettier', 'plugin:vue/essential', 'plugin:vue/recommended'],
   plugins: ['import', 'prettier', 'vue'],
   settings: {
     'import/resolver': {
       webpack: {
-        config: 'build-tools/config/webpack/webpack.base.conf.js',
+        config: require.resolve('@vue/cli-service/webpack.config.js'),
       },
     },
   },
@@ -32,8 +32,8 @@ module.exports = {
       },
     ],
     // allow debugger during development
-    'no-debugger': 2,
-    'no-console': 1,
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-param-reassign': 0,
     // only for use with getter-setters
     'no-underscore-dangle': 0,

generator/template/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: ['@vue/app'],
+  plugins: [
+    [
+      'transform-imports',
+      {
+        '@/components': {
+          /* eslint-disable-next-line no-template-curly-in-string */
+          transform: '@/components/${member}',
+          preventFullImport: true,
+        },
+      },
+    ],
+  ],
+};

generator/template/src/App/App.js

@@ -1,4 +1,3 @@
-// @vue/component
 export default {
   name: 'App',
 };

generator/template/src/App/index.js

@@ -1,3 +1 @@
-import App from './App';
-
-export default App;
+export { default } from './App'

generator/template/src/components/ExampleComponent/ExampleComponent.vue

@@ -7,5 +7,25 @@
     <div>
       <Icon name="vue" />
     </div>
+
+    <!-- DELETE ME -->
+    <figure style="border-radius: 8px; margin: 12vh auto; width: 480px; background: #fafafa; box-shadow: 0 3px 6px rgba(0,0,0,.16); padding:45px 35px; box-sizing: border-box; text-align: center;">
+      <!-- eslint-disable vue/max-attributes-per-line, vue/singleline-html-element-content-newline, vue/multiline-html-element-content-newline -->
+      <img src="https://raw.githubusercontent.com/ericfennis/vue-structure/4bff88983d079a288be98b0adcb5cc00e43cecc7/src/assets/images/vue-structure.png" alt="Vue Structure Logo" style="margin-bottom:35px">
+      <figcaption style="display: flex; flex-shrink: 0; flex-grow:2; flex-basis: 80px; flex-direction: column;">
+        <div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
+          <a href="https://ericfennis.gitbook.io/vue-structure/">Vue Structure docs</a>
+          <a href="https://github.com/ericfennis/vue-cli-plugin-structure/">Vue Structure GitHub</a>
+        </div>
+        <div style="display: flex; justify-content: space-between;">
+          <a href="https://cli.vuejs.org/" style="color: #34495E;">Vue CLI docs</a>
+          <a href="https://vuejs.org/v2/guide/" style="color: #34495E;">Vue docs</a>
+          <a href="https://vuex.vuejs.org/guide/" style="color: #34495E;">Vuex docs</a>
+          <a href="https://router.vuejs.org/" style="color: #34495E;">Vue Router docs</a>
+        </div>
+      </figcaption>
+    </figure>
+    <!-- ^^^^^^^ -->
+
   </div>
 </template>

generator/template/src/components/index.js

@@ -1,8 +1,2 @@
-import Icon from './Icon';
-import ExampleComponent from './ExampleComponent';
-
-/* eslint-disable import/prefer-default-export,import,prettier/prettier */
-export {
-  Icon,
-  ExampleComponent,
-};
+export { default as Icon } from './Icon';
+export { default as ExampleComponent } from './ExampleComponent';

generator/template/src/config/index.js

@@ -0,0 +1,2 @@
+// Import all config files
+import './vue';

generator/template/src/config/config.js → generator/template/src/config/vue.js

@@ -3,3 +3,7 @@ import Vue from 'vue';
 // Vue Config
 Vue.config.productionTip = false;
 Vue.prototype.$filters = Vue.options.filters;
+
+// Vue Plugins
+//
+// Vue.use(MyPlugin);

generator/template/src/directives/index.js

@@ -1,6 +1,2 @@
-import exampleDirective from './example-directive';
-
-/* eslint-disable import/prefer-default-export,import,prettier/prettier */
-export {
-  exampleDirective,
-};
+/* eslint-disable import/prefer-default-export, import, prettier/prettier */
+export { default as exampleDirective } from './exampleDirective';

generator/template/src/filters/index.js

@@ -1,6 +1,2 @@
-import exampleFilter from './example-filter';
-
-/* eslint-disable import/prefer-default-export,import,prettier/prettier */
-export {
-  exampleFilter,
-};
+/* eslint-disable import/prefer-default-export, import, prettier/prettier */
+export { default as exampleFilter } from './exampleFilter';

generator/template/src/main.js

@@ -3,6 +3,9 @@ import App from './App/App.vue';
 import router from './router';
 import store from './store';
 
+// Import config files
+import './config';
+
 // Import SCSS and Globals
 import './assets/styles/main.scss';
 import './components/_globals';

generator/template/src/mixins/index.js

@@ -1,6 +1,2 @@
-import exampleMixin from './example-mixin';
-
-/* eslint-disable import/prefer-default-export,import,prettier/prettier */
-export {
-  exampleMixin,
-};
+/* eslint-disable import/prefer-default-export, import, prettier/prettier */
+export { default as exampleMixin } from './exampleMixin';

generator/template/src/router/router.js

@@ -17,7 +17,7 @@ const router = new Router({
 
 router.beforeEach((to, from, next) => {
   next();
-  document.title = `${to.meta.title} - ${process.env.APP_NAME}`;
+  document.title = `${to.meta.title} - ${process.env.VUE_APP_NAME}`;
   next();
 });
 

generator/template/src/router/routes.js

@@ -2,7 +2,7 @@
 import { 
   Home, 
   NotFound,
-} from '../views';
+} from '@/views';
 
 export default [
   {

generator/template/src/store/modules/index.js

@@ -1,7 +1,6 @@
-// Register here new Store modules
-import app from './app';
-
-/* eslint-disable import/prefer-default-export,import,prettier/prettier */
-export { 
-  app 
-};
+// STORE MODULES IMPORTER
+// Add new modules by adding:
+// + export { default as {MyStoreModule} } from './{MyStoreModule}';
+//
+/* eslint-disable import/prefer-default-export, import, prettier/prettier */
+export { default as app } from './app';

generator/template/src/views/Home/Home.js

@@ -1,4 +1,4 @@
-import { ExampleComponent } from '../../components';
+import { ExampleComponent } from '@/components';
 
 export default {
   name: 'Home',

generator/template/src/views/index.js

@@ -1,8 +1,2 @@
-import Home from './Home';
-import NotFound from './NotFound';
-
-/* eslint-disable import/prefer-default-export,import,prettier/prettier */
-export { 
-  Home, 
-  NotFound 
-};
+export { default as Home } from './Home';
+export { default as NotFound } from './NotFound';

package.json

@@ -3,7 +3,7 @@
   "description": "Vue Structure Cli Plugin for rendering project structure",
   "author": "Eric Fennis <ericfennis>",
   "license": "MIT",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "main": "index.js",
   "repository": {
     "type": "git",