《vue.js從入門到項目實戰》之Vue項目化筆記

Vue項目化

前言：

《vue.js從入門到項目實戰》的第六章和第八章。嘗試一下Vue項目化的過程。

前置內容：vue的基礎知識

上次學習了《vue.js從入門到項目實戰》的前六章，重點學習了第二、三、四章的Vue實例和模板語法；瞭解了一下Vue組件（可複用的Vue實例）和Vue項目化（Vue CLI、Vue router、vuex）

接觸了一部分Vue項目化的理論，這次對這一部分進行實踐，邊實踐邊記錄遇到的問題。

理論內容

Vue腳手架：Vue CLI

是Vue官方提供的構建工具，五分鐘就可以搭建一個完整的Vue應用。

前端路由：Vue router

ajax實現了無刷新的數據交互、前端路由實現了無刷新的頁面跳轉。ajax將web page發展成web app，而前端路由給web app增加了更多可能，如單頁面應用。

Vue router是官方提供的路由管理器，致力於簡化單頁面應用的構建。

狀態管理：Vuex

對於小型應用來說，完全沒必要引入狀態管理，因爲這會帶來更多開發成本。但是當應用複雜度越來越高，狀態管理也越發重要起來。

官網提供的狀態管理器爲vuex，用於管理分散在Vue各個組件中的數據。

遇到的問題

npm的使用我是參照《vue.js從入門到項目實戰》的第二章（1-3）和第六章（4-6）進行操作的。

1npm安裝淘寶鏡像報錯

輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org

輸出

npm should be run outside of the node repl, in your normal shell.
(Press Control-D to exit.)

這個報錯的意思是npm應該在node repl之外的正常shell中運行。（按Control-D退出。）

然後我複製這個報錯信息進行搜索。

如何解決npm should be run outside of the node repl, in your normal shell問題

裏面解釋是npm不能在node開發模式中運行npm等命令，只能在cmd中才能運行。

因爲我之前曾用cmd啓動過mysql，於是照葫蘆畫瓢操作一下，發現還真行。完美。

//輸入cd..表示返回上一層文件夾；
C:\Users\Administrator>cd..

C:\Users>cd..
//輸入cd [地址]表示進入地址所在文件夾
C:\>cd C:\Program Files\nodejs
//最後我嘗試安裝淘寶鏡像，還想還真行。
C:\Program Files\nodejs>npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ [email protected]
added 685 packages from 957 contributors in 40.672s

C:\Program Files\nodejs>

好奇之下，我看了看淘寶鏡像，發現這小可愛藏到了隱藏目錄AppDate文件夾中。

2安裝vue.js報錯

輸入：

cnpm install vue

輸出：

× Install fail! Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_modules\[email protected]@vue'
Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_modules\[email protected]@vue'
npminstall version: 3.27.0
npminstall args: C:\Program Files\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\bin\install.js --fix-bug-versions --china --userconfig=C:\Users\Administrator\.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://r.npm.taobao.org vue

經過我的仔細觀察，我發現操作介紹是說cnpm安裝，而不是npm安裝，於是猜想是要用cnpm的路徑進行操作；於是操作一波，發現成功了。果然知識都是觸類旁通的。

C:\Program Files\nodejs>cd..

C:\Program Files>cd..

C:\>cd C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin>cnpm install vue
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 2s(network 2s), speed 488.85kB/s, json 1(27.82kB), tarball 825.22kB)

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin>

3引入Vue模塊報錯

輸入：

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin>import Vue from 'vue'

輸出：

'import' 不是內部或外部命令，也不是可運行的程序
或批處理文件。

然後我思考了一下，這應該和我用cmd來操作有關，我使用的命令應該只能是那個文件夾內的命令。而那個文件夾沒有import命令。

這個import命令應該是在main.js中引入。而不是在這個控制檯使用。

