一，安裝node.js
二，打開Node.js command prompt
三，執行命令
1.安裝vue-cli
C:\deve\workspace\myproject>npm install -g vue-cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\Dong\AppData\Roaming\npm\vue-init -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\Dong\AppData\Roaming\npm\vue -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\Dong\AppData\Roaming\npm\vue-list -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ [email protected]
added 239 packages from 206 contributors in 32.501s
2.修改chromedriver配置
C:\deve\workspace\myproject>npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
> [email protected] install C:\deve\workspace\myproject\node_modules\chromedriver
> node install.js
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: http://cdn.npm.taobao.org/dist/chromedriver/75.0.3770.8/chromedriver_win32.zip
Saving to file: C:\Users\Dong\AppData\Local\Temp\75.0.3770.8\chromedriver\chromedriver_win32.zip
Received 783K...
Received 1600K...
Received 2387K...
Received 3179K...
Received 3961K...
Received 4549K total.
Extracting zip contents
Copying to target path C:\deve\workspace\myproject\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\deve\workspace\myproject\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
npm WARN saveError ENOENT: no such file or directory, open 'C:\deve\workspace\myproject\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\deve\workspace\myproject\package.json'
npm WARN myproject No description
npm WARN myproject No repository field.
npm WARN myproject No README data
npm WARN myproject No license field.
+ [email protected]
added 28 packages from 56 contributors and audited 1992 packages in 11.318s
found 0 vulnerabilities
3.創建項目名爲my-project的項目
C:\deve\workspace\myproject>vue init webpack my-project
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
? Project name my-project
? Project description A Vue.js project
? Author sagitarioo
? 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) npm
vue-cli · Generated "my-project".
# Installing project dependencies ...
# Project initialization finished!
# ========================
To get started:
cd my-project
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
4.啓動
C:\deve\workspace\myproject>cd my-project
C:\deve\workspace\myproject\my-project>npm install
npm WARN [email protected] requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
audited 31720 packages in 14.387s
found 84 vulnerabilities (65 low, 8 moderate, 10 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
C:\deve\workspace\myproject\my-project>npm run dev
> [email protected] dev C:\deve\workspace\myproject\my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
12% building modules 24/31 modules 7 active ...pace\myproject\my-project\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "bab 95% emitting
DONE Compiled successfully in 7514ms 11:28:18 PM
I Your application is running here: http://localhost:8080
5.打開瀏覽器
配置vue圖形界面
vue ui 是3.0才推出的版本，我使用的時候最新穩定版爲2.9.6，所以沒有這個功能，故要安裝最新的vue
C:\deve\workspace\myproject>npm install -g @vue/cli
C:\Users\Dong\AppData\Roaming\npm\vue -> C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
> [email protected] postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js
> node scripts/postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> [email protected] postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js-pure
> node scripts/postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> [email protected] postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\protobufjs
> node scripts/postinstall
> [email protected] postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @vue/[email protected]
added 809 packages from 541 contributors in 105.459s
啓動vue ui
C:\deve\workspace\myproject>vue ui
🚀 Starting GUI...
🌠 Ready on http://localhost:8000
其他
第一次嘗試沒有使用官方腳手架，是參考的這篇文章：隨我來基於webpack構建一個簡易的vue腳手架 (webpack系列二) - 努力學會微笑 - segmentfault
按照該教程的步驟來搭建。由於插件版本問題，會報一個錯：
C:\deve\vue-cli\vues>npm run dev
> [email protected] dev C:\deve\vue-cli\vues
> webpack-dev-server --open --hot
C:\deve\vue-cli\vues\webpack.config.js:30
new CleanWebpackPlugin(['dist']), // 告訴清理插件的目錄
^
TypeError: CleanWebpackPlugin is not a constructor
at Object.<anonymous> (C:\deve\vue-cli\vues\webpack.config.js:30:5)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at WEBPACK_OPTIONS (C:\deve\vue-cli\vues\node_modules\webpack-cli\bin\utils\convert-argv.js:116:13)
at requireConfig (C:\deve\vue-cli\vues\node_modules\webpack-cli\bin\utils\convert-argv.js:118:6)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --open --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Dong\AppData\Roaming\npm-cache\_logs\2019-06-13T14_14_25_609Z-debug.log
需要修改位置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清理構建目錄下的文件
plugins:[
new CleanWebpackPlugin(), // 告訴清理插件的目錄
],
運行效果：
代碼可參考：https://github.com/Sagitarioo/Personal/tree/master/study
由於node_modules文件夾中的小文件太多，故沒有同步。
目錄結構：
vues
├─node_modules
│ ├─.bin
│ ├─@types
│ ├─@vue
│ └─...
├─src
│ ├─app.vue
│ └─index.js
├─index.html
├─package.json
└─webpack.config.js