-
-
Notifications
You must be signed in to change notification settings - Fork 102
/
getting-started.md
78 lines (52 loc) · 1.97 KB
/
getting-started.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
# Getting Started
Vue Macros is a library that implements proposals or ideas that have not been officially implemented by Vue. That means it will explore and extend more features and syntax sugar to Vue.
We assume you are already familiar with the basic usages of Vue before you continue.
## Requirements
- Node.js 16.14.0 or higher.
- Vue >= 2.7 or Vue >= 3.0.
- Some features need Vue >= 3.2.25.
- VSCode installed the [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) **latest** extension.
- ❌ WebStorm is not supported.
## Creating a Vue Macros Project
### Installation
::: code-group
```bash [npm]
npm i -g @vue-macros/cli
```
```bash [yarn]
yarn global add @vue-macros/cli
```
```bash [pnpm]
pnpm add -g @vue-macros/cli
```
:::
This command will install [@vue-macros/cli](https://github.com/vue-macros/vue-macros-cli), the official Vue Macros scaffolding tool.
### Initialization
::: code-group
```bash [npm]
npm create vite@latest my-vue-macros -- --template vue-ts
cd my-vue-macros
vue-macros init
```
```bash [yarn]
yarn create vite my-vue-macros --template vue-ts
cd my-vue-macros
vue-macros init
```
```bash [pnpm]
pnpm create vite my-vue-macros --template vue-ts
cd my-vue-macros
vue-macros init
```
You will be presented with prompts for several optional experimental features.
:::
## Demos
- [Vite + Vue 3](https://github.com/vue-macros/vite)
- [Vite + Vue 2](https://github.com/vue-macros/vue-macros/tree/main/playground/vue2)
- [Nuxt 3 + Vue 3](https://github.com/vue-macros/nuxt)
- [Vue CLI + Vue 2](https://github.com/vue-macros/vue2-vue-cli)
🌟 More demos are welcome!
## Nuxt Integration
If you're using [Nuxt 3](https://nuxt.com/), read the [Nuxt Integration](./nuxt-integration.md).
## Bundler Integrations
If you're using [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org/), [esbuild](https://esbuild.github.io/), or [Webpack](https://webpack.js.org/), read the [Bundler Integration](./bundler-integration.md).