A short, concise tutorial on the popular front-end framework Vue.js. Written for the Mission Vista High School Web Programming course.
Vue.js is the Javascript framework. In this section, we will go over the core concepts to and understand and use Vue.js.
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.
CDN:
Import Vue.js into your index.html file using the <script> tag.
<!-- development version with alarms and alerts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>**NPM:**
Start by creating a project with npm ``` bash $ npm init -y ```
Install Vue and save dependencies
$ npm install -s vueThen in your index.html file reference vue with a <script> tag
<body>
<script src="node_modules/dist/vue/vue.js"></script>
</body>* 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
Vue-CLI:
This is the method we will most often use. The Vue-CLI allows us to quickly create Single Page Applications with built in templates.
Start by installing the Vue-CLI module from NPM
$ sudo npm install -g vue-cliCreate your project using the CLI with the command vue init <template-name> <project-name>
Ex:
$ vue init webpack-simple myFirstVueProject**JSFiddle:**
You can play around with Vue.js in [JSFiddle's Hello World Example](https://jsfiddle.net/chrisvfritz/50wL7mdz/)
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.