4安裝Vue CLI沒報錯

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin>cnpm install vue-cli -g
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\[email protected]@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\[email protected]@commander
[2/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consolidate
[3/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch
[4/20] ora@^1.3.0 installed at node_modules\[email protected]@ora
[5/20] rimraf@^2.5.0 existed at node_modules\[email protected]@rimraf
[6/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch
[7/20] handlebars@^4.0.5 installed at node_modules\[email protected]@handlebars
[8/20] semver@^5.1.0 installed at node_modules\[email protected]@semver
[9/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk
[10/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read-metadata
[11/20] [email protected] installed at node_modules\[email protected]@uid
[12/20] [email protected] existed at node_modules\[email protected]@coffee-script
[13/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify
[14/20] user-home@^2.0.0 installed at node_modules\[email protected]@user-home
[15/20] validate-npm-package-name@^3.0.0 installed at node_modules\[email protected]@validate-npm-package-name
[16/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith
[17/20] async@^2.4.0 installed at node_modules\[email protected]@async
[18/20] download-git-repo@^1.0.1 installed at node_modules\[email protected]@download-git-repo
[19/20] request@^2.67.0 installed at node_modules\[email protected]@request
[20/20] inquirer@^6.0.0 installed at node_modules\[email protected]@inquirer
deprecate [email protected] › [email protected] › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2020-06-04): 1 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
  2020-06-08
    → [email protected] › [email protected] › [email protected] › fast-deep-equal@^3.1.1(3.1.3) (15:27:28)
All packages installed (235 packages installed from npm registry, used 8s(network 7s), speed 689.39kB/s, json 221(458.22kB), tarball 4.56MB)
[[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

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin>vue --version
2.9.6

5初始化項目出現了一個有意思的事

輸入vue init webpack my-project後，需要enter才能繼續操作，知道enter完後纔是初始化。

仔細看題，發現這原來是Vue CLI引導的項目配置。

然後對比作者的項目配置，發現我和作者最後三步不同，作者選擇No。然後他就沒這麼多下載的步驟直接to get started:。

作者給出的解釋是“Set up unit tests”和“Setup e2e tests with Nightwatch”選擇“No”，這部分內容和Vue沒有直接關係。

最後一項選擇No是因爲npm的鏡像源在國外，安裝依賴的速度緩慢且容易出錯，故選擇cnpm安裝。

? Project name my-project
? Project description A Vue.js project
? Author wsdchong <[email protected]>
? 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 ...
# ========================

npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: 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.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: 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
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated

> [email protected] install C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\my-project\node_modules\chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip
Saving to file: C:\Users\ADMINI~1\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1566K...
Received 2350K...
Received 3134K...
Received 3918K...
Received 4523K total.
Extracting zip contents
Copying to target path C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\my-project\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\my-project\node_modules\chromedriver\lib\chromedriver\chromedriver.exe

> [email protected] postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\my-project\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

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\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\my-project\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.3 (node_modules\sane\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":"<8.10.0"} (current: {"node":"14.0.0","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

added 1822 packages from 1110 contributors and audited 1830 packages in 91.672s

30 packages are looking for funding
  run `npm fund` for details

found 99 vulnerabilities (76 low, 9 moderate, 13 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================


> [email protected] lint C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\my-project
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"


# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

6安裝項目依賴出現問題

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin>cnpm install
C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin>ppData\Roaming\npm\node_modules\cnpm\bin\package.json

果然被第5步說中了，安裝依賴容易出錯，bin文件夾中沒有package.json。

√ Installed 0 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 20ms(network 6ms), speed 0B/s, json 0(0B), tarball 0B)

怎麼辦呢。那再一次初始化一次項目。最後三步按照作者的操作來操作。

npminstall WARN package.json not exists: C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\package.json
√ Installed 0 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 15ms(network 7ms), speed 0B/s, json 0(0B), tarball 0B)

結果bin文件夾就是沒有package.json。

於是我猜測應該是需要我進入到my-project中，然後進行cnpm install和npm start；

果然成功了。

 DONE  Compiled successfully in 7505ms                                                                      下午9:41:41

 I  Your application is running here: http://localhost:8080

嘗試運行第八章的項目

首先Ctrl+C進行終止批處理操作；

然後返回my-project的上一級文件夾；

最後把第八章的項目拷貝到bin文件夾；

 I  Your application is running here: http://localhost:8080
終止批處理操作嗎(Y/N)?
終止批處理操作嗎(Y/N)? y

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\my-project>cd..

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin>vue init webpack chapter07

? Target directory exists. Continue? Yes
? Project name chapter07
? Project description A Vue.js project
? Author wsdchong <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "chapter07".

# Project initialization finished!
# ========================

To get started:

  cd chapter07
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

然後cnpm install和npm start；

最後瀏覽器裏看看。

居然和之前那個一樣。煩。今天晚上先到這。明天再弄。