Skip to content

Commit 385e60c

Browse files
author
ntepluhina
committed
feat: started example introduction
1 parent 8a19c39 commit 385e60c

File tree

2 files changed

+39
-3
lines changed

2 files changed

+39
-3
lines changed

docs/.vuepress/config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ module.exports = {
99
items: [
1010
{ text: 'Guide', link: '/guide/introduction' },
1111
{ text: 'Styleguide', link: '/styleguide/' },
12-
{ text: 'Core Libraries', link: '/core-libraries/' }
12+
{ text: 'Tooling', link: '/tooling/' }
1313
]
1414
},
1515
{ text: 'API Reference', link: '/api/' },
@@ -22,7 +22,7 @@ module.exports = {
2222
},
2323
{ text: 'Community', link: '/community/' }
2424
],
25-
sidebarDepth: 3,
25+
sidebarDepth: 2,
2626
sidebar: {
2727
'/guide/': [
2828
'installation',

docs/guide/introduction.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,37 @@
1-
# Introduction
1+
# Introduction
2+
3+
## What is Vue.js?
4+
5+
Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries).
6+
7+
If you’d like to learn more about Vue before diving in, we <a id="modal-player" href="#">created a video</a> walking through the core principles and a sample project.
8+
9+
If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html).
10+
11+
<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="sponsored noopener" title="Free Vue.js Course">Watch a free video course on Vue Mastery</a></div>
12+
13+
## Getting Started
14+
15+
<a class="button" href="installation.html">Installation</a>
16+
17+
::: tip
18+
The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.
19+
:::
20+
21+
The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can <a href="https://gist.githubusercontent.com/chrisvfritz/7f8d7d63000b48493c336e48b3db3e52/raw/ed60c4e5d5c6fec48b0921edaed0cb60be30e87c/index.html" target="_blank" download="index.html" rel="noopener noreferrer">create an <code>index.html</code> file</a> and include Vue with:
22+
23+
``` html
24+
<!-- development version, includes helpful console warnings -->
25+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
26+
```
27+
28+
or:
29+
30+
``` html
31+
<!-- production version, optimized for size and speed -->
32+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
33+
```
34+
35+
The [Installation](installation.md) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools.
36+
37+
If you prefer something more interactive, you can also check out [this tutorial series on Scrimba](https://scrimba.com/g/gvuedocs), which gives you a mix of screencast and code playground that you can pause and play around with anytime.

0 commit comments

Comments
 (0)