- We call for the minified Vue.js library that’s hosted on our own server (for security reasons).
- Download the Development version: https://vuejs.org/js/vue.js and the production version: https://vuejs.org/js/vue.min.js
- Copy this files into the public/js folder
- First we have a basic HTML boilerplate file. Create a test file: public/index.php
- A div with an id of #app will contain our app.
- In the div, we have an h1 and a reference to an message piece of data.
- We then instantiate a new Vue object and tell it with el that our app is the #app div.
- Finally, we provide the data needed with the data object. In this case, we provide the data for message.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
new Vue({
el: "#app",
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>You should see now: Hello Vue!
Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them. Here's a basic example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/user/1234">Go to user</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script>
// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter and then call `Vue.use(VueRouter)`.
// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>Foo</div>' };
const Bar = { template: '<div>Bar</div>' };
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
};
const NotFoundComponent = { template: '<div>Not found</div>' };
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/user/:id', component: User, props: true },
{ path: '*', component: NotFoundComponent }
];
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
mode: 'history',
routes: routes
});
//Vue.use(require('vue-chartist'));
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router: router
}).$mount('#app');
// Now the app has started!
</script>
</body>
</html>- Open the console:
cmd - Change into to public directory:
cd c:\xampp\htdocs\example.com\public - Start the php webserver:
php -S localhost:8080 - Open the url: http://localhost:8080
More details: https://router.vuejs.org/en/essentials/getting-started.html
If you would want to integrate a new VueJs package and update them you need webpack as a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
- Install node.js (with npm): https://nodejs.org/en/download/
- Install webpack: https://webpack.js.org/guides/getting-started/
- Create a Vue.js project: https://skyronic.com/blog/vue-project-scratch
<script src="js/app.js"></script>
<div id="app"></div>