chore: merge branch 'dev' into next-minor

Author: haoqunjiang

packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue

@@ -96,7 +96,7 @@ export default {
       .title
         color lighten($vue-ui-color-dark, 60%)
         font-size 20px
-        font-weight lighter
+        font-weight 300
         text-align center
         margin-bottom $padding-item
 
@@ -108,7 +108,7 @@ export default {
       .info-block
         v-box()
         box-center()
-        font-weight lighter
+        font-weight 300
         text-align center
 
         .label

packages/@vue/cli-ui-addon-widgets/src/components/Welcome.vue

@@ -69,7 +69,7 @@ export default {
 
 .title
   font-size 32px
-  font-weight lighter
+  font-weight 300
   text-align center
   margin-bottom ($padding-item * 2)
 

packages/@vue/cli-ui/apollo-server/connectors/logs.js

@@ -1,3 +1,14 @@
+/** @typedef {'warn' | 'error' | 'info' | 'done'} LogType */
+
+/**
+ * @typedef Log
+ * @prop {string} id
+ * @prop {string} date
+ * @prop {LogType} type
+ * @prop {string} tag
+ * @prop {string} message
+ */
+
 const shortId = require('shortid')
 const { events } = require('@vue/cli-shared-utils/lib/logger')
 const { generateTitle } = require('@vue/cli/lib/util/clearConsole')
@@ -6,9 +17,15 @@ const channels = require('../channels')
 // Context
 const getContext = require('../context')
 
+/** @type {Log []} */
 let logs = []
 
+/**
+ * @param {Log} log
+ * @param {any} context
+ */
 exports.add = function (log, context) {
+  /** @type {Log} */
   const item = {
     id: shortId.generate(),
     date: new Date().toISOString(),

packages/@vue/cli-ui/apollo-server/connectors/projects.js

@@ -5,7 +5,7 @@ const Creator = require('@vue/cli/lib/Creator')
 const { getPromptModules } = require('@vue/cli/lib/util/createTools')
 const { getFeatures } = require('@vue/cli/lib/util/features')
 const { defaults } = require('@vue/cli/lib/options')
-const { toShortPluginId, clearModule } = require('@vue/cli-shared-utils')
+const { toShortPluginId, execa } = require('@vue/cli-shared-utils')
 const { progress: installProgress } = require('@vue/cli/lib/util/installDeps')
 const parseGitConfig = require('parse-git-config')
 // Connectors
@@ -15,6 +15,7 @@ const prompts = require('./prompts')
 const folders = require('./folders')
 const plugins = require('./plugins')
 const locales = require('./locales')
+const logs = require('./logs')
 // Context
 const getContext = require('../context')
 // Utils
@@ -258,52 +259,23 @@ async function create (input, context) {
 
     const targetDir = path.join(cwd.get(), input.folder)
 
-    // Delete existing folder
-    if (fs.existsSync(targetDir)) {
-      if (input.force) {
-        setProgress({
-          info: 'Cleaning folder...'
-        })
-        await folders.delete(targetDir)
-        setProgress({
-          info: null
-        })
-      } else {
-        throw new Error(`Folder ${targetDir} already exists`)
-      }
-    }
-
     cwd.set(targetDir, context)
     creator.context = targetDir
 
-    process.env.VUE_CLI_CONTEXT = targetDir
-    clearModule('@vue/cli-service/webpack.config.js', targetDir)
-
     const inCurrent = input.folder === '.'
-    const name = inCurrent ? path.relative('../', process.cwd()) : input.folder
-    creator.name = name.toLowerCase()
+    const name = creator.name = (inCurrent ? path.relative('../', process.cwd()) : input.folder).toLowerCase()
 
     // Answers
     const answers = prompts.getAnswers()
     await prompts.reset()
-    let index
 
     // Config files
+    let index
     if ((index = answers.features.indexOf('use-config-files')) !== -1) {
       answers.features.splice(index, 1)
       answers.useConfigFiles = 'files'
     }
 
-    const createOptions = {
-      packageManager: input.packageManager
-    }
-    // Git
-    if (input.enableGit && input.gitCommitMessage) {
-      createOptions.git = input.gitCommitMessage
-    } else {
-      createOptions.git = input.enableGit
-    }
-
     // Preset
     answers.preset = input.preset
     if (input.save) {
@@ -329,7 +301,49 @@ async function create (input, context) {
     })
 
     // Create
-    await creator.create(createOptions, preset)
+    const args = [
+      '--skipGetStarted'
+    ]
+    if (input.packageManager) args.push('--packageManager', input.packageManager)
+    if (input.bar) args.push('--bare')
+    if (input.force) args.push('--force')
+    // Git
+    if (input.enableGit && input.gitCommitMessage) {
+      args.push('--git', input.gitCommitMessage)
+    } else if (!input.enableGit) {
+      args.push('--no-git')
+    }
+    // Preset
+    args.push('--inlinePreset', JSON.stringify(preset))
+
+    log('create', name, args)
+
+    const child = execa('vue', [
+      'create',
+      name,
+      ...args
+    ], {
+      cwd: cwd.get(),
+      stdio: ['inherit', 'pipe', 'inherit']
+    })
+
+    const onData = buffer => {
+      const text = buffer.toString().trim()
+      if (text) {
+        setProgress({
+          info: text
+        })
+        logs.add({
+          type: 'info',
+          message: text
+        }, context)
+      }
+    }
+
+    child.stdout.on('data', onData)
+
+    await child
+
     removeCreator()
 
     notify({

packages/@vue/cli-ui/apollo-server/schema/project.js

@@ -44,6 +44,7 @@ enum ProjectType {
 input ProjectCreateInput {
   folder: String!
   force: Boolean!
+  bare: Boolean!
   packageManager: PackageManager
   preset: String!
   remote: String

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

@@ -280,6 +280,7 @@
                 "options": {
                   "label": "Additional options",
                   "force": "Overwrite target folder if it exists",
+                  "bare": "Scaffold project without beginner instructions",
                   "git-title": "Git repository",
                   "git": "Initialize git repository (recommended)",
                   "git-commit-message": "Initial commit message (optional)"

packages/@vue/cli-ui/package.json

@@ -66,7 +66,7 @@
     "@vue/cli-plugin-eslint": "^3.5.1",
     "@vue/cli-service": "^3.5.3",
     "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/ui": "^0.5.5",
+    "@vue/ui": "^0.8.2",
     "ansi_up": "^3.0.0",
     "cross-env": "^5.1.5",
     "eslint": "^5.8.0",

packages/@vue/cli-ui/src/components/app/ProgressScreen.vue

@@ -32,9 +32,11 @@
             </div>
 
             <div class="secondary-info">
-              <div v-if="progress.info" class="info">
-                {{ progress.info }}
-              </div>
+              <div
+                v-if="progress.info"
+                class="info"
+                v-html="ansiColors(progress.info)"
+              />
 
               <VueLoadingBar
                 v-if="progress.progress !== -1"

packages/@vue/cli-ui/src/components/app/ProjectQuickDropdown.vue

@@ -13,7 +13,7 @@
         :value="projectCurrent.favorite"
         :icon="projectCurrent.favorite ? 'star' : 'star_border'"
         class="extend-left"
-        @input="toggleCurrentFavorite()"
+        @update="toggleCurrentFavorite()"
       >
         {{ $t('org.vue.components.project-select-list-item.tooltips.favorite') }}
       </VueSwitch>

packages/@vue/cli-ui/src/components/app/TopBar.vue

@@ -31,5 +31,5 @@
 
 .title
   font-size 28px
-  font-weight lighter
+  font-weight 300
 </style>

packages/@vue/cli-ui/src/components/content/StepWizard.vue

@@ -112,7 +112,7 @@ export default {
     padding $padding-item
     font-size 24px
     text-align center
-    font-weight lighter
+    font-weight 300
 
   &.hide-tabs
     >>> .tabs

packages/@vue/cli-ui/src/components/project-create/ProjectCreate.vue

@@ -108,6 +108,13 @@
                   >
                     {{ $t('org.vue.views.project-create.tabs.details.form.options.force') }}
                   </VueSwitch>
+
+                  <VueSwitch
+                    v-model="formData.bare"
+                    class="extend-left bare"
+                  >
+                    {{ $t('org.vue.views.project-create.tabs.details.form.options.bare') }}
+                  </VueSwitch>
                 </VueFormField>
 
                 <VueFormField
@@ -466,6 +473,7 @@ function formDataFactory () {
   return {
     folder: '',
     force: false,
+    bare: false,
     enableGit: true,
     gitCommitMessage: '',
     packageManager: undefined,
@@ -629,6 +637,7 @@ export default {
             input: {
               folder: this.formData.folder,
               force: this.formData.force,
+              bare: this.formData.bare,
               enableGit: this.formData.enableGit,
               gitCommitMessage: this.formData.gitCommitMessage,
               packageManager: this.formData.packageManager,

packages/@vue/cli-ui/src/components/prompt/PromptCheckbox.vue

@@ -16,7 +16,7 @@
         :value="isCheckboxSelected(choice)"
         :disabled="choice.disabled"
         class="right"
-        @input="value => asnwerCheckbox(choice, value)"
+        @update="value => asnwerCheckbox(choice, value)"
       >
         {{ $t(choice.name) }}
       </VueSwitch>

packages/@vue/cli-ui/src/components/prompt/PromptColor.vue

@@ -16,7 +16,7 @@
         <VueInput
           slot="trigger"
           :value="value(prompt.value)"
-          @input="value => answer(value)"
+          @update="value => answer(value)"
         >
           <div slot="right" class="color-preview">
             <div class="color-swatch" :style="{

packages/@vue/cli-ui/src/components/prompt/PromptConfirm.vue

@@ -6,7 +6,7 @@
     <VueSwitch
       :value="value(prompt.value)"
       class="extend-left"
-      @input="value => answer(value)"
+      @update="value => answer(value)"
     >
       <ListItemInfo
         :name="$t(prompt.message)"

packages/@vue/cli-ui/src/components/prompt/PromptInput.vue

@@ -14,7 +14,7 @@
         <VueInput
           :value="value(prompt.value)"
           :type="prompt.type === 'password' ? 'password' : 'text'"
-          @input="value => answer(value)"
+          @update="value => answer(value)"
         />
       </div>
     </div>

packages/@vue/cli-ui/src/components/prompt/PromptList.vue

@@ -13,7 +13,7 @@
       <div class="prompt-input">
         <VueSelect
           :value="value(prompt.value)"
-          @input="value => answer(value)"
+          @update="value => answer(value)"
         >
           <VueSelectButton
             v-for="(choice, index) of prompt.choices"

packages/@vue/cli-ui/src/components/prompt/PromptsList.vue

@@ -79,7 +79,7 @@ export default {
 .group-name
   padding $padding-item $padding-item ($padding-item / 2)
   font-size 1.6em
-  font-weight lighter
+  font-weight 300
   color $vue-ui-color-accent
   .vue-ui-dark-mode &
     color lighten($vue-ui-color-accent, 60%)

packages/@vue/cli-ui/src/i18n.js

@@ -54,7 +54,7 @@ async function autoDetect () {
       name: 'VueTimeago',
       locale: i18n.locale,
       locales: {
-        [i18n.locale]: require(`date-fns/locale/${dateFnsLocale}`)
+        [i18n.locale]: require(`date-fns/locale/${dateFnsLocale}/index.js`)
       }
     }))
   }

packages/@vue/cli/bin/vue.js

@@ -63,6 +63,7 @@ program
   .option('-c, --clone', 'Use git clone when fetching remote preset')
   .option('-x, --proxy', 'Use specified proxy when creating project')
   .option('-b, --bare', 'Scaffold project without beginner instructions')
+  .option('--skipGetStarted', 'Skip displaying "Get started" instructions')
   .action((name, cmd) => {
     const options = cleanArgs(cmd)
 

packages/@vue/cli/lib/Creator.js

@@ -210,11 +210,13 @@ module.exports = class Creator extends EventEmitter {
     stopSpinner()
     log()
     log(`🎉  Successfully created project ${chalk.yellow(name)}.`)
-    log(
-      `👉  Get started with the following commands:\n\n` +
-      (this.context === process.cwd() ? `` : chalk.cyan(` ${chalk.gray('$')} cd ${name}\n`)) +
-      chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn serve' : 'npm run serve'}`)
-    )
+    if (!cliOptions.skipGetStarted) {
+      log(
+        `👉  Get started with the following commands:\n\n` +
+        (this.context === process.cwd() ? `` : chalk.cyan(` ${chalk.gray('$')} cd ${name}\n`)) +
+        chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn serve' : 'npm run serve'}`)
+      )
+    }
     log()
     this.emit('creation', { event: 'done' })