Trang web SFC đầu tiên của chúng tôi
Để tạo trang web SFC đầu tiên của chúng tôi từ đầu, chúng tôi sẽ:
- Tạo một dự án Vue sạch mới
- Viết mã vào tệp 'App.vue'
- Xem cách trang web tự động cập nhật trong quá trình phát triển
- Xây dựng trang để sản xuất
Tạo một dự án sạch
Bây giờ chúng tôi sẽ xóa tất cả nội dung trong dự án mẫu mà chúng tôi đã thực hiện trên trang trước để tạo trang web đơn giản của riêng mình trong Vue.
Trước khi chúng ta bắt đầu viết mã, hãy xóa tất cả nội dung bên trong các thẻ <template>
, <script>
và <style>
, đồng thời xóa mọi thuộc tính như 'setup' hoặc 'scoped'.
Tệp 'App.vue' của bạn bây giờ sẽ trông như thế này:
App.vue:
<script></script>
<template></template>
<style></style>
Đồng thời xóa các thư mục 'tài sản' và 'thành phần' bên trong thư mục 'src'.
Xóa dòng nơi nội dung được nhập bên trong tệp 'main.js' để 'main.js' trông như thế này:
main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Bây giờ chúng tôi có một dự án trống để làm việc.
Viết mã trong 'App.vue'
Bây giờ chúng ta đã có một dự án sạch, hãy thêm tiêu đề bên trong thẻ <template>
, như sau:
<template>
<h1>Hello World!</h1>
</template>
<script></script>
<style></style>
Lưu tệp 'App.vue', truy cập trình duyệt của bạn bằng cách nhấp vào liên kết localhost trong terminal. Bạn có thấy kết quả không? Trình duyệt giờ đây sẽ tự động cập nhật mỗi khi bạn lưu thay đổi trong Mã VS mà không cần phải làm mới trình duyệt theo cách thủ công.
Bây giờ chúng ta hãy xem một ví dụ Vue lớn hơn một chút:
Ví dụ
App.vue
:
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'This is some text'
};
}
};
</script>
<style></style>
Chạy ví dụ » Lưu ý: Trong ví dụ trên, export default
giúp 'main.js' có thể lấy dữ liệu bằng import App from './App.vue'
để có thể gắn dữ liệu đó vào <div id="app">
thẻ bên trong 'index.html'.