2 VUE基礎：基本認知
自從近幾年前後端分離模式開始後，作爲從事後端開發的我，爲了跟上時代的步伐，或者能夠跟現在的年輕人交流，開始了自學VUE的學習之旅。再次記錄學習中的點點滴滴，爭取把學習過程中的九九八十一難都記錄下來，作爲自己學習的一個見證，也是對自己的一個督促。
VUE中文官網：https://cn.vuejs.org/
2.1 特點介紹
- 用於構建用戶界面的漸進式JavaScript 框架
- 遵循MVVM 模式
- 編碼簡潔，體積小，運行效率高，適合移動/PC端開發
- 本身只關注UI, 可以輕鬆引入vue插件或其它第三庫開發項目
- 借鑑
AngularJS的模板和數據綁定技術 - 借鑑
React的組件化和虛擬DOM 技術
2.1 VUE擴展插件
vue-cli：VUE腳手架vue-resource(axios)：AJAX請求vue-router：路由vuex：狀態管理vue-lazyload：圖片懶加載vue-scroller：頁面滑動相關mint-ui：基於VUE的UI組件庫(移動端)element-ui：基於VUE的UI組件庫(WEB端)
2.2 VUE安裝
2.2.1 直接引用
製作原型或學習的使用最新版本方法：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生產環境推薦鏈接到一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
注意：生產環境版本，把 vue.js 換成 vue.min.js。這是一個更小的構建，可以帶來比開發環境下更快的速度體驗。
2.2.2 命令安裝
注意：其實除了必要的Node.js外，我們組內前端的MM告訴我其他的可以不用都一步步驗證，可以直接導入現有的項目，然後直接在其基礎上進行開發。本人本着初學的態度，想整個體會一遍完成的過程。果然掉進了大坑。本人按照說明替換使用了淘寶的鏡像，但是使用cnpm安裝其他包的時候，還是因爲網絡問題導致中途各種問題，基本上反反覆覆好幾遍都沒有成功。順便吐槽一下移動的寬帶，因爲圖便宜，今年家裏使用的免費的移動寬帶。就是移動網絡導致安裝過程中因爲不穩定等因素，多次卡頓停滯。在折磨的崩潰之際，問了問前端MM，果斷切換手機的電信4G熱點，後續順序完成了整個過程的體驗。浪費了整整一個晚上的時間，外加上精神的折磨。
2.2.2.1 安裝Node.js
使用VUE的基礎需要依賴Node.js，所以需要在自己的機器上先進行安裝NodeJS。需要訪問NodeJS官網進行下載。本人機器是Windows，選擇相應版本下載後進行默認安裝即可。
安裝完成後打開cmd窗口輸入node -v和npm -v測試是否已經成功安裝。
Microsoft Windows [版本 10.0.16299.1268]
(c) 2017 Microsoft Corporation。保留所有權利。
C:\Users\Administrator>node -v
v12.16.1
C:\Users\Administrator>npm -v
6.13.4
C:\Users\Administrator>
2.2.2.2 安裝cnpm
由於許多npm包都在國外，所以推薦用淘寶的鏡像服務器，對依賴的module進行安裝。 參考網址爲：http://npm.taobao.org/ 安裝命令爲：npm install -g cnpm --registry=https://registry.npm.taobao.org
PS C:\Users\Administrator> cnpm -v
cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.13.7 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.16.1 (C:\Program Files\nodejs\node.exe)
npminstall@3.27.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 10.0.16299
registry=https://r.npm.taobao.org
接下來需要給cnpm命令授權，否則在VS Code中無法執行。在運行PowerShell窗口，執行如下命令：set-ExecutionPolicy RemoteSigned，然後輸入A 回車。
Windows PowerShell
版權所有 (C) Microsoft Corporation。保留所有權利。
PS C:\Users\Administrator> set-ExecutionPolicy RemoteSigned
執行策略更改
執行策略可幫助你防止執行不信任的腳本。更改執行策略可能會產生安全風險，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 幫助主題所述。是否要更改執行策略?
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暫停(S) [?] 幫助 (默認值爲“N”): A
PS C:\Users\Administrator>
2.2.2.3 安裝VUE或者vue-cli
使用命令進行安裝：cnpm install -g vue
PS C:\vueworkspace> cnpm install -g vue
Downloading vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp\_vue@2.6.11@vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue
Installing vue's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue/node_modules
All packages installed (used 3ms(network 1ms), speed 0B/s, json 0(0B), tarball 0B)
PS C:\vueworkspace>
使用命令進行安裝：cnpm install -g vue-cli
PS C:\vueworkspace> cnpm install -g vue-cli
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[4/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
[6/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[7/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[10/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[15/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.7.3@handlebars
[16/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[17/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[18/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[19/20] request@^2.67.0 installed at node_modules\_request@2.88.2@request
[20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2020-02-16): 3 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
2020-02-22
→ request@2.88.2 › har-validator@5.1.3 › ajv@^6.5.5(6.12.0) (21:51:48)
2020-02-21
→ inquirer@6.5.2 › rxjs@6.5.4 › tslib@^1.9.0(1.11.0) (05:25:00)
2020-02-18
→ handlebars@4.7.3 › uglify-js@^3.1.4(3.8.0) (22:29:54)
All packages installed (238 packages installed from npm registry, used 16s(network 16s), speed 326.94kB/s, json 223(452.82kB), tarball 4.57MB)
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
PS C:\vueworkspace>
2.2.2.4 安裝webpack
安裝webpack：npm install -g webpack (打包JavaScript的工具)
PS C:\vueworkspace> cnpm install -g webpack
Downloading webpack to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack_tmp\_webpack@4.41.6@webpack to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack
Installing webpack's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack/node_modules
[1/23] @webassemblyjs/helper-module-context@1.8.5 installed at node_modules\_@webassemblyjs_helper-module-context@1.8.5@@webassemblyjs\helper-module-context
[2/23] eslint-scope@^4.0.3 installed at node_modules\_eslint-scope@4.0.3@eslint-scope
[3/23] chrome-trace-event@^1.0.2 installed at node_modules\_chrome-trace-event@1.0.2@chrome-trace-event
[4/23] acorn@^6.2.1 installed at node_modules\_acorn@6.4.0@acorn
[5/23] ajv-keywords@^3.4.1 installed at node_modules\_ajv-keywords@3.4.1@ajv-keywords
[6/23] loader-runner@^2.4.0 installed at node_modules\_loader-runner@2.4.0@loader-runner
[7/23] @webassemblyjs/wasm-edit@1.8.5 installed at node_modules\_@webassemblyjs_wasm-edit@1.8.5@@webassemblyjs\wasm-edit
[8/23] @webassemblyjs/ast@1.8.5 installed at node_modules\_@webassemblyjs_ast@1.8.5@@webassemblyjs\ast
[9/23] memory-fs@^0.4.1 installed at node_modules\_memory-fs@0.4.1@memory-fs
[10/23] json-parse-better-errors@^1.0.2 installed at node_modules\_json-parse-better-errors@1.0.2@json-parse-better-errors
[11/23] tapable@^1.1.3 existed at node_modules\_tapable@1.1.3@tapable
[12/23] @webassemblyjs/wasm-parser@1.8.5 installed at node_modules\_@webassemblyjs_wasm-parser@1.8.5@@webassemblyjs\wasm-parser
[13/23] ajv@^6.10.2 installed at node_modules\_ajv@6.12.0@ajv
[14/23] enhanced-resolve@^4.1.0 installed at node_modules\_enhanced-resolve@4.1.1@enhanced-resolve
[15/23] mkdirp@^0.5.1 installed at node_modules\_mkdirp@0.5.1@mkdirp
[16/23] neo-async@^2.6.1 installed at node_modules\_neo-async@2.6.1@neo-async
[17/23] loader-utils@^1.2.3 installed at node_modules\_loader-utils@1.4.0@loader-utils
[18/23] schema-utils@^1.0.0 installed at node_modules\_schema-utils@1.0.0@schema-utils
[19/23] webpack-sources@^1.4.1 installed at node_modules\_webpack-sources@1.4.3@webpack-sources
platform unsupported watchpack@1.6.0 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
[20/23] watchpack@^1.6.0 installed at node_modules\_watchpack@1.6.0@watchpack
[21/23] node-libs-browser@^2.2.1 installed at node_modules\_node-libs-browser@2.2.1@node-libs-browser
[22/23] micromatch@^3.1.10 installed at node_modules\_micromatch@3.1.10@micromatch
[23/23] terser-webpack-plugin@^1.4.3 installed at node_modules\_terser-webpack-plugin@1.4.3@terser-webpack-plugin
Recently updated (since 2020-02-16): 3 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\node_modules\.recently_updates.txt)
2020-02-22
→ ajv@^6.10.2(6.12.0) (21:51:48)
2020-02-21
→ chrome-trace-event@1.0.2 › tslib@^1.9.0(1.11.0) (05:25:00)
2020-02-20
→ loader-utils@^1.2.3(1.4.0) (01:33:22)
All packages installed (295 packages installed from npm registry, used 7s(network 6s), speed 743.96kB/s, json 269(500.49kB), tarball 4.2MB)
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\webpack@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
PS C:\vueworkspace>
2.2.2.5 創建Demo工程
通過命令行中，切換到指定目錄，然後執行命令：vue init webpack vuedemo
新建一個vueworkspace工作目錄來放置項目，該在目錄下面通過命令行執行命令行。這個命令的意思是初始化一個vue項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中projectName是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中。注意：項目名不能大寫，不能使用中文。
webpack：一個全面的webpack+vue-loader的模板，功能包括熱加載，linting，檢測和CSS擴展。webpack-simple：一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發環境。browserify：一個全面的Browserify+vueify 的模板，功能包括熱加載，linting，單元檢測。browserify-simple：一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發環境。simple：一個最簡單的單頁應用模板。
注意： 如果出現亂碼，請在控制檯的PowerShell中輸入CHCP 65001，按回車鍵即可將編碼格式設成utf-8，再創建工程就不會亂碼了。
PS C:\vueworkspace> vue init webpack vuedemo
'git' is not recognized as an internal or external command,
operable program or batch file.
? Project name vuedemo
? Project description A Vue.js project
? Author gavinbj
? 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 "vuedemo".
# Installing project dependencies ...
# ========================
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
[ .................] / fetchMetadata: sill pacote range manifest for debug@^2.6.9 fetched in 2184ms
.
├── build/ # webpack配置文件
│ └── ...
├── config/
│ ├── index.js # 主要項目配置
│ └── ...
├── src/
│ ├── main.js # 應用入口js文件
│ ├── App.vue # 主應用程序組件
│ ├── components/ # 公共組件目錄
│ │ └── ...
│ └── router/ # 前端路由
│ │ └── ...
│ └── assets/ # 模塊資源（由webpack處理）
│ └── ...
├── static/ # 純靜態資源（直接複製）
├── .babelrc # babel 配置，es6需要babel編譯
├── .postcssrc.js # postcss 配置
├── .eslintrc.js # eslint 配置
├── .editorconfig # 編輯器 配置
├── .gitignore # 過濾無需上傳的文件
├── index.html # index.html模板
└── package.json # 構建腳本和依賴關係
2.2.2.6 創建項目選項配置詳細解析
# 找到了同樣這個目錄是否要繼續
Target directory exists. Continue? (Y/n) y
Target directory exists. Continue? Yes
# 項目的名稱（默認是文件夾的名稱），ps：項目的名稱不能有大寫，不能有中文，否則會報錯
Project name (vuedemo)
Project name vuedemo
# 項目描述，可以自己寫，默認回車就用示例
Project description (A Vue.js project)
Project description A Vue.js project
# 項目創建者
Author (gavinbj)
Author gavinbj
# 選擇打包方式，有兩種方式（runtime和standalone），使用默認即可
Vue build (Use arrow keys)
Vue build standalone
# 是否安裝路由，一般都要安裝
Install vue-router? (Y/n) y
Install vue-router? Yes
# 是否啓用eslint檢測規則，這裏個人建議選no，因爲經常會各種代碼報錯，新手還是不安裝好
Use ESLint to lint your code? (Y/n) n
Use ESLint to lint your code? No
# 是否安裝單元測試
Setup unit tests with Karma + Mocha? (Y/n)
Setup unit tests with Karma + Mocha? Yes
# 是否安裝e2e測試
Setup e2e tests with Nightwatch? (Y/n) y
Setup e2e tests with Nightwatch? Yes
2.2.2.7 安裝項目依賴cnpm install
進入到剛纔創建的工程目錄（vuedemo），執行命令安裝項目依賴：cnpm install
前面在項目初始化的時候，已經存在了package.json文件，直接使用npm install 安裝項目所需要的依賴，否則項目不能正確運行。
PS C:\vueworkspace> cd .\vuedemo\
PS C:\vueworkspace\vuedemo> npm install
[ .................] | fetchMetadata: sill pacote range manifest for url-parse@^1.1.8 fetched in 305ms
2.2.2.8 啓動項目npm run dev
在Demo項目目錄下運行命令：npm run dev，啓動服務，服務啓動成功後瀏覽器會默認打開一個“歡迎頁面”，如下圖。注意：這裏是默認服務啓動的是本地的8080端口，所以請確保你的8080端口不被別的程序所佔用，當有其他VUE項目運行的時候，可以使用ctrl+c來中斷運行。
PS C:\vueworkspace\vuedemo> npm run dev
> vuedemo@1.0.0 dev C:\vueworkspace\vuedemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 32/35 modules 3 active ...x=0!C:\vueworkspace\vuedemo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 95% emitting
DONE Compiled successfully in 3043ms 21:35:11
I Your application is running here: http://localhost:8080
2.2.2.9 打包項目npm run build
執行命令進行項目打包：npm run build
PS C:\vueworkspace\vuedemo> cnpm run build
> [email protected] build C:\vueworkspace\vuedemo
> node build/build.js
Hash: f4da110d2bfce4502d80
Version: webpack 3.12.0
Time: 6706ms
Asset Size Chunks Chunk Names
static/js/vendor.dc2a748e035f2d805547.js 121 kB 0 [emitted] vendor
static/js/app.b22ce679862c47a75225.js 11.6 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 797 bytes [emitted]
static/js/vendor.dc2a748e035f2d805547.js.map 613 kB 0 [emitted] vendor
static/js/app.b22ce679862c47a75225.js.map 22.2 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 509 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
編譯後直接使用dist文件夾下內容拷貝後可以發佈到Nginx下面。
PS C:\vueworkspace\vuedemo> cd .\dist\
PS C:\vueworkspace\vuedemo\dist> dir
目錄: C:\vueworkspace\vuedemo\dist
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2020/2/24 12:06 static
-a---- 2020/2/24 12:06 509 index.html
2.3 安裝問題集萃
N001、執行出錯npm install vue
PS C:\vueworkspace\vuedemo> npm install vue
npm : 無法將“npm”項識別爲 cmdlet、函數、腳本文件或可運行程序的名稱。請檢查名稱的拼寫，如果包括路徑，請確保路徑正確，然後再試一次
。
所在位置 行:1 字符: 1
+ npm install vue
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
解決方法：
VUE的安裝依賴於Node.js，要確保計算機上已安裝過Node.js。需要訪問NodeJS官網進行下載。我是Windows版本下載後默認進行安裝即可。
安裝完成後打開cmd窗口 輸入node -v和npm -v測試是否已經成功安裝。
Microsoft Windows [版本 10.0.16299.1268]
(c) 2017 Microsoft Corporation。保留所有權利。
C:\Users\Administrator>node -v
v12.16.1
C:\Users\Administrator>npm -v
6.13.4
C:\Users\Administrator>
N002、執行出錯cnpm install vue-cli –g
PS C:\vueworkspace\vuedemo>
PS C:\vueworkspace\vuedemo>
PS C:\vueworkspace\vuedemo> cnpm install vue-cli –g
cnpm : 無法加載文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因爲在此係統上禁止運行腳本。有關詳細信息，請參閱 https:/go
.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ cnpm install vue-cli –g
+ ~~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解決方案：
以管理員身份運行power shell，執行如下命令：set-ExecutionPolicy RemoteSigned，然後輸入A 回車。
Windows PowerShell
版權所有 (C) Microsoft Corporation。保留所有權利。
PS C:\Users\Administrator> set-ExecutionPolicy RemoteSigned
執行策略更改
執行策略可幫助你防止執行不信任的腳本。更改執行策略可能會產生安全風險，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 幫助主題所述。是否要更改執行策略?
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暫停(S) [?] 幫助 (默認值爲“N”): A
PS C:\Users\Administrator>
這樣再到VSCode裏面執行cnpm 命令就可以執行了。
N003、執行出錯npm run dev
PS C:\vueworkspace\myvue> npm run dev
> myvue@1.0.0 dev C:\vueworkspace\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
或批處理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myvue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myvue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-02-23T13_03_11_909Z-debug.log
PS C:\vueworkspace\myvue>
解決方案：缺少對應的命令。
執行命令：npm install webpack-dev-server
執行命令：npm install webpack-cli
PS C:\vueworkspace\myvue> cnpm install webpack-dev-server
| [0/1] Installing p-limit@^1.1.0platform unsupported webpack-dev-server@2.11.5 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 1 packages
√ Linked 431 latest versions
[1/1] scripts.postinstall webpack-dev-server@2.11.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@uglifyjs-webpack-plugin"
[1/1] scripts.postinstall webpack-dev-server@2.11.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 70ms
√ Run 1 scripts
Recently updated (since 2020-02-16): 2 packages (detail see file C:\vueworkspace\myvue\node_modules\.recently_updates.txt)
√ All packages installed (494 packages installed from npm registry, used 18s(network 17s), speed 462.57kB/s, json 432(832.8kB), tar
ball 7.03MB)
PS C:\vueworkspace\myvue>
PS C:\vueworkspace\myvue> cnpm install webpack-cli
√ Installed 1 packages
√ Linked 80 latest versions
√ Run 0 scripts
peerDependencies WARNING webpack-cli@* requires a peer of webpack@4.x.x but webpack@3.12.0 was installed
√ All packages installed (56 packages installed from npm registry, used 3s(network 3s), speed 199.5kB/s, json 82(205.21kB), tarball
328.85kB)
PS C:\vueworkspace\myvue>
N004、執行出錯：cnpm run dev
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
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\Administrator\AppData\Roaming\npm-cache\_logs\2020-02-23T13_28_08_824Z-debug.log
解決方案：
錯誤原因在於由於文件node_modules太大，在項目上傳時有些人會刪掉，導致我們下載的項目中缺少這個文件。
解決方法：在命令行中先進入文件所在路徑，輸入命令：npm i
然後發現項目中多出了文件node_modules，接着繼續執行：npm run dev
發現項目運行成功。
PS C:\vueworkspace\myvue> cnpm i
\ [31/69] Installing meow@^3.3.0
WARN node unsupported "[email protected]" is incompatible with karma@^1.4.1, expected node@0.10 || 0.12 || 4 || 5 || 6 || 7 || 8
| [59/69] Installing bluebird@^3.1.1platform unsupported karma@1.7.1 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 69 packages
√ Linked 694 latest versions
[1/5] scripts.install chromedriver@^2.27.2 run "node install.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@chromedriver"
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: https://cdn.npm.taobao.org/dist/chromedriver/2.46/chromedriver_win32.zip
Saving to file: C:\Users\ADMINI~1\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
Received 794K...
Received 1583K...
Received 2367K...
Received 3160K...
Received 3949K...
Received 4523K total.
Extracting zip contents
Copying to target path C:\vueworkspace\myvue\node_modules\_chromedriver@2.46.0@chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\vueworkspace\myvue\node_modules\_chromedriver@2.46.0@chromedriver\lib\chromedriver\chromedriver.exe
[1/5] scripts.install chromedriver@^2.27.2 finished in 2s
[2/5] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@core-js"
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 -)
[2/5] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 finished in 73ms
[3/5] scripts.install karma-phantomjs-launcher@1.0.4 › phantomjs-prebuilt@^2.1.7 run "node install.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@phantomjs-prebuilt"
PhantomJS not found on PATH
Downloading https://cdn.npm.taobao.org/dist/phantomjs/phantomjs-2.1.1-windows.zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...
[===================================-----] 86%
Received 17767K total.
Extracting zip contents
Removing C:\vueworkspace\myvue\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom
Copying extracted folder C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1582464680755\phantomjs-2.1.1-windows -> C:\vueworkspace\myvue\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom
Writing location.js file
Done. Phantomjs binary available at C:\vueworkspace\myvue\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe
[3/5] scripts.install karma-phantomjs-launcher@1.0.4 › phantomjs-prebuilt@^2.1.7 finished in 5s
[4/5] scripts.postinstall karma-sinon-chai@1.3.4 › sinon@^4.0.0 run "node scripts/support-sinon.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@sinon"
Have some ❤️ for Sinon? You can support the project via Open Collective:
> https://opencollective.com/sinon/donate
[4/5] scripts.postinstall karma-sinon-chai@1.3.4 › sinon@^4.0.0 finished in 68ms
[5/5] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node ./postinstall.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
[5/5] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished in 59ms
√ Run 5 scripts
peerDependencies link ajv@5.5.2 in C:\vueworkspace\myvue\node_modules\_ajv-keywords@2.1.1@ajv-keywords unmet with C:\vueworkspace\myvue\node_modules\ajv(6.12.0)
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
deprecate eslint@4.19.1 › file-entry-cache@2.0.0 › flat-cache@1.3.4 › circular-json@^0.3.1 CircularJSON is in maintenance only, flatted is its successor.
deprecate karma-coverage@1.1.2 › istanbul@^0.4.0 This module is no longer maintained, try this instead:
npm i nyc
Visit https://istanbul.js.org/integrations for other alternatives.
deprecate babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
anti semver karma@1.7.1 › useragent@2.3.0 › tmp@0.0.x delcares tmp@0.0.x(resolved as 0.0.33) but using ancestor(karma)'s dependency
tmp@0.0.31(resolved as 0.0.31)
deprecate mocha@3.5.3 › json3@3.3.2 Please use the native JSON object instead of JSON 3
deprecate karma-sinon-chai@1.3.4 › sinon@4.5.0 › @sinonjs/formatio@2.0.0 › samsam@1.3.0 This package has been deprecated in favour of @sinonjs/samsam
deprecate nightwatch@0.9.21 › proxy-agent@2.0.0 › socks-proxy-agent@2.1.1 › socks@~1.1.5 If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
Recently updated (since 2020-02-16): 9 packages (detail see file C:\vueworkspace\myvue\node_modules\.recently_updates.txt)
Today:
→ autoprefixer@7.2.6 › browserslist@2.11.3 › electron-to-chromium@^1.3.30(1.3.359) (09:02:34)
√ All packages installed (785 packages installed from npm registry, used 45s(network 37s), speed 849.54kB/s, json 761(1.98MB), tarb
all 28.86MB)
PS C:\vueworkspace\myvue> npm run dev
> myvue@1.0.0 dev C:\vueworkspace\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 32/35 modules 3 active ...x=0!C:\vueworkspace\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 95% emitting
DONE Compiled successfully in 3043ms 21:35:11
I Your application is running here: http://localhost:8080
N005、執行亂碼：vue init webpack vuedemo
PS C:\vueworkspace> vue init webpack vuedemo
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
? Project name vuedemo
? Project description A Vue.js project
? Author
? 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
解決方案：
打開命令控制檯PowerShell，在控制檯輸入CHCP 65001，按回車鍵即可將編碼格式設成utf-8，再創建工程就不會亂碼了。
PS C:\vueworkspace> vue init webpack vuedemo
'git' is not recognized as an internal or external command,
operable program or batch file.
? Project name (vuedemo)