fix!: keep project name validation rules in sync between UI and CLI (#6443)

Author: haoqunjiang

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

@@ -272,7 +272,7 @@ async function create (input, context) {
     creator.context = targetDir
 
     const inCurrent = input.folder === '.'
-    const name = creator.name = (inCurrent ? path.relative('../', process.cwd()) : input.folder).toLowerCase()
+    const name = creator.name = (inCurrent ? path.relative('../', process.cwd()) : input.folder)
 
     // Answers
     const answers = prompts.getAnswers()

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

@@ -92,6 +92,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^5.0.0",
     "subscriptions-transport-ws": "^0.9.18",
+    "validate-npm-package-name": "^3.0.0",
     "vue": "^2.6.12",
     "vue-apollo": "^3.0.7",
     "vue-cli-plugin-apollo": "^0.22.2",

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

@@ -55,7 +55,10 @@
                       class="vue-ui-text danger banner"
                     >
                       <VueIcon icon="error" class="big"/>
-                      <span>{{ $t('org.vue.views.project-create.tabs.details.form.folder.folder-name-invalid') }}</span>
+                      <span>
+                        {{ $t('org.vue.views.project-create.tabs.details.form.folder.folder-name-invalid') }}:
+                        {{ folderNameValidationMessage }}
+                      </span>
                     </div>
 
                     <ApolloQuery
@@ -463,7 +466,7 @@
 
 <script>
 import Prompts from '@/mixins/Prompts'
-import { isValidName } from '@/util/folders'
+import validateNpmPackageName from 'validate-npm-package-name'
 import debounce from 'lodash.debounce'
 
 import CWD from '@/graphql/cwd/cwd.gql'
@@ -534,8 +537,21 @@ export default {
   },
 
   computed: {
+    folderNameValidationResult () {
+      return validateNpmPackageName(this.formData.folder)
+    },
+
     folderNameValid () {
-      return isValidName(this.formData.folder)
+      return this.folderNameValidationResult.validForNewPackages
+    },
+
+    folderNameValidationMessage () {
+      const messages = [
+        ...(this.folderNameValidationResult.errors || []),
+        ...(this.folderNameValidationResult.warnings || [])
+      ]
+
+      return messages[0]
     },
 
     detailsValid () {