GMO-Z.com Vietnam Lab Center Technology Blog

Sử dụng Vue.js với vue-cli

T.C.Q -

Theo xu hướng gần đây có nhiều hệ thống và nhóm sử dụng vue.js, hòa trong xu thế đó chúng tôi cũng chuyển giao một phần của hệ thống sang vue.js.
Dưới đây tôi xin trình bầy sử dụng Vue.js với vue-cli, hy vọng sẽ giúp gì được cho các bạn đang sử dụng Vue.js

I. Xây dựng môi trường

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.11.6
BuildVersion:   15G1611

$ node -v
v6.11.3

$ npm -v
3.10.10
Để dùng vue-cli thì phải cần cài sẵn node và npm
Về editor, nếu có IDE của Intelli tôi suggest bởi vì nó có plugin của vue.js. Tôi hiện tại đang dùng Pycharm

II. Tạo Project

Đầu tiên, cài đặt vue-cli

$ npm install -g vue-cli

$ vue --version
2.8.2

Tạo project vue init <template> <project-name>
Ở đây, sử dụng template webpack, tạo project tutorial_vuejs_micro_erp

  • Chú ý: Tới ddaaay có một số vấn đề, tạm thời hãy trả lời toàn bộ là "yes"
$ vue init webpack tutorial_vuejs_micro_erp                                       

? Project name tutorial_vuejs_micro_erp
? Project description A Vue.js project
? Author Shintaro Tanaka
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "tutorial_vuejs_micro_erp".

   To get started:

     cd tutorial_vuejs_micro_erp
     npm install
     npm run dev

Documentation can be found at https://vuejs-templates.GitHub.io/webpack

III. Thực thi trên localhost

vue init đã được thực thi, vì vậy hãy thực hiện cậu lệnh sau để bắt đâu

$ cd tutorial_vuejs_micro_erp
$ npm install 
$ npm run dev

Mở trình duyệt voiw địa chỉ localhost:8080 sẽ thấy hình ảnh như dưới đây

IV. Cấu trúc file

Sau khi tạo xong project bằng vue init cấu trúc file sẽ như sau:

tutorial_vuejs_micro_erp$ tree
./index.html
./src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── Hello.vue
├── main.js
└── router
    └── index.js

Mình sẽ nắm được toàn thể nếu xem từng file

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>tutorial_vuejs_micro_erp</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  • Chú ý: hãy nhớ kỹ <div id="app"></div>

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,
  template: '<App/>',
  components: { App }
})

Tại đây, tạo Vue install, kết nối App Component bởi yếu tố id = app của index.html. Tiếp theo là đọc module App, router bởi import.

src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

File này chưa logo của App

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})
Ở đây Hoge Component được giả định, khi truy cập vào /hoge thì routing sẽ trả về Hoge Component.

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/hoge',
      name: 'Hoge',
      component: Hoge
    }
  ]
})

src/components/Hello.vue

Khi truy cập vào router bởi router/index.js thì Hello Component xuât hiện.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.GitHub.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://GitHub.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Bởi vì dài nên chia làm 3 phần

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.GitHub.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://GitHub.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

Nếu loại bỏ {{ msg }} và <template> thì cũng giống như html thông thường thôi

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Thẻ <script> cũng giống như js và cũng định nghĩa giống như {{msg}} phía trên.

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

IV. Vue Component

Vue có 3 thành phần sau:

  • <template> cấu trúc html
  • <script> định nghĩa js và msg trong thân html
  • <style> định nghĩa css
Vue.component('my-component',{
  // オプション
})

V. Các viết data option

Chúng ta có hai cách viết sau:
Cách viết đúng:

// OK
data: function () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }

Cách viết sai:

// NG
data: () => {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }

VI. Tổng kết

Trên đây tôi đã trình bày về cấu trúc đơn giản nhất mà có thể sử dụng được Vue.js, đồng thời mô tả các thành phần cấu thành trong vue.js. Tiếp theo tôi sẽ trình bày về cách lập trình các tính năng thêm, sửa cơ bản sử dụng vue.js

VII. Tham khảo

https://jp.vuejs.org/index.html
https://github.com/vuejs/vue-cli/releases