Vue-cli xây dựng ứng dụng mẫu Vue.js trong nháy mắt
NỘI DUNG BÀI VIẾ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 -gCode language: CSS (css)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-cliCode language: PHP (php)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/webpackCode language: CSS (css)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:8080Code language: CSS (css)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:
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.
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
}
]
})Code language: JavaScript (javascript)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>Code language: HTML, XML (xml)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>Code language: HTML, XML (xml)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>Code language: HTML, XML (xml)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.
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.Code language: JavaScript (javascript)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ảm ơn các bạn đã đọc.
Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
Nguồn tham khảo: Allaravel
Leave a Reply