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