create-vue 2.1.0-beta → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vue",
-  "version": "2.1.0-beta",
+  "version": "2.2.0",
   "description": "An easy way to start a Vue project",
   "type": "module",
   "bin": {
@@ -25,11 +25,14 @@
   },
   "homepage": "https://github.com/vuejs/create-vue#readme",
   "devDependencies": {
-    "esbuild": "^0.14.48",
+    "@types/eslint": "^8.4.5",
+    "@types/prompts": "^2.0.14",
+    "@vue/tsconfig": "^0.1.3",
+    "esbuild": "^0.14.49",
     "esbuild-plugin-license": "^1.2.2",
     "husky": "^8.0.1",
     "kolorist": "^1.5.1",
-    "lint-staged": "^12.5.0",
+    "lint-staged": "^13.0.3",
     "minimist": "^1.2.6",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",

package/template/base/.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["johnsoncodehk.volar"]
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
 }

package/template/base/node_modules/.bin/terser

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/terser@5.14.2/node_modules/terser/bin/terser" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/terser@5.14.2/node_modules/terser/bin/terser" "$@"
+fi

package/template/base/node_modules/.bin/vite

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@3.0.2_terser@5.14.2/node_modules/vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/vite@3.0.2_terser@5.14.2/node_modules/vite/bin/vite.js" "$@"
+fi

package/template/base/package.json

@@ -2,14 +2,15 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 5050"
+    "preview": "vite preview --port 4173"
   },
   "dependencies": {
-    "vue": "^2.7.0-0"
+    "vue": "^2.7.7"
   },
   "devDependencies": {
-    "@vitejs/plugin-legacy": "^1.7.1",
-    "@vitejs/plugin-vue2": "^1.1.1",
-    "vite": "^2.8.4"
+    "@vitejs/plugin-legacy": "^2.0.0",
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "terser": "^5.14.2",
+    "vite": "^3.0.2"
   }
 }

package/template/base/src/assets/main.css

@@ -0,0 +1,35 @@
+@import "./base.css";
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

package/template/base/vite.config.js

@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import legacy from '@vitejs/plugin-legacy'

package/template/code/default/src/App.vue

@@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue'
   </div>
 </template>
 
-<style>
-@import './assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
+<style scoped>
 header {
   line-height: 1.5;
 }
@@ -39,45 +29,21 @@ header {
   margin: 0 auto 2rem;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 }
 </style>

package/template/code/router/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import HelloWorld from '@/components/HelloWorld.vue'
+import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
@@ -21,17 +21,7 @@ import HelloWorld from '@/components/HelloWorld.vue'
   </div>
 </template>
 
-<style>
-@import '@/assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
+<style scoped>
 header {
   line-height: 1.5;
   max-height: 100vh;
@@ -42,19 +32,6 @@ header {
   margin: 0 auto 2rem;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 nav {
   width: 100%;
   font-size: 12px;
@@ -81,33 +58,22 @@ nav a:first-of-type {
 }
 
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
   nav {
     text-align: left;
     margin-left: -1rem;

package/template/code/typescript-default/src/App.vue

@@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue'
   </div>
 </template>
 
-<style>
-@import './assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
+<style scoped>
 header {
   line-height: 1.5;
 }
@@ -39,45 +29,21 @@ header {
   margin: 0 auto 2rem;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 }
 </style>

package/template/code/typescript-router/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HelloWorld from '@/components/HelloWorld.vue'
+import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
@@ -21,17 +21,7 @@ import HelloWorld from '@/components/HelloWorld.vue'
   </div>
 </template>
 
-<style>
-@import '@/assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
+<style scoped>
 header {
   line-height: 1.5;
   max-height: 100vh;
@@ -42,19 +32,6 @@ header {
   margin: 0 auto 2rem;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 nav {
   width: 100%;
   font-size: 12px;
@@ -81,33 +58,22 @@ nav a:first-of-type {
 }
 
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
   nav {
     text-align: left;
     margin-left: -1rem;

package/template/config/cypress/cypress/{jsconfig.json → e2e/jsconfig.json}

@@ -4,5 +4,5 @@
     "lib": ["es5", "dom"],
     "types": ["cypress"]
   },
-  "include": ["./**/*"]
+  "include": ["./**/*", "../support/**/*"]
 }

package/template/config/cypress/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/template/config/cypress/cypress.config.js

@@ -0,0 +1,8 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  }
+})

package/template/config/cypress/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  }
+})

package/template/config/cypress/node_modules/.bin/cypress

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@10.3.0/node_modules/cypress/bin/cypress" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@10.3.0/node_modules/cypress/bin/cypress" "$@"
+fi

package/template/config/cypress/node_modules/.bin/server-test

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/start-server-and-test@1.14.0/node_modules/start-server-and-test/src/bin/start.js" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/start-server-and-test@1.14.0/node_modules/start-server-and-test/src/bin/start.js" "$@"
+fi

package/template/config/cypress/node_modules/.bin/start-server-and-test

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/start-server-and-test@1.14.0/node_modules/start-server-and-test/src/bin/start.js" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/start-server-and-test@1.14.0/node_modules/start-server-and-test/src/bin/start.js" "$@"
+fi

package/template/config/cypress/node_modules/.bin/start-test

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/vue-2-scaffolder/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/start-server-and-test@1.14.0/node_modules/start-server-and-test/src/bin/start.js" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/start-server-and-test@1.14.0/node_modules/start-server-and-test/src/bin/start.js" "$@"
+fi

package/template/config/cypress/package.json

@@ -1,15 +1,10 @@
 {
   "scripts": {
-    "test:unit": "cypress open-ct",
-    "test:unit:ci": "cypress run-ct --quiet --reporter spec",
-    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
-    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'"
+    "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
+    "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^2.2.2",
-    "@cypress/vue": "^2.2.4",
-    "cypress": "^9.5.0",
-    "start-server-and-test": "^1.14.0",
-    "vue-template-compiler": "^2.7.0-0"
+    "cypress": "^10.3.0",
+    "start-server-and-test": "^1.14.0"
   }
 }

package/template/config/cypress-ct/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/template/config/cypress-ct/cypress/support/component.js

@@ -0,0 +1,30 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+// Import global styles
+import '@/assets/main.css'
+
+import { mount } from 'cypress/vue2'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)