create-vue 3.0.0-beta.1 → 3.0.0-beta.10

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "create-vue",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.10",
   "description": "An easy way to start a Vue project",
   "type": "module",
-  "main": "index.js",
   "bin": {
-    "create-vue": "index.js"
+    "create-vue": "outfile.cjs"
   },
   "files": [
-    "index.js",
-    "utils",
+    "outfile.cjs",
     "template"
   ],
   "engines": {
-    "node": "^12.13.0 || ^14.0.0 || >= 16.0.0"
+    "node": "^14.13.1 || >=16.0.0"
   },
   "scripts": {
     "prepare": "husky install",
     "format": "prettier --write .",
-    "pretest": "node snapshot.js",
+    "build": "esbuild --bundle index.js --format=cjs --platform=node --outfile=outfile.cjs",
+    "snapshot": "node snapshot.js",
+    "pretest": "run-s build snapshot",
     "test": "node test.js",
-    "prepublishOnly": "node snapshot.js"
+    "prepublishOnly": "run-s build snapshot"
   },
   "repository": {
     "type": "git",
@@ -33,15 +33,15 @@
     "url": "https://github.com/vuejs/create-vue/issues"
   },
   "homepage": "https://github.com/vuejs/create-vue#readme",
-  "dependencies": {
+  "devDependencies": {
+    "esbuild": "^0.13.15",
+    "husky": "^7.0.4",
     "kolorist": "^1.5.0",
+    "lint-staged": "^12.1.2",
     "minimist": "^1.2.5",
-    "prompts": "^2.4.1"
-  },
-  "devDependencies": {
-    "husky": "^7.0.1",
-    "lint-staged": "^11.1.2",
-    "prettier": "^2.3.2"
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.4.1",
+    "prompts": "^2.4.2"
   },
   "lint-staged": {
     "*.{js,ts,vue,json}": [

package/template/base/package.json

@@ -2,15 +2,13 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preserve": "vite build",
-    "serve": "vite preview --port 5050"
+    "preview": "vite preview --port 5050"
   },
   "dependencies": {
-    "vue": "^3.2.2"
+    "vue": "^3.2.22"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.4.0",
-    "@vue/compiler-sfc": "^3.2.2",
-    "vite": "^2.5.0"
+    "@vitejs/plugin-vue": "^1.10.0",
+    "vite": "^2.6.14"
   }
 }

package/template/base/vite.config.js

@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'url'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
@@ -6,7 +8,7 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@/': new URL('./src/', import.meta.url).pathname
+      '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   }
 })

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

@@ -1,6 +1,6 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import Welcome from './components/Welcome.vue'
+import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
@@ -13,7 +13,7 @@ import Welcome from './components/Welcome.vue'
   </header>
 
   <main>
-    <Welcome />
+    <TheWelcome />
   </main>
 </template>
 

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

@@ -9,10 +9,10 @@ import HelloWorld from '@/components/HelloWorld.vue'
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
 
-      <div id="nav">
+      <nav>
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
-      </div>
+      </nav>
     </div>
   </header>
 
@@ -53,28 +53,28 @@ a,
   }
 }
 
-#nav {
+nav {
   width: 100%;
   font-size: 12px;
   text-align: center;
   margin-top: 2rem;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: var(--color-text);
 }
 
-#nav a.router-link-exact-active:hover {
+nav a.router-link-exact-active:hover {
   background-color: transparent;
 }
 
-#nav a {
+nav a {
   display: inline-block;
   padding: 0 1rem;
   border-left: 1px solid var(--color-border);
 }
 
-#nav a:first-of-type {
+nav a:first-of-type {
   border: 0;
 }
 
@@ -106,7 +106,7 @@ a,
     margin: 0 2rem 0 0;
   }
 
-  #nav {
+  nav {
     text-align: left;
     margin-left: -1rem;
     font-size: 1rem;

package/template/code/router/src/router/index.js

@@ -1,25 +1,23 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/Home.vue'
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (About.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import('../views/About.vue')
-  }
-]
+import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue')
+    }
+  ]
 })
 
 export default router

package/template/code/router/src/views/{Home.vue → HomeView.vue}

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Welcome from '@/components/Welcome.vue'
+import TheWelcome from '@/components/TheWelcome.vue'
 </script>
 
 <template>
   <main>
-    <Welcome />
+    <TheWelcome />
   </main>
 </template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
-import Welcome from './components/Welcome.vue'
+import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
@@ -13,7 +13,7 @@ import Welcome from './components/Welcome.vue'
   </header>
 
   <main>
-    <Welcome />
+    <TheWelcome />
   </main>
 </template>
 

