Step 1 : ติดตั้ง Vue CLI
ตรวจสอบ Vue CLI ของเดิมก่อน
vue --version
ถ้าต้องการติดตั้งใหม่ ก็ถอนของเดิมออกก่อน
npm uninstall -g @vue/cli
ติดตั้ง Vue CLI
npm install -g @vue/cli
Step 2 : ติดตั้ง chrome extensions
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