# Cài đặt (ok)

```
$ npm install --global vue-cli  #cài đặt vue-cli
$ vue init webpack my-vue # tạo một dự án mới với template "webpack"
$ cd my-vue 
$ npm run dev #chạy server 
```

![](https://2312674349-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeXbfPqPP3ZSJVavefR%2F-MiCSZs9rS9zFSlOXw3p%2F-MiCZGbuxybB0S_rla95%2FScreenshot_1.png?alt=media\&token=feba1f83-1d63-466a-9c12-72104ab0c4cb)

C:\xampp\htdocs\html\src\main.js

```
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

```

C:\xampp\htdocs\html\src\App.vue

```
<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
```

C:\xampp\htdocs\html\src\router\index.js

```
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

```

C:\xampp\htdocs\html\src\components\HelloWorld.vue

```
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
```