You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/quick-start.md
+83-68Lines changed: 83 additions & 68 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,75 @@
1
-
---
2
-
aside: deep
3
-
---
4
-
5
1
# Quick Start
6
2
3
+
Depending on your use case and preference, you can use Vue with or without a build step.
4
+
5
+
## With Build Tools
6
+
7
+
A build setup allows us to use Vue [Single File Components](/guide/scaling-up/sfc) (SFCs). The official Vue build setup is based on [Vite](https://vitejs.dev), a frontend build tool that is modern, lightweight and extremely fast.
8
+
9
+
### Online
10
+
11
+
You can try Vue with SFCs online on [StackBlitz](https://vite.new/vue). StackBlitz runs the Vite-based build setup directly in the browser, so it is almost identical to the local setup but doesn't require installing anything on your machine.
12
+
13
+
### Local
14
+
15
+
:::tip Pre-requisites
16
+
17
+
- Familiarity with the command line
18
+
- Install [Node.js](https://nodejs.org/)
19
+
:::
20
+
21
+
To create a built-tool-enabled Vue project on your machine, run the following command in your command line (without the `$` sign):
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 a number of optional features such as TypeScript and testing support:
<spanstyle="color:var(--vt-c-green);">✔</span> <spanstyle="color:#A6ACCD;">Add Vue Router for Single Page Application development? <spanstyle="color:#888;">… <spanstyle="color:#89DDFF;text-decoration:underline">No</span> / Yes</span></span>
31
+
<spanstyle="color:var(--vt-c-green);">✔</span> <spanstyle="color:#A6ACCD;">Add Vuex for state management? <spanstyle="color:#888;">… <spanstyle="color:#89DDFF;text-decoration:underline">No</span> / Yes</span></span>
32
+
<spanstyle="color:var(--vt-c-green);">✔</span> <spanstyle="color:#A6ACCD;">Add Cypress for testing? <spanstyle="color:#888;">… <spanstyle="color:#89DDFF;text-decoration:underline">No</span> / Yes</span></span>
33
+
<span></span>
34
+
<spanstyle="color:#A6ACCD;">Scaffolding project in ./<spanstyle="color:#89DDFF;"><</span><spanstyle="color:#888;">your-project-name</span><spanstyle="color:#89DDFF;">></span>...</span>
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:
<spanclass="line"><spanstyle="color:var(--vt-c-green);">$ </span><spanstyle="color:#A6ACCD;">npm run dev</span></span>
42
+
<spanclass="line"></span></code></pre></div>
43
+
44
+
You should now have your first Vue project running! Here are some additional tips:
45
+
46
+
- The recommended IDE setup is [Visual Studio Code](https://code.visualstudio.com/) + [Volar extension](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar). [WebStorm](https://www.jetbrains.com/webstorm/) is also viable.
47
+
- More tooling details are discussed in the [Tooling Guide](/guide/scaling-up/tooling.html).
48
+
- To learn more about the underlying build tool Vite, check out the [Vite docs](https://vitejs.dev).
49
+
- If you chose to use TypeScript, check out [Using Vue with TypeScript](scaling-up/typescript.html).
50
+
7
51
## Without Build Tools
8
52
9
53
To get started with Vue without a build step, simply copy the following code into an HTML file and open it in your browser:
10
54
55
+
```html
56
+
<scriptsrc="https://unpkg.com/vue@3"></script>
57
+
58
+
<divid="app">{{ message }}</div>
59
+
60
+
<script>
61
+
Vue.createApp({
62
+
data() {
63
+
return {
64
+
message:'Hello Vue!'
65
+
}
66
+
}
67
+
}).mount('#app')
68
+
</script>
69
+
```
70
+
71
+
The above example uses the global build of Vue where all APIs are exposed under the global `Vue` variable. However, we will be primarily using [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) syntax throughout the documentation for consistency. In order to use Vue over native ES modules, use the following HTML instead:
72
+
11
73
```html
12
74
<scripttype="importmap">
13
75
{
@@ -32,7 +94,7 @@ To get started with Vue without a build step, simply copy the following code int
32
94
</script>
33
95
```
34
96
35
-
Notice how we can import directly from `'vue'` in our code - this is made possible by the `<script type="importmap">` block, leveraging a browser feature called [Import Maps](https://caniuse.com/import-maps). Import maps are currently only available in Chromium-based browsers, so we recommend using Chrome or Edge during the learning process. If your preferred browser does not support import maps yet, you can polyfill it with [es-module-shims](https://github.com/guybedford/es-module-shims).
97
+
Notice how we can import directly from `'vue'` in our code - this is made possible by the `<script type="importmap">` block, leveraging a native browser feature called [Import Maps](https://caniuse.com/import-maps). Import maps are currently only available in Chromium-based browsers, so we recommend using Chrome or Edge during the learning process. If your preferred browser does not support import maps yet, you can polyfill it with [es-module-shims](https://github.com/guybedford/es-module-shims).
36
98
37
99
You can add entries for other dependencies to the import map - just make sure they point to the ES modules version of the library you intend to use.
38
100
@@ -44,76 +106,29 @@ The import-maps-based setup is meant for learning only - if you intend to use Vu
44
106
45
107
As we dive deeper into the guide, we may need to split our code into separate JavaScript files so that they are easier to manage. For example:
46
108
47
-
```js
48
-
importMyComponentfrom'./my-component.js'
49
-
```
50
-
51
-
In order for this to work, you need to serve your HTML over the `http://` protocol instead of `file://` protocol. To start a local HTTP server, first install [Node.js](https://nodejs.org/en/), and then run `npx serve` from the command line in the same directory where your HTML file is.
52
-
53
-
### Using the Global Build
54
-
55
-
For consistency, we will be exclusively using [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) syntax throughout the documentation. That said, Vue is also available in a more traditional build where it exposes a global `Vue` variable:
56
-
57
109
```html
58
-
<scriptsrc="https://unpkg.com/vue@3"></script>
59
-
60
-
<divid="app">...</div>
61
-
62
-
<script>
63
-
// instead of `import { createApp } from 'vue'`:
64
-
const { createApp } = Vue
110
+
<!-- index.html -->
111
+
<scripttype="module">
112
+
import { createApp } from'vue'
113
+
importMyComponentfrom'./my-component.js'
65
114
66
-
createApp({
67
-
// ...
68
-
}).mount('#app')
115
+
createApp(MyComponent).mount('#app')
69
116
</script>
70
117
```
71
118
72
-
## With Build Tools
73
-
74
-
A build setup allows us to use Vue [Single File Components](/guide/scaling-up/sfc) (SFCs). The official Vue build setup is based on [Vite](https://vitejs.dev), a frontend build tool that is modern, lightweight and extremely fast.
75
-
76
-
### Online
77
-
78
-
You can try Vue with SFCs online on [StackBlitz](https://vite.new/vue). StackBlitz runs the Vite-based build setup directly in the browser, so it is almost identical to the local setup but doesn't require installing anything on your machine.
79
-
80
-
### Local
81
-
82
-
:::tip Pre-requisites
83
-
84
-
- Familiarity with the command line
85
-
- Install [Node.js](https://nodejs.org/)
86
-
:::
87
-
88
-
To create a built-tool-enabled Vue project on your machine, run the following command in your command line (without the `$` sign):
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 a number of optional features such as TypeScript and testing support:
<spanstyle="color:var(--vt-c-green);">✔</span> <spanstyle="color:#A6ACCD;">Add Vue Router for Single Page Application development? <spanstyle="color:#888;">… <spanstyle="color:#89DDFF;text-decoration:underline">No</span> / Yes</span></span>
98
-
<spanstyle="color:var(--vt-c-green);">✔</span> <spanstyle="color:#A6ACCD;">Add Vuex for state management? <spanstyle="color:#888;">… <spanstyle="color:#89DDFF;text-decoration:underline">No</span> / Yes</span></span>
99
-
<spanstyle="color:var(--vt-c-green);">✔</span> <spanstyle="color:#A6ACCD;">Add Cypress for testing? <spanstyle="color:#888;">… <spanstyle="color:#89DDFF;text-decoration:underline">No</span> / Yes</span></span>
100
-
<span></span>
101
-
<spanstyle="color:#A6ACCD;">Scaffolding project in ./<spanstyle="color:#89DDFF;"><</span><spanstyle="color:#888;">your-project-name</span><spanstyle="color:#89DDFF;">></span>...</span>
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:
<spanclass="line"><spanstyle="color:var(--vt-c-green);">$ </span><spanstyle="color:#A6ACCD;">npm run dev</span></span>
109
-
<spanclass="line"></span></code></pre></div>
119
+
```js
120
+
// my-component.js
121
+
exportdefault {
122
+
data() {
123
+
return { count:0 }
124
+
},
125
+
template:`<div>count is {{ count }}</div>`
126
+
}
127
+
```
110
128
111
-
You should now have your first Vue project running!
129
+
In order for this to work, you need to serve your HTML over the `http://` protocol instead of `file://` protocol. To start a local HTTP server, first install [Node.js](https://nodejs.org/en/), and then run `npx serve` from the command line in the same directory where your HTML file is. You can also use any other HTTP server that can serve static files with correct MIME types.
112
130
113
-
- The recommended IDE setup is [Visual Studio Code](https://code.visualstudio.com/) + [Volar extension](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar). [WebStorm](https://www.jetbrains.com/webstorm/) is also viable.
114
-
- More tooling details are discussed in the [Tooling Guide](/guide/scaling-up/tooling.html).
115
-
- To learn more about the underlying build tool Vite, check out the [Vite docs](https://vitejs.dev).
116
-
- If you chose to use TypeScript, check out [Using Vue with TypeScript](scaling-up/typescript.html).
131
+
You may have noticed that the imported component's template is inlined as a JavaScript string. If you are using VSCode, you can install the [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) extension and prefix the strings with a `/*html*/` comment to get syntax highlighting for them.
0 commit comments