![image](/uploads/images/nuxtjs-1024x678.jpeg)
Cài đặt global nuxtjs với lệnh kiểm tra cài đặt Tạo ứng dụng đầu tiên bằng lệnh ở đây mình chọn vuetifyjs làm framework giao diện chạy yarn dev là chạy lên giao diện demo rồi Thêm config env vào file nuxt.config.js Thêm docker-compose.yml Dockerfile Thêm thư viện vuex
Cài đặt global nuxtjs với lệnh
npm install -g create-nuxt-app
kiểm tra cài đặt
create-nuxt-app --version
Tạo ứng dụng đầu tiên bằng lệnh
yarn create nuxt-app
ở đây mình chọn vuetifyjs làm framework giao diện
chạy yarn dev là chạy lên giao diện demo rồi
Thêm config env vào file nuxt.config.js
env: {
API_URL: process.env.API_URL || ''
}
Thêm docker-compose.yml
version: "3"
services:
nuxt:
build: .
container_name: nuxt_demo
image: nuxt_demo
restart: always
ports:
- "3000:3000"
command: "yarn start"
environment:
API_URL: ""
network_mode: bridge
Dockerfile
FROM node:14.17.3
ENV APP_ROOT /src
ENV PORT 3000
RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
ADD . ${APP_ROOT}
RUN yarn install
RUN yarn build
ENV HOST 0.0.0.0
Thêm thư viện vuex
yarn add vuex
Thêm store cho dự án bằng cách tạo file index.js trong folder store
export const state = () => ({
email: '',
name: '',
isLogon: false
})
export const mutations = {
setLogin(state, email, name) {
state.email = email
state.name = name
state.isLogon = true
},
setLogout(state) {
state.email = ""
state.name = ""
state.isLogon = false
}
}
file layouts/default.vue sửa script như sau
import {mapState} from 'vuex'
export default {
name: 'DefaultLayout',
computed: {
...mapState([
'name',
'email',
'isLogon'
])
},
data () {
return {
clipped: false,
drawer: false,
fixed: false,
items: [
{
icon: 'mdi-apps',
title: 'Welcome',
to: '/'
},
{
icon: 'mdi-chart-bubble',
title: 'Catgory',
to: '/category'
}
],
miniVariant: false,
right: true,
rightDrawer: false,
title: 'Vuetify'
}
},
methods: {
logout() {
sessionStorage.clear();
this.$store.commit('setLogout')
},
login() {
// dùng axios xử lý login tại đây ở đay mình fake login luôn
const email = 'email@gmail.com'
const name = 'Trần Văn A'
this.$store.commit('setLogin', email, name)
}
}
}
giải thích thêm về các vòng đời của một instance trong Vue được mô tả như sau
vuejs lifecycle
có thể download source code mẫu tại đây