In Tone

[vue]建立 Vue.js 專案的工具

建立 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

小幫手

, , , ,