Basic Vue.js 3 – Setup Project and Tool

Step 1 : ติดตั้ง Vue CLI

ตรวจสอบ Vue CLI ของเดิมก่อน

vue --version

ถ้าต้องการติดตั้งใหม่ ก็ถอนของเดิมออกก่อน

npm uninstall -g @vue/cli

ติดตั้ง Vue CLI

npm install -g @vue/cli

Step 2 : ติดตั้ง chrome extensions

• Vue.js devtools

Step 3 : สร้างโปรเจ็กต์ Vue.js ด้วย Vue ClI

รัน คำสั่งใน  folder ที่ต้องการเอาโปรเจ็กไปไปวาง

vue create [project_name]

ตัวอย่าง
vue create vue3basic

config project

? Please pick a preset
> Manually select features


? Please pick a preset: Manually select features
 (*) Babel
 (*) Router
  (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
? Please pick a preset: Manually select features
> 3.x

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
Y

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)

? Pick a linter / formatter config ?
> ESLint with error prevention only

? Pick additional lint features ?
>(*) Lint on save

? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files

? Save this as a preset for future projects? (y/N)
N

สั่งรับ project ดัวยคำสั่ง ** สั่งใน path ของ project  นะครับ

npm run serve

สั่ง build project หลังจากรันจะได้ folder dist เพิ่มมา

npm run build

ลง serve เพื่อทดสอบรัน projact ที่ build แล้ว

npm install -g serve

สั่งรับ project

serve -s dist