[VueJS] Tạo 1 project VueJS v2 hoàn chỉnh từ đầu đến cuối – Blog của Tứn

[VueJS] Tạo 1 project VueJS v2 hoàn chỉnh từ đầu đến cuối

1. Khởi tạo project Vue2x

  • Cài đặt những bước cơ bản
    1. Cài đặt Vue CLI npm install -g @vue/cli
    2. Tạo project vue create open_cart2x
    3. Nếu gặp lỗi như bên dưới
      • File …\AppData\Roaming\npm\vue.ps1 cannot be loaded. The file …\AppData\Roaming\npm\vue.ps1 is not digitally signed
      • Chạy câu lệnh Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
    4. chạy lại step 2 vue create open_cart2x
    5. Chọn các option như sau
Chọn feature sẽ sử dụng trong project
Mình sẽ chọn Babel, Router, VueX, Linter/Formatter
Chọn version 2.x
Chọn Eslint và Prettier vì nó phổ biến
Config thêm tí
Config babel ra 1 file riêng thay vì để trong package.json
  • Cấu trúc files trong 1 project vue2x sẽ như sau
Cấu trúc cây thư mục Vue 2x với Router và VueX

2. Chạy Project Vue 2x

  1. Cd tới folder cần chạy cd open_cart2x
  2. Chạy câu lệnh npm run serve
  3. Nếu thấy xuất hiện màn hình là thành công
  4. Tiếp theo chúng ta cần thêm vue-router vào cho source code vue add router
  5. Xem file App.vue. chúng ta sẽ thấy vue-router đã được thêm vào
  6. Khởi động app lên npm run serve
Màn hình khi hoàn thành

F G+ T

tuandph

Khởi đầu với .NET từ năm 2013 đến nay. Hiện tại mình đang làm full-stack developer. Yêu thích lập trình & chia sẽ kiến thức. Thời gian rảnh thường làm những tool vui vui và viết lách kể lệ sự đời.