Skip to content

Commit bcc313c

Browse files
the-pesarthe-pesar
authored
feat: add pnpm, yarn and bun support in quick-start (#2605)
* feat: add pnpm, yarn and bun support in quick-start * fix: simplify yarn instructions
1 parent c15a06f commit bcc313c

File tree

1 file changed

+103
-8
lines changed

1 file changed

+103
-8
lines changed

‎src/guide/quick-start.md

Lines changed: 103 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
footer: false
33
---
44

5+
<script setup>
6+
import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
7+
</script>
8+
59
# Quick Start {#quick-start}
610

711
## Try Vue Online {#try-vue-online}
@@ -22,9 +26,38 @@ footer: false
2226

2327
In this section we will introduce how to scaffold a Vue [Single Page Application](/guide/extras/ways-of-using-vue#single-page-application-spa) on your local machine. The created project will be using a build setup based on [Vite](https://vitejs.dev) and allow us to use Vue [Single-File Components](/guide/scaling-up/sfc) (SFCs).
2428

25-
Make sure you have an up-to-date version of [Node.js](https://nodejs.org/) installed and your current working directory is the one where you intend to create a project. Run the following command in your command line (without the `>` sign):
29+
Make sure you have an up-to-date version of [Node.js](https://nodejs.org/) installed and your current working directory is the one where you intend to create a project. Run the following command in your command line (without the `$` sign):
30+
31+
<VTCodeGroup>
32+
<VTCodeGroupTab label="npm">
33+
34+
```sh
35+
$ npm create vue@latest
36+
```
37+
38+
</VTCodeGroupTab>
39+
<VTCodeGroupTab label="pnpm">
40+
41+
```sh
42+
$ pnpm create vue@latest
43+
```
44+
45+
</VTCodeGroupTab>
46+
<VTCodeGroupTab label="yarn">
47+
48+
```sh
49+
$ yarn create vue@latest
50+
```
51+
52+
</VTCodeGroupTab>
53+
<VTCodeGroupTab label="bun">
54+
55+
```sh
56+
$ bun create vue@latest
57+
```
2658

27-
<div class="language-sh"><pre><code><span class="line"><span style="color:var(--vt-c-green);">&gt;</span> <span style="color:#A6ACCD;">npm create vue@latest</span></span></code></pre></div>
59+
</VTCodeGroupTab>
60+
</VTCodeGroup>
2861

2962
This command will install and execute [create-vue](https://github.com/vuejs/create-vue), the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:
3063

@@ -43,10 +76,44 @@ This command will install and execute [create-vue](https://github.com/vuejs/crea
4376

4477
If you are unsure about an option, simply choose `No` by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:
4578

46-
<div class="language-sh"><pre><code><span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">cd</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#888;">your-project-name</span><span style="color:#89DDFF;">&gt;</span></span>
47-
<span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">npm install</span></span>
48-
<span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">npm run dev</span></span>
49-
<span class="line"></span></code></pre></div>
79+
<VTCodeGroup>
80+
<VTCodeGroupTab label="npm">
81+
82+
```sh
83+
$ cd <your-project-name>
84+
$ npm install
85+
$ npm run dev
86+
```
87+
88+
</VTCodeGroupTab>
89+
<VTCodeGroupTab label="pnpm">
90+
91+
```sh
92+
$ cd <your-project-name>
93+
$ pnpm install
94+
$ pnpm run dev
95+
```
96+
97+
</VTCodeGroupTab>
98+
<VTCodeGroupTab label="yarn">
99+
100+
```sh
101+
$ cd <your-project-name>
102+
$ yarn
103+
$ yarn dev
104+
```
105+
106+
</VTCodeGroupTab>
107+
<VTCodeGroupTab label="bun">
108+
109+
```sh
110+
$ cd <your-project-name>
111+
$ bun install
112+
$ bun run dev
113+
```
114+
115+
</VTCodeGroupTab>
116+
</VTCodeGroup>
50117

51118
You should now have your first Vue project running! Note that the example components in the generated project are written using the [Composition API](/guide/introduction#composition-api) and `<script setup>`, rather than the [Options API](/guide/introduction#options-api). Here are some additional tips:
52119

@@ -57,8 +124,36 @@ You should now have your first Vue project running! Note that the example compon
57124

58125
When you are ready to ship your app to production, run the following:
59126

60-
<div class="language-sh"><pre><code><span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">npm run build</span></span>
61-
<span class="line"></span></code></pre></div>
127+
<VTCodeGroup>
128+
<VTCodeGroupTab label="npm">
129+
130+
```sh
131+
$ npm run build
132+
```
133+
134+
</VTCodeGroupTab>
135+
<VTCodeGroupTab label="pnpm">
136+
137+
```sh
138+
$ pnpm run build
139+
```
140+
141+
</VTCodeGroupTab>
142+
<VTCodeGroupTab label="yarn">
143+
144+
```sh
145+
$ yarn build
146+
```
147+
148+
</VTCodeGroupTab>
149+
<VTCodeGroupTab label="bun">
150+
151+
```sh
152+
$ bun run build
153+
```
154+
155+
</VTCodeGroupTab>
156+
</VTCodeGroup>
62157

63158
This will create a production-ready build of your app in the project's `./dist` directory. Check out the [Production Deployment Guide](/guide/best-practices/production-deployment) to learn more about shipping your app to production.
64159

0 commit comments

Comments
 (0)