8000 README InstallationAndUsage · MissionVistaCS/Vue.js-Tutorial@9899849 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9899849

Browse files
vwheezyvwheezy
committed
README InstallationAndUsage
1 parent b12d869 commit 9899849

File tree

1 file changed

+44
-8
lines changed

1 file changed

+44
-8
lines changed

‎README.md

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,50 @@ A short, concise tutorial on the popular front-end framework Vue.js. Written for
1616
#### Installation and Usage <a name="installation"></a>
1717
Vue.js is tremendously simple to install and use. Although we will be using the Vue command line interface (vue-cli), you can get started with Vue in 3 different ways.
1818

19-
**CDN:** <br>
20-
Import Vue.js into your `index.html` file using the `<script>` tag. <br>
21-
22-
``` html
23-
<!-- development version with alarms and alerts -->
24-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
25-
```
19+
**CDN:** <br>
20+
Import Vue.js into your `index.html` file using the `<script>` tag. <br>
21+
22+
```html
23+
<!-- development version with alarms and alerts -->
24+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
25+
```
26+
27+
<br>
28+
**NPM:** <br>
29+
Start by creating a project with npm
30+
``` bash
31+
$ npm init -y
32+
```
33+
<br>
34+
35+
Install Vue and save dependencies
36+
``` bash
37+
$ npm install -s vue
38+
```
39+
<br>
40+
41+
Then in your `index.html` file reference vue with a `<script>` tag
42+
``` html
43+
<body>
44+
<script src="node_modules/dist/vue/vue.js"></script>
45+
</body>
46+
```
47+
\* As a note: in the `/dist` folder of the `vue` npm package, there are many other versions that refer to different builds of Vue.js. We will only be using the Full build. For more information see [here](https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds)
48+
<br><br>
49+
**Vue-CLI:** <br>
50+
This is the method we will most often use. The Vue-CLI allows us to quickly create Single Page Applications with built in templates.
51+
Start by installing the Vue-CLI module from NPM
52+
53+
``` bash
54+
$ sudo npm install -g vue-cli
55+
```
56+
57+
Create your project using the CLI with the command `vue init <template-name> <project-name>` <br>
58+
Ex:
59+
```bash
60+
$ vue init webpack-simple myFirstVueProject
61+
```
2662

27-
2863
<br>
2964
**JSFiddle:** <br>
3065
You can play around with Vue.js in [JSFiddle's Hello World Example](https://jsfiddle.net/chrisvfritz/50wL7mdz/)
@@ -39,6 +74,7 @@ A short, concise tutorial on the popular front-end framework Vue.js. Written for
3974

4075

4176

77+
4278
### Resources <a name="resources"></a>
4379
Vue.js is one of the better documented frameworks out there. Regardless, I have compiled a list of my favorite Vue.js documentations/tutorials while writing this tutorial.
4480
+ **[Vue.js Official Documentation](https://vuejs.org/)**

0 commit comments

Comments
 (0)
0