Ra mắt hai series mới cực hot Trí tuệ nhân tạo A đến ZPython công cụ không thể thiếu khi nghiên cứu Data science, Machine learning.

Vue-cli xây dựng ứng dụng mẫu Vue.js trong nháy mắt

Các công cụ dòng lệnh (CLI - Command Line Interface) hiện là những tính năng không thể thiếu cho một framework, nó giúp xây dựng các template một cách nhanh chóng. Nếu bạn đã làm việc với framework PHP Laravel thì có thể biết đến artisan, còn với Vue.js có công cụ Vue-CLI cũng giúp bạn xây dựng một ứng dụng mẫu rất nhanh chỉ với vài dòng lệnh.

Cài đặt Vue-CLI

Trước tiên, chúng ta cần cài đặt Vue-CLI thông qua npm hoặc yarn, đầu tiên chúng ta kiểm tra xem máy đã cài đặt Node.js chưa và npm hoặc yarn đã được cập nhật phiên bản cuối chưa:

node -v
npm -v
npm install npm@latest -g

Tiếp theo, cài đặt Vue-CLI thôi:

npm install -g vue-cli

hoặc thông qua yarn

yarn add -global vue-cli

Xây dựng ứng dụng mẫu đầu tiên bằng Vue-cli

Vue-cli cho phép bạn xây dựng nhanh một ứng dụng mẫu thông qua câu lệnh vue init webpack .-

  c:\>vue init webpack my-app

    This will install Vue 2.x version of the template.

    For Vue 1.x use: vue init webpack#1.0 my-app

  ? Project name my-app
  ? Project description A Vue.js project
  ? Author Kien Dang <kiendang@allaravel.com>
  ? Vue build standalone
  ? Install vue-router? Yes
  ? Use ESLint to lint your code? Yes
  ? Pick an ESLint preset Standard
  ? Setup unit tests with Karma + Mocha? Yes
  ? Setup e2e tests with Nightwatch? Yes

     vue-cli · Generated "my-app".

     To get started:

       cd my-app
       npm install
       npm run dev

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

Tiếp theo, như bạn đã thấy trong phần gợi ý, thực hiện lệnh npm install để cài đặt các gói cần thiết cho ứng dụng mẫu.

c:\my-app>npm install
[..................] / normalizeTree: sill install loadCurrentTree

Sau đó, thực hiện chạy ở chế độ dev

c:\my-app>npm run dev

> my-app@1.0.0 dev c:\my-app
> node build/dev-server.js

> Starting dev server...

 DONE  Compiled successfully in 5885ms                                3:06:30 PM

> Listening at http://localhost:8080

Khi đó, một tab trong trình duyệt sẽ được tự động bung ra với địa chỉ http://localhost:8080 với màn hình như sau:

Ứng dụng mẫu Vuejs tạo bằng vue-cli

Viết code từ ứng dụng mẫu Vue

Như vậy chúng ta đã tạo ra một ứng dụng mẫu Vue.js và có cài đặt sẵn vue-router, do đó việc tạo ra các ứng dụng đơn trang SPA là hết sức đơn giản. Trong thư mục dự án, chúng ta sẽ thường xuyên làm việc với thư src bởi nó chứa các mã nguồn (các file .vue) để chạy cho cả ứng dụng.

Thư mục mã nguồn trong ứng dụng mẫu Vue.js

Trong thư mục này có các thành phần như sau:

  • File main.js: đây chính là nơi ứng dụng Vue bắt đầu chạy.
  • File App.vue: là component được dùng để render cho trang index.html.
  • Thư mục assets: chứa các tài nguyên được chèn vào trang như ảnh, file nhạc...
  • components: chứa các component được thiết kế để module hóa ứng dụng Vue, giúp tái sử dụng và bảo trì mã nguồn tốt hơn.
  • router: thư mục chứa các router thực hiện trong ứng dụng.

Ví dụ: tạo ra thêm một đường dẫn /contact để ra trang liên hệ, /news để ra trang tin tức. Tìm đến file router/index.js và thêm vào như sau:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Contact from '@/components/Contact'
import News from '@/components/News'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    },
    {
      path: '/news',
      name: 'News',
      component: News
    }
  ]
})

Tạo hai file Contact.vue và News.vue trong thư mục components, Contact.vue có nội dung như sau:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Contact page</h2>
    <router-link to="/contact">Contact</router-link>
    <router-link to="/news">News</router-link>
  </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;
}

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

News.vue có nội dung như sau:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>News page</h2>
    <router-link to="/contact">Contact</router-link>
    <router-link to="/news">News</router-link>
  </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;
}

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

Thay đổi lại nội dung Hello.vue như sau:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <router-link to="/contact">Contact</router-link>
    <router-link to="/news">News</router-link>
  </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;
}

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

