feat(ui): vue-cli config

packages/@vue/cli-ui/locales/en.json

@@ -443,6 +443,56 @@
         "mode": "Specify env mode",
         "verbose": "Show full function definitions in output"
       }
+    },
+    "config": {
+      "vue-cli": {
+        "description": "Configure your Vue project",
+        "groups": {
+          "general": "General settings",
+          "css": "CSS settings"
+        },
+        "baseUrl": {
+          "label": "Base URL",
+          "description": "The base URL your application will be deployed at, for example '/my-app/'. Use an empty string ('') so that all assets are linked using relative paths."
+        },
+        "outputDir": {
+          "label": "Output directory",
+          "description": "The directory where the production build files will be generated"
+        },
+        "assetsDir": {
+          "label": "Assets directory",
+          "description": "A directory to nest generated static assets (js, css, img, fonts) under."
+        },
+        "runtimeCompiler": {
+          "label": "Enable runtime compiler",
+          "description": "This will allow you to use the template option in Vue components, but will incur around an extra 10kb payload for your app."
+        },
+        "productionSourceMap": {
+          "label": "Enable Production Source Maps",
+          "description": "Disabling this can speed up production builds if you don't need source maps for production"
+        },
+        "parallel": {
+          "label": "Parallel compilation",
+          "description": "Whether to use multiple processors to compile Babel or Typescript."
+        },
+        "css": {
+          "modules": {
+            "label": "Enable CSS Modules",
+            "description": "By default, only files that ends in *.module.[ext] are treated as CSS modules. Enabling this will treat all style files as CSS modules."
+          },
+          "extract": {
+            "label": "Extract CSS",
+            "description": "Whether to extract CSS in your components into a standalone CSS files (instead of inlined in JavaScript and injected dynamically)."
+          },
+          "sourceMap": {
+            "label": "Enable CSS Source Maps",
+            "description": "Whether to enable source maps for CSS. Enabling this may affect build performance."
+          }
+        }
+      }
+    },
+    "suggestions": {
+      "vue-config-open": "Open vue config"
     }
   },
   "eslint": {

packages/@vue/cli-ui/ui-defaults/config.js

@@ -0,0 +1,116 @@
+module.exports = api => {
+  api.describeConfig({
+    id: 'vue-cli',
+    name: 'Vue CLI',
+    description: 'vue-webpack.config.vue-cli.description',
+    link: 'https://cli.vuejs.org/config/',
+    files: {
+      vue: {
+        js: ['vue.config.js']
+      }
+    },
+    icon: '/public/vue-cli.png',
+    onRead: ({ data }) => ({
+      prompts: [
+        {
+          name: 'baseUrl',
+          type: 'input',
+          default: '/',
+          value: data.vue && data.vue.baseUrl,
+          message: 'vue-webpack.config.vue-cli.baseUrl.label',
+          description: 'vue-webpack.config.vue-cli.baseUrl.description',
+          group: 'vue-webpack.config.vue-cli.groups.general',
+          link: 'https://cli.vuejs.org/config/#baseurl'
+        },
+        {
+          name: 'outputDir',
+          type: 'input',
+          default: 'dist',
+          value: data.vue && data.vue.outputDir,
+          validate: input => !!input,
+          message: 'vue-webpack.config.vue-cli.outputDir.label',
+          description: 'vue-webpack.config.vue-cli.outputDir.description',
+          group: 'vue-webpack.config.vue-cli.groups.general',
+          link: 'https://cli.vuejs.org/config/#outputdir'
+        },
+        {
+          name: 'assetsDir',
+          type: 'input',
+          default: '',
+          value: data.vue && data.vue.assetsDir,
+          message: 'vue-webpack.config.vue-cli.assetsDir.label',
+          description: 'vue-webpack.config.vue-cli.assetsDir.description',
+          group: 'vue-webpack.config.vue-cli.groups.general',
+          link: 'https://cli.vuejs.org/config/#assetsdir'
+        },
+        {
+          name: 'runtimeCompiler',
+          type: 'confirm',
+          default: false,
+          value: data.vue && data.vue.runtimeCompiler,
+          message: 'vue-webpack.config.vue-cli.runtimeCompiler.label',
+          description: 'vue-webpack.config.vue-cli.runtimeCompiler.description',
+          group: 'vue-webpack.config.vue-cli.groups.general',
+          link: 'https://cli.vuejs.org/config/#runtimecompiler'
+        },
+        {
+          name: 'productionSourceMap',
+          type: 'confirm',
+          default: true,
+          value: data.vue && data.vue.productionSourceMap,
+          message: 'vue-webpack.config.vue-cli.productionSourceMap.label',
+          description: 'vue-webpack.config.vue-cli.productionSourceMap.description',
+          group: 'vue-webpack.config.vue-cli.groups.general',
+          link: 'https://cli.vuejs.org/config/#productionsourcemap'
+        },
+        {
+          name: 'parallel',
+          type: 'confirm',
+          default: require('os').cpus().length > 1,
+          value: data.vue && data.vue.parallel,
+          message: 'vue-webpack.config.vue-cli.parallel.label',
+          description: 'vue-webpack.config.vue-cli.parallel.description',
+          group: 'vue-webpack.config.vue-cli.groups.general',
+          link: 'https://cli.vuejs.org/config/#parallel'
+        },
+        {
+          name: 'css.modules',
+          type: 'confirm',
+          default: false,
+          value: data.vue && data.vue.css && data.vue.css.modules,
+          message: 'vue-webpack.config.vue-cli.css.modules.label',
+          description: 'vue-webpack.config.vue-cli.css.modules.description',
+          group: 'vue-webpack.config.vue-cli.groups.css',
+          link: 'https://cli.vuejs.org/config/#css-modules'
+        },
+        {
+          name: 'css.extract',
+          type: 'confirm',
+          default: true,
+          value: data.vue && data.vue.css && data.vue.css.extract,
+          message: 'vue-webpack.config.vue-cli.css.extract.label',
+          description: 'vue-webpack.config.vue-cli.css.extract.description',
+          group: 'vue-webpack.config.vue-cli.groups.css',
+          link: 'https://cli.vuejs.org/config/#css-extract'
+        },
+        {
+          name: 'css.sourceMap',
+          type: 'confirm',
+          default: false,
+          value: data.vue && data.vue.css && data.vue.css.sourceMap,
+          message: 'vue-webpack.config.vue-cli.css.sourceMap.label',
+          description: 'vue-webpack.config.vue-cli.css.sourceMap.description',
+          group: 'vue-webpack.config.vue-cli.groups.css',
+          link: 'https://cli.vuejs.org/config/#css-sourcemap'
+        }
+      ]
+    }),
+    onWrite: async ({ api, prompts }) => {
+      const vueData = {}
+      for (const prompt of prompts) {
+        vueData[prompt.id] = await api.getAnswer(prompt.id)
+      }
+      api.setData('vue', vueData)
+    }
+  })
+}

packages/@vue/cli-ui/ui-defaults/index.js

@@ -1,4 +1,5 @@
 module.exports = api => {
   require('./tasks')(api)
   require('./suggestions')(api)
+  require('./config')(api)
 }

packages/@vue/cli-ui/ui-defaults/suggestions.js

@@ -3,6 +3,7 @@ const invoke = require('@vue/cli/lib/invoke')
 
 const ROUTER = 'vue-router-add'
 const VUEX = 'vuex-add'
+const VUE_CONFIG_OPEN = 'vue-config-open'
 
 module.exports = api => {
   api.onViewOpen(({ view }) => {
@@ -35,6 +36,33 @@ module.exports = api => {
     } else {
       [ROUTER, VUEX].forEach(id => api.removeSuggestion(id))
     }
+
+    if (view.id !== 'vue-project-configurations') {
+      api.removeSuggestion(VUE_CONFIG_OPEN)
+    }
+  })
+
+  api.onConfigRead(({ config }) => {
+    if (config.id === 'vue-cli') {
+      if (config.foundFiles.vue) {
+        api.addSuggestion({
+          id: VUE_CONFIG_OPEN,
+          type: 'action',
+          label: 'vue-webpack.suggestions.vue-config-open',
+          handler () {
+            const file = config.foundFiles.vue.path
+            console.log('open', file)
+            const launch = require('launch-editor')
+            launch(file)
+            return {
+              keep: true
+            }
+          }
+        })
+        return
+      }
+    }
+    api.removeSuggestion(VUE_CONFIG_OPEN)
   })
 }