[Vue2#2] สร้างโปรเจค Vue2 และ Webpack ด้วย vue-cli

เช่นเดียวกับ Ember และ Angular2 Vue ก็เป็นอีกหนึ่งโปรเจคที่มี CLI ไว้ช่วยสร้างโปรเจคอย่างง่ายดาย บทความนี้เราจะมาลองสร้างโปรเจคอย่างรวดเร็วไปกับ vue-cli กันครับ

รู้จัก vue-cli

vue-cli เป็นตัวช่วยสร้างโปรเจคครับ มันช่วยสร้างอย่างไรเราคงไม่รู้เป็นแน่ถ้าไม่เริ่มจากลองติดตั้งมันก่อน

1$ npm install -g vue-cli

หลังจากติดตั้ง vue-cli ไว้ในเครื่องแล้วก็ถึงเวลาใช้งานแล้วหละ แต่ก่อนอื่นต้องเข้าใจสิ่งที่เรียกว่า template ใน vue-cli ก่อนครับ

vue-cli นั้นไม่ได้ฉลาดแบบ ember-cli จากฝั่ง Ember.js ครับ สิ่งที่ vue-cli ทำความจริงมีหนึ่งเดียว (ทำหน้าแบบโคนัน) คือคัดลอกโครงสร้างไฟล์ทั้งหมดจาก template ที่เตรียมไว้ก่อนแล้ว เพียงแต่การคัดลอกนั้นก็มีการเปลี่ยนแปลงบางส่วนบ้าง อย่างน้อยก็ต้องเปลี่ยนชื่อโปรเจคให้เราใช่ไหมหละ

ตัว template ที่ว่าเนี่ยครับ มีให้เราเลือกใช้งานหลากหลายขึ้นอยู่กับว่าเราต้องการใช้เครื่องมืออะไร เช่น Webpack หรือ Browserify โดย template ที่ vue-cli จัดเตรียมไว้ให้ในเบื้องต้น เช่น

• webpack
• webpack-simple
• webpack-simple-2.0
• browserify
• browserify-simple

ตัวที่ผมแนะนำให้ใช้เป็นอย่างยิ่งคือ webpack ครับ template ตัวนี้เป็นอะไรที่จัดเต็มมาก เพียงแค่เพื่อนๆใช้ template ตัวนี้ในการสร้างโปรเจค เพื่อนๆก็จะได้ความสามารถทั้งการใช้ Webpack, vue-loader, ESLint, Unit test, end-to-end Test, SASS และอื่นๆอีกมากมาย โดยไม่ต้องปวดหัวมานั่งตั้งค่าเองทีละตัว

สำหรับชุดบทความนี้เราเลือกใช้ webpack-simple-2.0 ครับ ตามชื่อเลยครับ template นี้ชื่อ simple มันก็เลยง่าย ง่ายจริงๆครับ ง่ายชนิดที่ว่าเอาไปใช้จริงบน production ไม่ได้ครับ ถึงอย่างไรเราก็ไม่มีทางเลือกครับ เพราะในขณะที่เขียนบทความ webpack-simple-2.0 เป็น template ตัวเดียวที่สนับสนุนการใช้งาน Vue.js 2.0

เอาหละเมื่อเพื่อนๆเข้าใจเรื่องของ template เป็นอย่างดีแล้ว เรามาลงมือสร้างโปรเจคของเรากันครับ ในที่นี้เราเลือกใช้ webpack-simple-2.0 เป็น template ของเรา โดยใช้ชื่อโปรเจคว่า vue2-series-wiki

1$ vue init webpack-simple-2.0 vue2-series-wiki

หลังจากออกคำสั่งนี้ก็จะมีคำถามเด้งขึ้นมาถามนิดหน่อย ให้เราตั้งชื่อโปรเจค คำอธิบายโปรเจค และผู้สร้างครับ

1? Project name vue2-series-wiki
2? Project description Series Wiki
3? Author n_thongjor <n.thongjor@gmail.com>

การคัดลอก template มาไว้ในโปรเจคเพื่อนๆก็เสร็จสิ้นแล้ว แต่ช้าก่อนตอนนี้เพื่อนๆยังทำงานไม่ได้ครับ เพราะเราแค่คัดลอก template มาเฉยๆ แต่ยังไม่ได้ติดตั้ง package ต่างๆที่จะใช้ทำงานเลย สั่งคำสั่งต่อไปนี้เพื่อติดตั้ง package ทั้งหมดที่จะใช้ครับ

1$ npm install

สำหรับเพื่อนๆที่สนใจว่ามี template อื่นอีกไหมที่เป็น template ทางการของ vue-cli อัญเชิญเข้าไปชื่นชมได้ที่ vuejs-templates เลยครับ

โครงสร้างไฟล์ของ webpack-simple-2.0

แอบส่องดูกันซิว่า webpack-simple-2.0 สร้างไฟล์อะไรให้เราบ้าง เริ่มจาก package.json เลยครับ

1{
2  "name": "vue2-series-wiki",
3  "description": "Series Wiki",
4  "author": "n_thongjor <n.thongjor@gmail.com>",
5  "private": true,
6  "scripts": {
7    "dev": "webpack-dev-server --inline --hot",
8    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
9  },
10  "dependencies": {
11    "vue": "^2.0.0-beta.5"
12  },
13  "devDependencies": {
14    "babel-core": "^6.0.0",
15    "babel-loader": "^6.0.0",
16    "babel-preset-es2015": "^6.13.2",
17    "cross-env": "^1.0.6",
18    "css-loader": "^0.23.1",
19    "file-loader": "^0.8.4",
20    "vue-loader": "^9.2.2",
21    "webpack": "^2.1.0-beta.20",
22    "webpack-dev-server": "^2.1.0-beta.0"
23  }
24}

เราจะพบว่าบรรทัดที่ 7 - 8 ตัว template เตรียมสองคำสั่งไว้ให้ใช้งานครับนั่นคือ dev สำหรับทำงานบน development และ build สำหรับการสร้างไฟล์ผลลัพธ์เพื่อเอาไปใช้งานจริง

สิ่งที่น่าสนใจของ template นี้คือ เรากำลังจะได้ใช้ vue.js 2.0 beta5 ครับบน Webpack 2.1.0 beta มี Babel ติดตั้งมาให้เรียบร้อยใช้ ES2015 ได้อย่างหายห่วงเลยครับ นอกนั้นก็ไม่มีอะไรให้น่าสนใจเลยให้ตายเถอะ!

โค๊ดทั้งหมดที่เราจะเขียนอยู่ภายใต้ src ครับ โดยมี main.js เป็นจุดเริ่มต้น และต่อไปนี้คือโครงสร้างของไฟล์ที่ได้จากการสร้างด้วย template นี้

1vue2-series-wiki
2|--- src
3     |--- assets
4          |--- logo.png
5     |--- App.vue
6     |--- main.js
7|--- .babelrc
8|--- .gitignore
9|--- index.html
10|--- package.json
11|--- README.md
12|--- webpack.config.js

เอาหละครับ ถึงเวลาลองรันโปรเจคขึ้นมาดูแล้ว อย่าคิดมากแค่สั่ง npm run dev

1C:\Projects\vue2-series-wiki>npm run dev
2
3> vue2-series-wiki@ dev C:\Projects\vue2-series-wiki
4> webpack-dev-server --inline --hot
5
6 http://localhost:8080/
7webpack result is served from /dist/
8content is served from C:\Projects\vue2-series-wiki
9404s will fallback to /index.html

เมื่อเข้าไปที่ http://localhost:8080/ หากพบหน้าจอแบบนี้แล้วหละก็แสดงว่าคุณได้ไปต่อครับ...

เราจะทำแอพพลิเคชันอะไรในชุดบทความนี้?

ชุดบทความนี้เราจะสร้างวิกิกันครับ ใช่แล้วฮะมันคือวิกิตัวเดียวกับที่ปรากฎในชุดบทความ สอนสร้าง Isomorphic Application ด้วย React.js และ Redux ใน 5 วัน นั่นเอง ทั้งนี้เพื่อประโยชน์ของผู้อ่านจะได้ง่ายต่อการเปรียบเทียบวิธีการเขียนและใช้งานที่แตกต่างกันระหว่าง Vue2 และ React ครับ

Wiki ของเราจะมีส่วนหลักๆคือหน้า Homepage หน้า Page และหน้า About ครับ ในส่วนของ Page นั้นเราต้องสามารถทำการดู Wiki Page ได้ทั้งหมด สามารถสร้าง Page ใหม่ได้รวมถึงสามารถแก้ไขได้ด้วย แต่ไม่อนุญาตให้ลบ