feature: Initial plugin examples and slides from the VueDC presentation on October 17, 2018

Author: cguirreri-politico

README.md

@@ -1,2 +1,20 @@
-# vue-cli-3-walkthrough
-A walkthrough of Vue CLI 3's feature set with a focus on Plugin Development
+# Vue CLI 3 Walkthrough
+
+## About
+
+**Created:** October 17, 2018
+
+**Speaker:** Christian Guirreri ([@politicochris](https://twitter.com/politicochris))
+
+## Resources
+
+* Recording - 2018.10.17 - Coming Soon
+* [Slides - 2018.10.17](https://github.com/VueDC/vue-cli-3-walkthrough/blob/master/slides/2018-10-17-vue-cli-3-walkthrough.pdf)
+* [Vue CLI 3 Plugin Development Guide](https://cli.vuejs.org/dev-guide/plugin-dev.html)
+
+## To Do
+
+* [ ] Show an example of updating (rather than replacing) [Generator templates](https://cli.vuejs.org/dev-guide/plugin-dev.html#generator-templating) with yaml
+* [ ] Show an example of webpack modification with the [Service Plugin](https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin)
+* [ ] Show an example of [modifying built-in plugins via promts](https://cli.vuejs.org/dev-guide/plugin-dev.html#prompts)
+* [ ] Show more detail about each of the undocumented options and functions available in the [PluginAPI](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/PluginAPI.js), the [GeneratorAPI](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli/lib/GeneratorAPI.js), [PromptModuleAPI](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli/lib/PromptModuleAPI.js) and [Inquirer.js](https://github.com/SBoudrias/Inquirer.js)

examples/vue-cli-plugin-vuedc-init/generator.js

@@ -0,0 +1,53 @@
+module.exports = (api, options, rootOptions) => {
+	// Generator
+	// This file will execute...
+	//	1) If the plugin is included in the preset
+	//	2) During the invoke command, after the plugin is installed
+	// Docs: https://cli.vuejs.org/dev-guide/plugin-dev.html#generator
+	// Creator Class: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli/lib/Creator.js
+	// Generator API Code: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli/lib/GeneratorAPI.js
+	
+	// Arguments:
+	// api: Generator API
+	// options: Generator options for this plugin, or options from the preset
+	// rootOptions: The preset used to create the project
+
+	// Modify an eslint rule based on an inputted option. Default is false.
+	const eslintConfig = {
+		rules: {}
+	}
+	if (options.forceComponentOrder) {
+		eslintConfig.rules['vue/order-in-components'] = 'error'
+	} else {
+		eslintConfig.rules['vue/order-in-components'] = 'never'
+	}
+
+	// Modify package.json fields
+	api.extendPackage({
+		dependencies: {
+    		axios: "^0.18.0"
+		},
+		eslintConfig
+	});
+
+	api.onCreateComplete(() => {
+		// Delete a file
+		// TODO: Delete a folder if it's empty
+		// const fs = require('fs');
+		// const filename = api.resolve('HelloVueDC.vue');
+		// const fileExists = fs.existsSync(filename);
+		// if (fileExists) {
+		// 	fs.unlink(filename, function(error) {
+		// 		if (error) {
+		// 			throw error;
+		// 		}
+		// 		console.log('Deleted filename', filename);
+		// 	});
+		// }
+	})
+
+	// Copy and render all files in ./template with ejs
+	api.render("./template", {
+		...options,
+	});
+};

examples/vue-cli-plugin-vuedc-init/index.js

@@ -0,0 +1,24 @@
+module.exports = (api, projectOptions) => {
+	// Service
+	// This file will execute...
+	//	1) Anytime when vue-cli-service is started
+	// Docs: https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin
+	// Service Class: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/Service.js
+	// Plugin API Code: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/PluginAPI.js
+	
+	// Arguments:
+	// api: Plugin API
+	// projectOptions: vue.config.js or the "vue" field in package.json
+
+	api.chainWebpack(webpackConfig => {
+		// modify webpack config with webpack-chain
+	});
+
+	api.configureWebpack(webpackConfig => {
+		// modify webpack config or return object to be merged with webpack-merge
+	});
+
+	api.registerCommand("build", args => {
+		// do something when running `vue-cli-service build`
+	});
+};

examples/vue-cli-plugin-vuedc-init/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "vue-cli-plugin-vuedc-init",
+  "version": "0.9.9-alpha.1",
+  "description": "Vue CLI 3 Plugin for a VueDC Presentation",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Christian Guirreri",
+  "license": "ISC"
+}

examples/vue-cli-plugin-vuedc-init/preset.json

@@ -0,0 +1,11 @@
+{
+	"useConfigFiles": true,
+	"plugins": {
+		"@vue/cli-plugin-babel": {},
+		"@vue/cli-plugin-eslint": {
+			"config": "standard",
+			"lintOn": ["save"]
+		}
+	},
+	"cssPreprocessor": "sass"
+}

examples/vue-cli-plugin-vuedc-init/prompts.js

@@ -0,0 +1,8 @@
+module.exports = [
+	{
+		name: `forceComponentOrder`,
+		type: "confirm",
+		message: "WHen linting, do you want to force the order of properties in components?",
+		default: false
+	}
+];

examples/vue-cli-plugin-vuedc-init/template/src/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <HelloVueDC title="Hello VueDC!"/>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+import HelloVueDC from './components/HelloVueDC.vue'
+
+export default {
+  name: 'app',
+  components: {
+    HelloWorld,
+    HelloVueDC
+  }
+}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

examples/vue-cli-plugin-vuedc-init/template/src/components/HelloVueDC.vue

@@ -0,0 +1,19 @@
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+  name: 'HelloVueDC',
+  props: {
+    title: ''
+  }
+}
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+
+<style lang="sass" scoped>
+</style>