import prompts from 'prompts'
import { red, green, bold } from 'kolorist'
+import templateList from './utils/templateList.js'
import renderTemplate from './utils/renderTemplate.js'
import {
postOrderDirectoryTraverse,
let targetDir = argv._[0]
const defaultProjectName = !targetDir ? 'vue-project' : targetDir
- const TEMPLATE_LIST = ['default', 'spa']
- .flatMap(x => [x, x + '-ts'])
- .flatMap(x => [x, x + '-with-tests'])
let template = argv.template || argv.t
- const isValidTemplate = TEMPLATE_LIST.includes(template)
+ const isValidTemplate = templateList.includes(template)
let result = {}
"node": "^12.13.0 || ^14.0.0 || >= 16.0.0"
},
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "prepublishOnly": "node snapshot.js"
},
"repository": {
"type": "git",
--- /dev/null
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- /dev/null
+{
+ "baseUrl": "http://localhost:5050",
+ "component": {
+ "componentFolder": "src",
+ "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}"
+ }
+}
--- /dev/null
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- /dev/null
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+ it('visits the app root url', () => {
+ cy.visit('/')
+ cy.contains('h1', 'Hello Vue 3 + TypeScript + Vite')
+ })
+})
--- /dev/null
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { startDevServer } = require('@cypress/vite-dev-server')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+ // `on` is used to hook into various events Cypress emits
+ // `config` is the resolved Cypress config
+ on('dev-server:start', (options) => {
+ return startDevServer({ options })
+ })
+ return config
+}
--- /dev/null
+// ***********************************************
+// This example commands.js 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) => { ... })
--- /dev/null
+// ***********************************************************
+// This example support/index.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')
--- /dev/null
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["es5", "dom"],
+ "types": ["cypress"]
+ },
+ "include": ["./**/*"]
+}
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
--- /dev/null
+{
+ "name": "default-ts-with-tests",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vue-tsc --noEmit && vite build",
+ "preserve": "vite build",
+ "serve": "vite preview --port 5050",
+ "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'",
+ "typecheck": "vue-tsc --noEmit"
+ },
+ "dependencies": {
+ "vue": "^3.1.5"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^1.2.5",
+ "@vitejs/plugin-vue-jsx": "^1.1.6",
+ "@vue/compiler-sfc": "^3.1.5",
+ "vite": "^2.4.3",
+ "@cypress/vite-dev-server": "^2.0.2",
+ "@cypress/vue": "^3.0.1",
+ "cypress": "^8.0.0",
+ "start-server-and-test": "^1.12.6",
+ "typescript": "~4.3.5",
+ "vue-tsc": "^0.2.2"
+ }
+}
\ No newline at end of file
--- /dev/null
+<template>
+ <img alt="Vue logo" src="./assets/logo.png" />
+ <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+</template>
+
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
--- /dev/null
+<template>
+ <h1>{{ msg }}</h1>
+
+ <p>
+ Recommended IDE setup:
+ <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+ +
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+ </p>
+
+ <p>See <code>README.md</code> for more information.</p>
+
+ <p>
+ <a href="https://vitejs.dev/guide/features.html" target="_blank">
+ Vite Docs
+ </a>
+ |
+ <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+ </p>
+
+ <button type="button" @click="count++">count is: {{ count }}</button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test hot module replacement.
+ </p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+ msg: String,
+}>()
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+ color: #42b983;
+}
+
+label {
+ margin: 0 0.5em;
+ font-weight: bold;
+}
+
+code {
+ background-color: #eee;
+ padding: 2px 4px;
+ border-radius: 4px;
+ color: #304455;
+}
+</style>
--- /dev/null
+import { mount } from '@cypress/vue'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+ it('playground', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+ })
+
+ it('renders properly', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+ cy.get('h1').should('contain', 'Hello Cypress')
+ })
+
+ it('adds 1 when clicking the plus button', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+
+ cy.get('button')
+ .should('contain', '0')
+ .click()
+ .should('contain', '1')
+ })
+})
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- /dev/null
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+/// <reference types="vite/client" />
--- /dev/null
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "vite.config.*",
+
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/**"
+ ]
+}
--- /dev/null
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@/': new URL('./src/', import.meta.url).pathname,
+ },
+ }
+})
--- /dev/null
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
--- /dev/null
+{
+ "name": "default-ts",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vue-tsc --noEmit && vite build",
+ "preserve": "vite build",
+ "serve": "vite preview --port 5050",
+ "typecheck": "vue-tsc --noEmit"
+ },
+ "dependencies": {
+ "vue": "^3.1.5"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^1.2.5",
+ "@vitejs/plugin-vue-jsx": "^1.1.6",
+ "@vue/compiler-sfc": "^3.1.5",
+ "vite": "^2.4.3",
+ "typescript": "~4.3.5",
+ "vue-tsc": "^0.2.2"
+ }
+}
\ No newline at end of file
--- /dev/null
+<template>
+ <img alt="Vue logo" src="./assets/logo.png" />
+ <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+</template>
+
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
--- /dev/null
+<template>
+ <h1>{{ msg }}</h1>
+
+ <p>
+ Recommended IDE setup:
+ <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+ +
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+ </p>
+
+ <p>See <code>README.md</code> for more information.</p>
+
+ <p>
+ <a href="https://vitejs.dev/guide/features.html" target="_blank">
+ Vite Docs
+ </a>
+ |
+ <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+ </p>
+
+ <button type="button" @click="count++">count is: {{ count }}</button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test hot module replacement.
+ </p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+ msg: String,
+}>()
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+ color: #42b983;
+}
+
+label {
+ margin: 0 0.5em;
+ font-weight: bold;
+}
+
+code {
+ background-color: #eee;
+ padding: 2px 4px;
+ border-radius: 4px;
+ color: #304455;
+}
+</style>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- /dev/null
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+/// <reference types="vite/client" />
--- /dev/null
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "vite.config.*",
+
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/**"
+ ]
+}
--- /dev/null
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@/': new URL('./src/', import.meta.url).pathname,
+ },
+ }
+})
--- /dev/null
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- /dev/null
+{
+ "baseUrl": "http://localhost:5050",
+ "component": {
+ "componentFolder": "src",
+ "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}"
+ }
+}
--- /dev/null
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- /dev/null
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+ it('visits the app root url', () => {
+ cy.visit('/')
+ cy.contains('h1', 'Hello Vue 3 + Vite')
+ })
+})
--- /dev/null
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["es5", "dom"],
+ "types": ["cypress"]
+ },
+ "include": ["./**/*"]
+}
--- /dev/null
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { startDevServer } = require('@cypress/vite-dev-server')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+ // `on` is used to hook into various events Cypress emits
+ // `config` is the resolved Cypress config
+ on('dev-server:start', (options) => {
+ return startDevServer({ options })
+ })
+ return config
+}
--- /dev/null
+// ***********************************************
+// This example commands.js 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) => { ... })
--- /dev/null
+// ***********************************************************
+// This example support/index.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')
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
--- /dev/null
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "vite.config.*",
+
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/**"
+ ]
+}
--- /dev/null
+{
+ "name": "default-with-tests",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preserve": "vite build",
+ "serve": "vite preview --port 5050",
+ "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'"
+ },
+ "dependencies": {
+ "vue": "^3.1.5"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^1.2.5",
+ "@vitejs/plugin-vue-jsx": "^1.1.6",
+ "@vue/compiler-sfc": "^3.1.5",
+ "vite": "^2.4.3",
+ "@cypress/vite-dev-server": "^2.0.2",
+ "@cypress/vue": "^3.0.1",
+ "cypress": "^8.0.0",
+ "start-server-and-test": "^1.12.6"
+ }
+}
\ No newline at end of file
--- /dev/null
+<template>
+ <img alt="Vue logo" src="./assets/logo.png" />
+ <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+
+// This starter template is using Vue 3 experimental <script setup> SFCs
+// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
--- /dev/null
+<template>
+ <h1>{{ msg }}</h1>
+
+ <p>
+ <a href="https://vitejs.dev/guide/features.html" target="_blank">
+ Vite Documentation
+ </a>
+ |
+ <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+ </p>
+
+ <button type="button" @click="state.count++">
+ count is: {{ state.count }}
+ </button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test hot module replacement.
+ </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+ msg: {
+ type: String,
+ required: true
+ }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+ color: #42b983;
+}
+</style>
--- /dev/null
+import { mount } from '@cypress/vue'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+ it('playground', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+ })
+
+ it('renders properly', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+ cy.get('h1').should('contain', 'Hello Cypress')
+ })
+
+ it('adds 1 when clicking the plus button', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+
+ cy.get('button')
+ .should('contain', '0')
+ .click()
+ .should('contain', '1')
+ })
+})
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- /dev/null
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+/// <reference types="vite/client" />
--- /dev/null
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@/': new URL('./src/', import.meta.url).pathname,
+ },
+ }
+})
--- /dev/null
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
--- /dev/null
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "vite.config.*",
+
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/**"
+ ]
+}
--- /dev/null
+{
+ "name": "default",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preserve": "vite build",
+ "serve": "vite preview --port 5050"
+ },
+ "dependencies": {
+ "vue": "^3.1.5"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^1.2.5",
+ "@vitejs/plugin-vue-jsx": "^1.1.6",
+ "@vue/compiler-sfc": "^3.1.5",
+ "vite": "^2.4.3"
+ }
+}
\ No newline at end of file
--- /dev/null
+<template>
+ <img alt="Vue logo" src="./assets/logo.png" />
+ <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+
+// This starter template is using Vue 3 experimental <script setup> SFCs
+// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
--- /dev/null
+<template>
+ <h1>{{ msg }}</h1>
+
+ <p>
+ <a href="https://vitejs.dev/guide/features.html" target="_blank">
+ Vite Documentation
+ </a>
+ |
+ <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+ </p>
+
+ <button type="button" @click="state.count++">
+ count is: {{ state.count }}
+ </button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test hot module replacement.
+ </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+ msg: {
+ type: String,
+ required: true
+ }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+ color: #42b983;
+}
+</style>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- /dev/null
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+/// <reference types="vite/client" />
--- /dev/null
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@/': new URL('./src/', import.meta.url).pathname,
+ },
+ }
+})
--- /dev/null
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- /dev/null
+{
+ "baseUrl": "http://localhost:5050",
+ "component": {
+ "componentFolder": "src",
+ "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}"
+ }
+}
--- /dev/null
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- /dev/null
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+ it('visits the app root url', () => {
+ cy.visit('/')
+ cy.contains('h1', 'Hello Vue 3 + TypeScript + Vite')
+ })
+
+ it('navigates to the about page', () => {
+ cy.visit('/about')
+ cy.contains('h1', 'This is an about page')
+ })
+})
--- /dev/null
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { startDevServer } = require('@cypress/vite-dev-server')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+ // `on` is used to hook into various events Cypress emits
+ // `config` is the resolved Cypress config
+ on('dev-server:start', (options) => {
+ return startDevServer({ options })
+ })
+ return config
+}
--- /dev/null
+// ***********************************************
+// This example commands.js 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) => { ... })
--- /dev/null
+// ***********************************************************
+// This example support/index.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')
--- /dev/null
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["es5", "dom"],
+ "types": ["cypress"]
+ },
+ "include": ["./**/*"]
+}
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
--- /dev/null
+{
+ "name": "spa-ts-with-tests",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vue-tsc --noEmit && vite build",
+ "preserve": "vite build",
+ "serve": "vite preview --port 5050",
+ "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'",
+ "typecheck": "vue-tsc --noEmit"
+ },
+ "dependencies": {
+ "vue": "^3.1.5",
+ "vue-router": "^4.0.10",
+ "vuex": "^4.0.2"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^1.2.5",
+ "@vitejs/plugin-vue-jsx": "^1.1.6",
+ "@vue/compiler-sfc": "^3.1.5",
+ "vite": "^2.4.3",
+ "@cypress/vite-dev-server": "^2.0.2",
+ "@cypress/vue": "^3.0.1",
+ "cypress": "^8.0.0",
+ "start-server-and-test": "^1.12.6",
+ "typescript": "~4.3.5",
+ "vue-tsc": "^0.2.2"
+ }
+}
\ No newline at end of file
--- /dev/null
+<template>
+ <div id="nav">
+ <router-link to="/">Home</router-link> |
+ <router-link to="/about">About</router-link>
+ </div>
+ <router-view/>
+</template>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+}
+
+#nav {
+ padding: 30px;
+}
+
+#nav a {
+ font-weight: bold;
+ color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+ color: #42b983;
+}
+</style>
--- /dev/null
+<template>
+ <h1>{{ msg }}</h1>
+
+ <p>
+ Recommended IDE setup:
+ <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+ +
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+ </p>
+
+ <p>See <code>README.md</code> for more information.</p>
+
+ <p>
+ <a href="https://vitejs.dev/guide/features.html" target="_blank">
+ Vite Docs
+ </a>
+ |
+ <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+ </p>
+
+ <button type="button" @click="count++">count is: {{ count }}</button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test hot module replacement.
+ </p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+ msg: String,
+}>()
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+ color: #42b983;
+}
+
+label {
+ margin: 0 0.5em;
+ font-weight: bold;
+}
+
+code {
+ background-color: #eee;
+ padding: 2px 4px;
+ border-radius: 4px;
+ color: #304455;
+}
+</style>
--- /dev/null
+import { mount } from '@cypress/vue'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+ it('playground', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+ })
+
+ it('renders properly', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+ cy.get('h1').should('contain', 'Hello Cypress')
+ })
+
+ it('adds 1 when clicking the plus button', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+
+ cy.get('button')
+ .should('contain', '0')
+ .click()
+ .should('contain', '1')
+ })
+})
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import router from './router'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(store)
+
+app.mount('#app')
--- /dev/null
+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')
+ }
+]
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes
+})
+
+export default router
--- /dev/null
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+import { createStore } from 'vuex'
+
+export default createStore({
+ state: {
+ },
+ mutations: {
+ },
+ actions: {
+ },
+ modules: {
+ }
+})
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
--- /dev/null
+<template>
+ <img alt="Vue logo" src="@/assets/logo.png" />
+ <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+</template>
+
+<script setup lang="ts">
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
--- /dev/null
+/// <reference types="vite/client" />
--- /dev/null
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "vite.config.*",
+
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/**"
+ ]
+}
--- /dev/null
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@/': new URL('./src/', import.meta.url).pathname,
+ },
+ }
+})
--- /dev/null
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
--- /dev/null
+{
+ "name": "spa-ts",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vue-tsc --noEmit && vite build",
+ "preserve": "vite build",
+ "serve": "vite preview --port 5050",
+ "typecheck": "vue-tsc --noEmit"
+ },
+ "dependencies": {
+ "vue": "^3.1.5",
+ "vue-router": "^4.0.10",
+ "vuex": "^4.0.2"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^1.2.5",
+ "@vitejs/plugin-vue-jsx": "^1.1.6",
+ "@vue/compiler-sfc": "^3.1.5",
+ "vite": "^2.4.3",
+ "typescript": "~4.3.5",
+ "vue-tsc": "^0.2.2"
+ }
+}
\ No newline at end of file
--- /dev/null
+<template>
+ <div id="nav">
+ <router-link to="/">Home</router-link> |
+ <router-link to="/about">About</router-link>
+ </div>
+ <router-view/>
+</template>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+}
+
+#nav {
+ padding: 30px;
+}
+
+#nav a {
+ font-weight: bold;
+ color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+ color: #42b983;
+}
+</style>
--- /dev/null
+<template>
+ <h1>{{ msg }}</h1>
+
+ <p>
+ Recommended IDE setup:
+ <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+ +
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+ </p>
+
+ <p>See <code>README.md</code> for more information.</p>
+
+ <p>
+ <a href="https://vitejs.dev/guide/features.html" target="_blank">
+ Vite Docs
+ </a>
+ |
+ <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+ </p>
+
+ <button type="button" @click="count++">count is: {{ count }}</button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test hot module replacement.
+ </p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+ msg: String,
+}>()
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+ color: #42b983;
+}
+
+label {
+ margin: 0 0.5em;
+ font-weight: bold;
+}
+
+code {
+ background-color: #eee;
+ padding: 2px 4px;
+ border-radius: 4px;
+ color: #304455;
+}
+</style>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import router from './router'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(store)
+
+app.mount('#app')
--- /dev/null
+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')
+ }
+]
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes
+})
+
+export default router
--- /dev/null
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+import { createStore } from 'vuex'
+
+export default createStore({
+ state: {
+ },
+ mutations: {
+ },
+ actions: {
+ },
+ modules: {
+ }
+})
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
--- /dev/null
+<template>
+ <img alt="Vue logo" src="@/assets/logo.png" />
+ <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+</template>
+
+<script setup lang="ts">
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
--- /dev/null
+/// <reference types="vite/client" />
--- /dev/null
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "vite.config.*",
+
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/**"
+ ]
+}
--- /dev/null
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@/': new URL('./src/', import.meta.url).pathname,
+ },
+ }
+})
--- /dev/null
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- /dev/null
+{
+ "baseUrl": "http://localhost:5050",
+ "component": {
+ "componentFolder": "src",
+ "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}"
+ }
+}
--- /dev/null
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- /dev/null
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+ it('visits the app root url', () => {
+ cy.visit('/')
+ cy.contains('h1', 'Hello Vue 3 + Vite')
+ })
+
+ it('navigates to the about page', () => {
+ cy.visit('/about')
+ cy.contains('h1', 'This is an about page')
+ })
+})
--- /dev/null
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["es5", "dom"],
+ "types": ["cypress"]
+ },
+ "include": ["./**/*"]
+}
--- /dev/null
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { startDevServer } = require('@cypress/vite-dev-server')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+ // `on` is used to hook into various events Cypress emits
+ // `config` is the resolved Cypress config
+ on('dev-server:start', (options) => {
+ return startDevServer({ options })
+ })
+ return config
+}
--- /dev/null
+// ***********************************************
+// This example commands.js 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) => { ... })
--- /dev/null
+// ***********************************************************
+// This example support/index.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')
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
--- /dev/null
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "vite.config.*",
+
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/**"
+ ]
+}
--- /dev/null
+{
+ "name": "spa-with-tests",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preserve": "vite build",
+ "serve": "vite preview --port 5050",
+ "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'"
+ },
+ "dependencies": {
+ "vue": "^3.1.5",
+ "vue-router": "^4.0.10",
+ "vuex": "^4.0.2"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^1.2.5",
+ "@vitejs/plugin-vue-jsx": "^1.1.6",
+ "@vue/compiler-sfc": "^3.1.5",
+ "vite": "^2.4.3",
+ "@cypress/vite-dev-server": "^2.0.2",
+ "@cypress/vue": "^3.0.1",
+ "cypress": "^8.0.0",
+ "start-server-and-test": "^1.12.6"
+ }
+}
\ No newline at end of file
--- /dev/null
+<template>
+ <div id="nav">
+ <router-link to="/">Home</router-link> |
+ <router-link to="/about">About</router-link>
+ </div>
+ <router-view/>
+</template>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+}
+
+#nav {
+ padding: 30px;
+}
+
+#nav a {
+ font-weight: bold;
+ color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+ color: #42b983;
+}
+</style>
--- /dev/null
+<template>
+ <h1>{{ msg }}</h1>
+
+ <p>
+ Recommended IDE setup:
+ <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+ +
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+ </p>
+
+ <p>See <code>README.md</code> for more information.</p>
+
+ <p>
+ <a href="https://vitejs.dev/guide/features.html" target="_blank">
+ Vite Docs
+ </a>
+ |
+ <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+ </p>
+
+ <button type="button" @click="count++">count is: {{ count }}</button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test hot module replacement.
+ </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+ msg: {
+ type: String,
+ required: true
+ }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+ color: #42b983;
+}
+
+label {
+ margin: 0 0.5em;
+ font-weight: bold;
+}
+
+code {
+ background-color: #eee;
+ padding: 2px 4px;
+ border-radius: 4px;
+ color: #304455;
+}
+</style>
--- /dev/null
+import { mount } from '@cypress/vue'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+ it('playground', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+ })
+
+ it('renders properly', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+ cy.get('h1').should('contain', 'Hello Cypress')
+ })
+
+ it('adds 1 when clicking the plus button', () => {
+ mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+
+ cy.get('button')
+ .should('contain', '0')
+ .click()
+ .should('contain', '1')
+ })
+})
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import router from './router'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(store)
+
+app.mount('#app')
--- /dev/null
+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')
+ }
+]
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes
+})
+
+export default router
--- /dev/null
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+import { createStore } from 'vuex'
+
+export default createStore({
+ state: {
+ },
+ mutations: {
+ },
+ actions: {
+ },
+ modules: {
+ }
+})
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
--- /dev/null
+<template>
+ <img alt="Vue logo" src="@/assets/logo.png" />
+ <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
--- /dev/null
+/// <reference types="vite/client" />
--- /dev/null
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@/': new URL('./src/', import.meta.url).pathname,
+ },
+ }
+})
--- /dev/null
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
--- /dev/null
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "vite.config.*",
+
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/**"
+ ]
+}
--- /dev/null
+{
+ "name": "spa",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preserve": "vite build",
+ "serve": "vite preview --port 5050"
+ },
+ "dependencies": {
+ "vue": "^3.1.5",
+ "vue-router": "^4.0.10",
+ "vuex": "^4.0.2"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^1.2.5",
+ "@vitejs/plugin-vue-jsx": "^1.1.6",
+ "@vue/compiler-sfc": "^3.1.5",
+ "vite": "^2.4.3"
+ }
+}
\ No newline at end of file
--- /dev/null
+<template>
+ <div id="nav">
+ <router-link to="/">Home</router-link> |
+ <router-link to="/about">About</router-link>
+ </div>
+ <router-view/>
+</template>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+}
+
+#nav {
+ padding: 30px;
+}
+
+#nav a {
+ font-weight: bold;
+ color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+ color: #42b983;
+}
+</style>
--- /dev/null
+<template>
+ <h1>{{ msg }}</h1>
+
+ <p>
+ Recommended IDE setup:
+ <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+ +
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+ </p>
+
+ <p>See <code>README.md</code> for more information.</p>
+
+ <p>
+ <a href="https://vitejs.dev/guide/features.html" target="_blank">
+ Vite Docs
+ </a>
+ |
+ <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+ </p>
+
+ <button type="button" @click="count++">count is: {{ count }}</button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test hot module replacement.
+ </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+ msg: {
+ type: String,
+ required: true
+ }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+ color: #42b983;
+}
+
+label {
+ margin: 0 0.5em;
+ font-weight: bold;
+}
+
+code {
+ background-color: #eee;
+ padding: 2px 4px;
+ border-radius: 4px;
+ color: #304455;
+}
+</style>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import router from './router'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(store)
+
+app.mount('#app')
--- /dev/null
+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')
+ }
+]
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes
+})
+
+export default router
--- /dev/null
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+import { createStore } from 'vuex'
+
+export default createStore({
+ state: {
+ },
+ mutations: {
+ },
+ actions: {
+ },
+ modules: {
+ }
+})
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
--- /dev/null
+<template>
+ <img alt="Vue logo" src="@/assets/logo.png" />
+ <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
--- /dev/null
+/// <reference types="vite/client" />
--- /dev/null
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@/': new URL('./src/', import.meta.url).pathname,
+ },
+ }
+})
--- /dev/null
+import templateList from './utils/templateList.js'
+import { spawnSync } from 'child_process'
+
+for (const template of templateList) {
+ spawnSync('node', [
+ new URL('./index.js', import.meta.url).pathname,
+ template,
+ '--template',
+ template
+ ], {
+ cwd: new URL('./playground/', import.meta.url).pathname
+ })
+}
--- /dev/null
+const templateList = ['default', 'spa']
+ .flatMap(x => [x, x + '-ts'])
+ .flatMap(x => [x, x + '-with-tests'])
+
+export default templateList
projects / thirdparty / vuejs / create-vue.git / commitdiff