Khi đó quay lại màn hình ứng dụng mẫu trên trình duyệt chúng ta thấy giao diện nó đã tự động thay đổi nếu bạn vẫn để nguyên màn hình console chạy lệnh npm run dev do nó tự động kiểm tra nếu có thay đổi nó sẽ tự động biên dịch lại.

Demo ứng dụng mẫu Vue

Như vậy, chúng ta đã biết cách tạo ra ứng dụng mẫu và thực hiện phát triển các trang theo mong muốn thông qua việc thêm vào các component và viết lại route trong router/index.js. Chú ý, để thoát khỏi chế độ run dev bấm tổ hợp phím Ctrl + C.

Build ứng dụng để triển khai trên server

Trên đây, chúng ta thực hiện viết code trong chế độ run dev để tiện cho việc thiết kế thời gian thực giao diện cũng như các tính năng khác. Khi các giao diện và tính năng của ứng dụng đã được kiểm tra cẩn thận, bước tiếp theo chúng ta thực hiện build ứng dụng để triển khai trên server. Công việc này rất đơn giản chỉ cần bạn thực hiện lệnh npm run build:

c:\my-app>npm run build

> my-app@1.0.0 build c:\my-app
> node build/build.js

| building for production...
Starting to optimize CSS...
Processing static/css/app.2584b59a8b9c740f6fdee71119c5740c.css...
Processed static/css/app.2584b59a8b9c740f6fdee71119c5740c.css, before: 503, afte
r: 435, ratio: 86.48%
Hash: 977b05df6fa061796405
Version: webpack 2.5.1
Time: 14525ms
                                                  Asset       Size  Chunks
       Chunk Names
                  static/js/app.9151e8d7152742ad35d8.js      12 kB       0  [emi
tted]  app
               static/js/vendor.3e1e97cd3826acd46124.js     106 kB       1  [emi
tted]  vendor
             static/js/manifest.ea88a47881da8c59d628.js     1.5 kB       2  [emi
tted]  manifest
    static/css/app.2584b59a8b9c740f6fdee71119c5740c.css  435 bytes       0  [emi
tted]  app
              static/js/app.9151e8d7152742ad35d8.js.map    41.6 kB       0  [emi
tted]  app
static/css/app.2584b59a8b9c740f6fdee71119c5740c.css.map    1.25 kB       0  [emi
tted]  app
           static/js/vendor.3e1e97cd3826acd46124.js.map     846 kB       1  [emi
tted]  vendor
         static/js/manifest.ea88a47881da8c59d628.js.map    14.4 kB       2  [emi
tted]  manifest
                                             index.html  443 bytes          [emi
tted]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

Khi thực hiện xong run build sẽ thấy trong thư mục dự án xuất hiện thêm thư mục dist (distribution: phân phối, xuất bản), đây chính là thư mục chứa các file được build để triển khai trên server, bạn chỉ cần upload toàn bộ thư mục này lên server là chạy được, chú ý nếu chạy bằng cách click trực tiếp vào index.html trong thư mục dist sẽ không chạy được. Mở các file index.html và các file javascript, css bạn sẽ thấy là chúng đã được đóng gói và minify tối đa do ứng dụng mẫu Vue.js này đã được cài đặt sẵn gói Webpack - công cụ đóng gói thư viện lập trình.

Lời kết

Với công cụ vue-cli chúng ta có thể tạo ra các ứng dụng mẫu Vue thực sự nhanh chóng và chỉ cần chú tâm vào việc viết code các trang, tính năng cần thực hiện. Ngay cả các file cấu hình cho npm, yarn hay webpack cũng được tự động tạo ra, chúng ta chỉ việc cài đặt thêm các gói thư viện cần thiết và thực hiện viết code.


CÁC BÀI VIẾT KHÁC

FirebirD

Đam mê Toán học, Lập trình. Sở thích chia sẻ kiến thức, Phim hài, Bóng đá, Cà phê sáng với bạn bè.

Đóng gói Webpack với nhiều file đầu vào và nhiều file kết quả

Lập trình hướng đối tượng trong PHP - Phần 2: Tính kế thừa

1 Bình luận trong "Vue-cli xây dựng ứng dụng mẫu Vue.js trong nháy mắt"

  1. Huy

    1 year ago

    Phản hồi
    Bạn cho mình hỏi làm cách nào để đưa thư mục plugin từ bên ngoài vào dự template vue-cli. Thư mục plugin bỏ ở đâu trong dự án, cách khai báo và sử dụng như thế nào nếu chúng ta không cài plguin từ npm. Mình đang gặp vấn đề này. Mong chỉ giúp Thanks

Thêm bình luận