package/template/code/typescript-default/src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  msg: String
+  msg: string
 }>()
 </script>
 

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

@@ -9,10 +9,10 @@ import HelloWorld from '@/components/HelloWorld.vue'
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
 
-      <div id="nav">
+      <nav>
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
-      </div>
+      </nav>
     </div>
   </header>
 
@@ -53,28 +53,28 @@ a,
   }
 }
 
-#nav {
+nav {
   width: 100%;
   font-size: 12px;
   text-align: center;
   margin-top: 2rem;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: var(--color-text);
 }
 
-#nav a.router-link-exact-active:hover {
+nav a.router-link-exact-active:hover {
   background-color: transparent;
 }
 
-#nav a {
+nav a {
   display: inline-block;
   padding: 0 1rem;
   border-left: 1px solid var(--color-border);
 }
 
-#nav a:first-of-type {
+nav a:first-of-type {
   border: 0;
 }
 
@@ -106,7 +106,7 @@ a,
     margin: 0 2rem 0 0;
   }
 
-  #nav {
+  nav {
     text-align: left;
     margin-left: -1rem;
     font-size: 1rem;

package/template/code/typescript-router/src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  msg: String
+  msg: string
 }>()
 </script>
 

package/template/code/typescript-router/src/router/index.ts

@@ -1,27 +1,23 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import type { RouteRecordRaw } from 'vue-router'
-
-import Home from '../views/Home.vue'
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (About.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import('../views/About.vue')
-  }
-]
+import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue')
+    }
+  ]
 })
 
 export default router

package/template/code/typescript-router/src/views/{Home.vue → HomeView.vue}

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Welcome from '@/components/Welcome.vue'
+import TheWelcome from '@/components/TheWelcome.vue'
 </script>
 
 <template>
   <main>
-    <Welcome />
+    <TheWelcome />
   </main>
 </template>

package/template/config/cypress/package.json

@@ -2,13 +2,13 @@
   "scripts": {
     "test:unit": "cypress open-ct",
     "test:unit:ci": "cypress run-ct --quiet --reporter spec",
-    "test:e2e": "start-server-and-test serve 5050 'cypress open'",
-    "test:e2e:ci": "start-server-and-test serve 5050 'cypress run'"
+    "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'"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^2.0.7",
-    "@cypress/vue": "^3.0.3",
-    "cypress": "^8.2.0",
-    "start-server-and-test": "^1.13.1"
+    "@cypress/vite-dev-server": "^2.2.1",
+    "@cypress/vue": "^3.0.5",
+    "cypress": "^9.1.0",
+    "start-server-and-test": "^1.14.0"
   }
 }

package/template/config/jsx/package.json

@@ -1,5 +1,5 @@
 {
   "devDependencies": {
-    "@vitejs/plugin-vue-jsx": "^1.1.7"
+    "@vitejs/plugin-vue-jsx": "^1.3.0"
   }
 }

package/template/config/jsx/vite.config.js

@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'url'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
@@ -7,7 +9,7 @@ export default defineConfig({
   plugins: [vue(), vueJsx()],
   resolve: {
     alias: {
-      '@/': new URL('./src/', import.meta.url).pathname
+      '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   }
 })

package/template/config/pinia/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "pinia": "^2.0.4"
+  }
+}

package/template/config/pinia/src/stores/counter.js

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore({
+  id: 'counter',
+  state: () => ({
+    counter: 0
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2
+  },
+  actions: {
+    increment() {
+      this.counter++
+    }
+  }
+})

package/template/config/router/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "vue-router": "^4.0.11"
+    "vue-router": "^4.0.12"
   }
 }

package/template/config/typescript/package.json

@@ -4,7 +4,8 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "typescript": "~4.3.5",
-    "vue-tsc": "^0.2.3"
+    "@types/node": "^16.11.10",
+    "typescript": "~4.4.4",
+    "vue-tsc": "^0.29.6"
   }
 }

package/template/config/typescript/tsconfig.json

@@ -5,6 +5,7 @@
     "useDefineForClassFields": true,
     "module": "esnext",
     "moduleResolution": "node",
+    "isolatedModules": true,
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,

package/template/entry/{vuex → pinia}/src/main.js

@@ -1,9 +1,9 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
-import store from './store'
 
 const app = createApp(App)
 
-app.use(store)
+app.use(createPinia())
 
 app.mount('#app')

package/template/entry/{vuex-and-router → router-and-pinia}/src/main.js

@@ -1,12 +1,12 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import { createPinia } from 'pinia'
 
+import App from './App.vue'
 import router from './router'
-import store from './store'
 
 const app = createApp(App)
 
+app.use(createPinia())
 app.use(router)
-app.use(store)
 
 app.mount('#app')