Skip to content

Commit 0c21e02

Browse files
haoqunjianghaoqunjiang
committed
feat: preliminary support for Vue 2
1 parent 14156be commit 0c21e02

File tree

565 files changed

+3591
-13040
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

565 files changed

+3591
-13040
lines changed

‎index.js

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ async function init() {
4343
// possible options:
4444
// --default
4545
// --typescript / --ts
46-
// --jsx
4746
// --router / --vue-router
4847
// --pinia
4948
// --with-tests / --tests / --cypress
@@ -61,8 +60,7 @@ async function init() {
6160
// if any of the feature flags is set, we would skip the feature prompts
6261
// use `??` instead of `||` once we drop Node.js 12 support
6362
const isFeatureFlagsUsed =
64-
typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.pinia || argv.tests) ===
65-
'boolean'
63+
typeof (argv.default || argv.ts || argv.router || argv.pinia || argv.tests) === 'boolean'
6664

6765
let targetDir = argv._[0]
6866
const defaultProjectName = !targetDir ? 'vue-project' : targetDir
@@ -77,7 +75,6 @@ async function init() {
7775
// - whether to overwrite the existing directory or not?
7876
// - enter a valid package name for package.json
7977
// - Project language: JavaScript / TypeScript
80-
// - Add JSX Support?
8178
// - Install Vue Router for SPA development?
8279
// - Install Pinia for state management?
8380
// - Add Cypress for testing?
@@ -124,14 +121,6 @@ async function init() {
124121
active: 'Yes',
125122
inactive: 'No'
126123
},
127-
{
128-
name: 'needsJsx',
129-
type: () => (isFeatureFlagsUsed ? null : 'toggle'),
130-
message: 'Add JSX Support?',
131-
initial: false,
132-
active: 'Yes',
133-
inactive: 'No'
134-
},
135124
{
136125
name: 'needsRouter',
137126
type: () => (isFeatureFlagsUsed ? null : 'toggle'),
@@ -173,7 +162,6 @@ async function init() {
173162
const {
174163
packageName = toValidPackageName(defaultProjectName),
175164
shouldOverwrite,
176-
needsJsx = argv.jsx,
177165
needsTypeScript = argv.typescript,
178166
needsRouter = argv.router,
179167
needsPinia = argv.pinia,
@@ -206,9 +194,6 @@ async function init() {
206194
render('base')
207195

208196
// Add configs.
209-
if (needsJsx) {
210-
render('config/jsx')
211-
}
212197
if (needsRouter) {
213198
render('config/router')
214199
}

‎playground/default/package.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,14 @@
77
"preview": "vite preview --port 5050"
88
},
99
"dependencies": {
10-
"vue": "^3.2.22"
10+
"@vue/composition-api": "^1.4.0",
11+
"vue": "^2.6.14"
1112
},
1213
"devDependencies": {
13-
"@vitejs/plugin-vue": "^1.10.0",
14-
"vite": "^2.6.14"
14+
"@vue/runtime-dom": "^3.2.22",
15+
"unplugin-vue2-script-setup": "^0.7.1",
16+
"vite": "^2.6.14",
17+
"vite-plugin-vue2": "^1.9.0",
18+
"vue-template-compiler": "^2.6.14"
1519
}
1620
}

‎playground/default/src/App.vue

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@ import TheWelcome from './components/TheWelcome.vue'
44
</script>
55

66
<template>
7-
<header>
8-
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
7+
<div id="app">
8+
<header>
9+
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
910

10-
<div class="wrapper">
11-
<HelloWorld msg="You did it!" />
12-
</div>
13-
</header>
11+
<div class="wrapper">
12+
<HelloWorld msg="You did it!" />
13+
</div>
14+
</header>
1415

15-
<main>
16-
<TheWelcome />
17-
</main>
16+
<main>
17+
<TheWelcome />
18+
</main>
19+
</div>
1820
</template>
1921

2022
<style>

‎playground/default/src/components/HelloWorld.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ defineProps({
1313
<h3>
1414
You’ve successfully created a project with
1515
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
16-
<a target="_blank" href="https://v3.vuejs.org/">Vue 3</a>.
16+
<a target="_blank" href="https://vuejs.org/">Vue 2</a>.
1717
</h3>
1818
</div>
1919
</template>

‎playground/default/src/components/TheWelcome.vue

Lines changed: 64 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue'
88
</script>
99

1010
<template>
11-
<WelcomeItem>
12-
<template #icon>
13-
<DocumentationIcon />
14-
</template>
15-
<template #heading>Documentation</template>
11+
<div>
12+
<WelcomeItem>
13+
<template #icon>
14+
<DocumentationIcon />
15+
</template>
16+
<template #heading>Documentation</template>
1617

17-
Vue’s
18-
<a target="_blank" href="https://v3.vuejs.org/">official documentation</a>
19-
provides you with all information you need to get started.
20-
</WelcomeItem>
18+
Vue’s
19+
<a target="_blank" href="https://v3.vuejs.org/">official documentation</a>
20+
provides you with all information you need to get started.
21+
</WelcomeItem>
2122

22-
<WelcomeItem>
23-
<template #icon>
24-
<ToolingIcon />
25-
</template>
26-
<template #heading>Tooling</template>
23+
<WelcomeItem>
24+
<template #icon>
25+
<ToolingIcon />
26+
</template>
27+
<template #heading>Tooling</template>
2728

28-
This project is served and bundled with
29-
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
30-
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
31-
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
32-
your components and web pages, check out
33-
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
34-
<a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
35-
>Cypress Component Testing</a
36-
>.
29+
This project is served and bundled with
30+
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
31+
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
32+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to
33+
test your components and web pages, check out
34+
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
35+
<a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
36+
>Cypress Component Testing</a
37+
>.
3738

38-
<br />
39+
<br />
3940

40-
More instructions are available in <code>README.md</code>.
41-
</WelcomeItem>
41+
More instructions are available in <code>README.md</code>.
42+
</WelcomeItem>
4243

43-
<WelcomeItem>
44-
<template #icon>
45-
<EcosystemIcon />
46-
</template>
47-
<template #heading>Ecosystem</template>
44+
<WelcomeItem>
45+
<template #icon>
46+
<EcosystemIcon />
47+
</template>
48+
<template #heading>Ecosystem</template>
4849

49-
Get official tools and libraries for your project:
50-
<a target="_blank" href="https://next.vuex.vuejs.org/">Vuex</a>,
51-
<a target="_blank" href="https://next.router.vuejs.org/">Vue Router</a>,
52-
<a target="_blank" href="https://next.vue-test-utils.vuejs.org/">Vue Test Utils</a>, and
53-
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
54-
resources, we suggest paying
55-
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
56-
a visit.
57-
</WelcomeItem>
50+
Get official tools and libraries for your project:
51+
<a target="_blank" href="https://vuex.vuejs.org/">Vuex</a>,
52+
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
53+
<a target="_blank" href="https://vue-test-utils.vuejs.org/">Vue Test Utils</a>, and
54+
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need
55+
more resources, we suggest paying
56+
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
57+
a visit.
58+
</WelcomeItem>
5859

59-
<WelcomeItem>
60-
<template #icon>
61-
<CommunityIcon />
62-
</template>
63-
<template #heading>Community</template>
60+
<WelcomeItem>
61+
<template #icon>
62+
<CommunityIcon />
63+
</template>
64+
<template #heading>Community</template>
6465

65-
Got stuck? Ask your question on
66-
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
67-
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
68-
You should also subscribe to
69-
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
70-
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
71-
twitter account for latest news in the Vue world.
72-
</WelcomeItem>
66+
Got stuck? Ask your question on
67+
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
68+
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
69+
You should also subscribe to
70+
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
71+
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
72+
twitter account for latest news in the Vue world.
73+
</WelcomeItem>
7374

74-
<WelcomeItem>
75-
<template #icon>
76-
<SupportIcon />
77-
</template>
78-
<template #heading>Support Vue</template>
75+
<WelcomeItem>
76+
<template #icon>
77+
<SupportIcon />
78+
</template>
79+
<template #heading>Support Vue</template>
7980

80-
As an independent project, Vue relies on community backing for its sustainability. You can help
81-
us by
82-
<a target="_blank" href="https://vuejs.org/support-vuejs/">becoming a sponsor</a>.
83-
</WelcomeItem>
81+
As an independent project, Vue relies on community backing for its sustainability. You can
82+
help us by
83+
<a target="_blank" href="https://vuejs.org/support-vuejs/">becoming a sponsor</a>.
84+
</WelcomeItem>
85+
</div>
8486
</template>

‎playground/default/src/main.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { createApp } from 'vue'
1+
import Vue from 'vue'
2+
import VueCompositionAPI from '@vue/composition-api'
3+
24
import App from './App.vue'
35

4-
createApp(App).mount('#app')
6+
Vue.use(VueCompositionAPI)
7+
8+
const app = new Vue({
9+
render: (h) => h(App)
10+
})
11+
12+
app.$mount('#app')

‎playground/default/vite.config.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { fileURLToPath } from 'url'
22

33
import { defineConfig } from 'vite'
4-
import vue from '@vitejs/plugin-vue'
4+
import { createVuePlugin as vue2 } from 'vite-plugin-vue2'
5+
import scriptSetup from 'unplugin-vue2-script-setup/vite'
56

67
// https://vitejs.dev/config/
78
export default defineConfig({
8-
plugins: [vue()],
9+
plugins: [
10+
vue2({
11+
jsx: true
12+
}),
13+
scriptSetup()
14+
],
915
resolve: {
1016
alias: {
1117
'@': fileURLToPath(new URL('./src', import.meta.url))

‎playground/jsx-pinia-with-tests/.gitignore

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎playground/jsx-pinia-with-tests/README.md

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎playground/jsx-pinia-with-tests/cypress.json

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)