建立 Vue.js 專案的工具，對於 Node.js 工具熟悉的開發者，推薦使用 vue-cli。
1.安裝Node.js官方版本
https://nodejs.org/en/download/
Latest LTS Version: 8.12.0 (includes npm 6.4.1) 2018-09-26
2.Node.js 版本及更新常用指令
node -v #檢查 Node.js 的版本
更新 Node.js 到最新版本
Windows
C:\Users> npm cache clean -f #清除 npm 快取 C:\Users> npm install -g n #安裝 n，n 是管理 Node.js 版本的 module C:\Users> n stable #安裝穩定版的 Node.js C:\Users> node -v #確認目前的版本
Linux
[root@ip-1-31-37-203 ~]# nvm
Node Version Manager
Usage:
nvm help Show this message
nvm --version Print out the latest released version of nvm
nvm install [-s] <version> Download and install a <version>, [-s] from source
nvm uninstall <version> Uninstall a version
nvm use <version> Modify PATH to use <version>
nvm run <version> [<args>] Run <version> with <args> as arguments
nvm current Display currently activated version
nvm ls List installed versions
nvm ls <version> List versions matching a given description
nvm ls-remote List remote versions available for install
nvm deactivate Undo effects of NVM on current shell
nvm alias [<pattern>] Show all aliases beginning with <pattern>
nvm alias <name> <version> Set an alias named <name> pointing to <version>
nvm unalias <name> Deletes the alias named <name>
nvm copy-packages <version> Install global NPM packages contained in <version> to current version
Example:
nvm install v0.10.24 Install a specific version number
nvm use 0.10 Use the latest available 0.10.x release
nvm run 0.10.24 myApp.js Run myApp.js using node v0.10.24
nvm alias default 0.10.24 Set default node version on a shell
Note:
to remove, delete or uninstall nvm - just remove ~/.nvm, ~/.npm and ~/.bower folders
[root@ip-1-31-37-203 ~]# nvm install v6.11.0
3.npm 版本及更新常用指令
檢查 npm 的版本
npm -v
更新 npm 到最新版本
npm update -g npm
4.vue進行專案建立流程
安裝 vue-cli
npm install -g vue-cli
利用 vue-cli 建立專案
vue init <template-name> <project-name> template-name 有 5 種選擇 webpack：含有完整專案常用的 webpack、vue-loader、hot reload、linting、testing、css extraction webpack-simple：上一個選項 webpack 的簡易版，含有 webpack、vue-loader browserify：含有完整專案常用的 browserify、vueify、hot-reload、linting、unit testing browserify-simple：上一個選項 browserify 的簡易版，含有 browserify、vueify simple：只含有 index.html 備註：live-reload 是程式更新時畫面自動重新載入，而 hot reload 是程式更新但不重新載入畫面，好處是資料不用重新輸入。
執行init建立專案
C:\Users>vue init webpack project-001
'git' is not recognized as an internal or external command,
operable program or batch file.
? Project name project-001
? Project description this is a sample project
? Author Leo
? Vue build (Use arrow keys)
? 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) (Use arrow k
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "project-001".
# Installing project dependencies ...
# ========================
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 conf
ig used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 confi
g used in other tools.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a s
erious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated @types/commander@2.12.2: This is a stub types definition for commander (https://
github.com/tj/commander.js). commander provides its own type definitions, so you don't need @types/c
ommander installed!
> chromedriver@2.42.0 install D:\hosting\project-001\node_modules\chromedriver
> node install.js
Downloading https://chromedriver.storage.googleapis.com/2.42/chromedriver_win32.zip
Saving to C:\Users\Blackie\AppData\Local\Temp\5\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1566K...
Received 2350K...
Received 3134K...
Received 3499K total.
Extracting zip contents
Copying to target path D:\hosting\project-001\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at D:\hosting\project-001\node_modules\chromedriver\lib\chromedr
iver\chromedriver.exe
> uglifyjs-webpack-plugin@0.4.6 postinstall D:\hosting\project-001\node_modules\webpack\node_modules
\uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":
"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1603 packages from 1072 contributors and audited 30793 packages in 102.492s
found 7 vulnerabilities (1 low, 1 moderate, 4 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
Running eslint --fix to comply with chosen preset rules...
# ========================
> project-001@1.0.0 lint D:\hosting\project-001
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"
# Project initialization finished!
# ========================
To get started:
cd project-001
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
選擇第一個選項 webpack，建置完畢後，app 的檔案結構如下
安裝vue相關套件及常用指令
cd project-001 #移動到專案中 npm install #安裝相依套件 npm run dev #執行 #project-001\package.json有相關的執行資訊，可以參考看看
在瀏覽器網址列打上http://localhost:8008，即可看到
預設 port 號是 8080，可到config/index.js變更，例如改成 8081
