學習Vue.js #01 開發環境建置
近年來Javascript居然越來越嚴謹，基於Javascript之上的應用如雨後春筍般出現！
先是node.js再來是Vue.js，接下來還是很有淺力的樣子？連以前從來不碰Javascript的教授都開始學node.js！
為什麼要用Vue.js？因為想要用Vue.js接其他套件將動態網頁轉成靜態～
總之，來試試看吧！
Step 1
確認有沒有安裝node.js
|
1 |
Andy-MBP:~ Andy$ node -v |
若沒安裝node，請直接用『brew install node』安裝。
注意，安裝時不需要用sudo！否則之後要npm安裝套件時會出問題！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Andy-MBP:~ Andy$ brew install node Updating Homebrew... ==> Auto-updated Homebrew! Updated 1 tap (homebrew/core). ==> Updated Formulae aws-sdk-cpp bit citus coffeescript consul nailgun ==> Downloading https://homebrew.bintray.com/bottles/node-9.5.0.sierra.bottle.tar.gz Already downloaded: /Users/Andy/Library/Caches/Homebrew/node-9.5.0.sierra.bottle.tar.gz ==> Pouring node-9.5.0.sierra.bottle.tar.gz ==> Caveats Bash completion has been installed to: /usr/local/etc/bash_completion.d ==> Summary ? /usr/local/Cellar/node/9.5.0: 5,125 files, 49.7MB Andy-MBP:~ Andy$ node -v v9.5.0 Andy-MBP:~ Andy$ npm -v 5.6.0 |
Step 2
安裝Vue.js
用npm安裝Vue現在的最後穩定版(latest stable)『 npm install -g vue 』
記得加上『 -g 』global 全域之意！
安裝完畢後看一下Vue.js有沒有裝好！『 vue -V 』
|
1 2 3 4 |
Andy-MBP:~ Andy$ npm install -g vue-cli (...過程省略) Andy-MBP:~ Andy$ vue -V 2.9.3 |
Step 3
檢查有無安裝yarn
贊助廣告
列出npm之下裝了哪些軟體『 npm -g list –depth=0 』
|
1 2 3 4 5 6 |
Andy-MBP:~ Andy$ npm -g list --depth=0 /usr/local/lib ├── npm@5.6.0 ├── npm-check-updates@2.14.0 ├── vue-cli@2.9.3 └── yarn@1.3.2 |
接下來所有Vue.js專案都會以yarn來新建Vue.js專案與管理屬於各專案自身所需的軟體！
(但也可以選擇不要～只是因為yarn速度比較快而已)
可以透過上步驟的指令檢查有沒有yarn
若無安裝，一樣直接用npm安裝！『 npm install -g yarn 』
Step 4
建立Vue.js專案
『 vue init webpack <專案名稱>』
過程中Vue會問一系列10個問題，有的是需要你輸入Y/n，有的是用選的。
請依據自己的需求設定！
其中第12行就是在問你要使用 npm 或 yarn 來建立專案：
由於上面步驟已經先安裝yarn ，所以我選擇 yarn，速度會比較快～
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
Andy-MBP:Vue.js Andy$ vue init webpack hello_vue ? Project name hello_vue ? Project description This is my first Vue.js project. ? Author Polun.Wang <polun.wang@gmail.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) yarn vue-cli · Generated "hello_vue". # Installing project dependencies ... # ======================== (省略過程...) # Project initialization finished! # ======================== To get started: cd hello_vue npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack |
Step 5
執行Vue.js專案
進入Vue.js專案資料夾，執行專案『 yarn run dev 』
|
1 2 |
Andy-MBP:Vue.js Andy$ cd hello_vue Andy-MBP:hello_vue Andy$ yarn run dev |
|
1 2 3 |
DONE Compiled successfully in 5362ms 上午1:06:03 I Your application is running here: http://localhost:8080 |
