Vue命令行工具Vue-CLI圖文詳解(推薦!)
更新時間：2022年07月22日 10:40:09 作者：知其黑、受其白
vue-cli 是 Vue.js 開發(fā)的標(biāo)準(zhǔn)工具,它簡化了程序員基于 webpack 創(chuàng)建工程化的 Vue 項目的過程,下面這篇文章主要給大家介紹了關(guān)于Vue命令行工具Vue-CLI的相關(guān)資料,需要的朋友可以參考下
闡述
vue-cli 構(gòu)建一個工程的時候，發(fā)現(xiàn)官方文檔還是不夠用，需要熟練掌握 es6，而 vue 的全家桶還是都要上的。
Vue CLI 的包名稱由vue-cli改成了@vue/cli。 如果你已經(jīng)全局安裝了舊版本的vue-cli(1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
安裝新版的腳手 node 也有版本要求，Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推薦 v10 以上)。
vue全家桶
vue全家桶是基于vue開發(fā)必備的也是必學(xué)的東西，概括起來就是：
1.vue-cli項目構(gòu)建工具
2.vue-router路由管理
3.vuex狀態(tài)管理全局變量
4.axios，http請求工具。
5.UI 框架 element，iview，vant
最常見常用的 vue 全家桶簡單的介紹一下，希望可以幫助你了解認(rèn)識學(xué)會 vue 全家桶！
vue-cli
vue-cli 就是快速搭建一個 vue 項目的腳手架工具。
VueCLI是一個官方發(fā)布vue.js項目腳手架，使用 VueCLI 可以快速搭建 vue 開發(fā)環(huán)境，以及對應(yīng)的 webpack 配置。
1、CLI 是 Command-Line Interface, 翻譯為命令行界面, 但是俗稱腳手架
2、Vue CLI是一個官方發(fā)布 vue.js 項目腳手架
3、使用 vue-cli 可以快速搭建 Vue 開發(fā)環(huán)境以及對應(yīng)的 webpack 配置.
關(guān)于舊版本
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
腳手架依賴于 node.js 和 webpack。
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。
Vue CLI 的安裝
Vue CLI2初始化項目：vue init webpack my-project
Vue CLI3初始化項目：vue create my-project
注意： 下面的默認(rèn)安裝的是 Vue CLI3 的版本，如果需要想按照 Vue CLI2 的方式初始化項目時不可以的。
由于博主的版本過低出現(xiàn)了切換 node 版本、反復(fù)安裝操作，第二步查看 Vue Cli 需要的node 版本。版本一直請越過反復(fù)安裝過程。
① 默認(rèn)安裝 vue/cli 腳手架 3
PS C:\Windows\system32> npm install -g @vue/cli
npm WARN deprecated subscriptions-transport-ws@0.9.19: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
C:\Program Files\nodejs\vue -> C:\Program Files\nodejs\node_modules\@vue\cli\bin\vue.js
> core-js-pure@3.22.0 postinstall C:\Program Files\nodejs\node_modules\@vue\cli\node_modules\core-js-pure
> 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:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> @apollo/protobufjs@1.2.2 postinstall C:\Program Files\nodejs\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall
npm WARN node-fetch@2.6.7 requires a peer of encoding@^0.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.5.7 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.5.7 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
+ @vue/cli@5.0.4
added 880 packages from 531 contributors in 130.475s
結(jié)束
② 默認(rèn)安裝失敗，解決mode版本問題
安裝之后，你就可以在命令行中訪問 vue 命令。
檢查其版本是否正確：
PS C:\Windows\system32> vue --version You are using Node v11.15.0, but this version of @vue/cli requires Node ^12.0.0 || >= 14.0.0. Please upgrade your Node version. 您使用的是 Node v11.15.0，但是這個版本的 @vue/cli 需要 Node ^12.0.0 || >= 14.0.0。 請升級您的節(jié)點版本。 PS C:\Windows\system32>
③ nvm下載太慢問題解決
由于 nvm 默認(rèn)的下載地址 http://nodejs.org/dist/ 是外國外服務(wù)器，國內(nèi)很慢可以使用淘寶的鏡像。
where nvm 找到 nvm 安裝路徑
找到 settings.txt 文件
將下面這兩句話復(fù)制到settings.txt,并保存
node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/
④ 安裝 Node ^12.0.0
PS C:\Windows\system32> nvm install 12.0.0
Downloading node.js version 12.0.0 (64-bit)...
Complete
Creating C:\Users\ASUS\AppData\Roaming\nvm\temp
Downloading npm version 6.9.0... Complete
Installing npm v6.9.0...
Installation complete. If you want to use this version, type
nvm use 12.0.0
PS C:\Windows\system32> nvm use 12.0.0
Now using node v12.0.0 (64-bit)
PS C:\Windows\system32> nvm list
14.17.6
* 12.0.0 (Currently using 64-bit executable)
11.15.0 此版本主項目
PS C:\Windows\system32>
⑤ 從新安裝 VueCli 腳手架 3
PS C:\Windows\system32> npm install -g @vue/cli
npm WARN deprecated subscriptions-transport-ws@0.9.19: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
C:\Program Files\nodejs\vue -> C:\Program Files\nodejs\node_modules\@vue\cli\bin\vue.js
> core-js-pure@3.22.0 postinstall C:\Program Files\nodejs\node_modules\@vue\cli\node_modules\core-js-pure
> 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:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> @apollo/protobufjs@1.2.2 postinstall C:\Program Files\nodejs\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall
npm WARN node-fetch@2.6.7 requires a peer of encoding@^0.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.5.7 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.5.7 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
+ @vue/cli@5.0.4
added 880 packages from 531 contributors in 81.975s
安裝結(jié)束
查看 vue 版本，及驗證是否安裝正確。
PS C:\Windows\system32> vue --version @vue/cli 5.0.4 PS C:\Windows\system32>
④ 拉取 2.x 模板 (舊版本)
Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。
如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：
PS C:\Windows\system32> npm install -g @vue/cli-init npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. + @vue/cli-init@5.0.4 added 259 packages from 231 contributors in 38.328s PS C:\Windows\system32>
vue init 的運行效果將會跟 vue-cli@2.x 相同。
創(chuàng)建項目提示，原因上面安裝已經(jīng)提示命令都為棄用狀態(tài)。
PS E:\node> vue init webpack vue-cli2-test Command vue init requires a global addon to be installed. Please run undefined @vue/cli-init and try again. 命令 vue init 需要安裝全局插件。 請運行 undefined @vue/cli-init 并重試。 PS E:\node>
⑤ 安裝vue指定版本
【前端開發(fā)】Vue-CLI4 &Vue-CLI3 與Vue-CLI2 的區(qū)別
1、安裝：
Vue-CLI2：
npm install -g vue-cli 或 cnpm install -g vue-cli
Vue-CLI最新版本：
npm install -g @vue/cli 或 cnpm install -g @vue/cli
2、卸載
Vue-CLI2：
npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli
Vue-CLI最新版本：
npm uninstall -g @vue/cli 或 cnpm uninstall -g @vue/cli
指定版本安裝
可以安裝：2.6.0 版本 npm install -g vue-cli@2.6 可以安裝：2.6.0 版本 cnpm install -g vue-cli@v2.6.* 卸載vue cnpm uninstall -g vue-cli
cdn 鏈接
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script> https://unpkg.com/browse/vue@2.6.14/dist/ 選擇vue版本 https://unpkg.com/browse/vue@2.6.14/dist/vue.min.js
⑥ 博主node版本
改 vue 版本
PS C:\WINDOWS\system32> npm install vue-cli -g npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. C:\Program Files\nodejs\vue-init -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init C:\Program Files\nodejs\vue-list -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-list C:\Program Files\nodejs\vue -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue + vue-cli@2.9.6 added 244 packages from 229 contributors and updated 1 package in 22.77s PS C:\WINDOWS\system32> vue -V 2.9.6 PS C:\WINDOWS\system32>
如何查看 Vue項 目 vue 的版本號：
如果是用 vue-cli 創(chuàng)建的項目，則找到項目根目錄下的 "package.json" 文件。
初始化項目
① vue init命令講解
用 vue init 命令來初始化項目，具體使用方法如下：
vue init <template-name> <project-name>
init：表示要用 vue-cli 來初始化項目
<template-name>：表示模板名稱，vue-cli 官方提供的 5 種模板：
1、webpack：
一個全面的 webpack+vue-loader 的模板，功能包括熱加載，linting,檢測和CSS擴展。
2、webpack-simple：
一個簡單 webpack+vue-loader 的模板，不包含其他功能，讓你快速的搭建 vue 的開發(fā)環(huán)境。
3、browserify：
一個全面的 Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
4、browserify-simple：
一個簡單 Browserify+vueify 的模板，不包含其他功能，讓你快速的搭建 vue 的開發(fā)環(huán)境。
5、simple：
一個最簡單的單頁應(yīng)用模板。
<project-name>：標(biāo)識項目名稱，用戶根據(jù)自己的項目來起名字。
② 項目初始化
在實際開發(fā)中，一般都會使用 webpack 這個模板，命令使用如下：
第一步操作：
PS E:\node> vue init webpack vue-cli296 ? Project name (vue-cli296)
Project name：項目名稱 ，默認(rèn)為初始化建項目的名稱 vue-cli296，不需要直接回車
第二步操作：
Project description (A Vue.js project)
Project description：項目描述，默認(rèn)為A Vue.js project，不需要直接回車
Author (cwgqmxy <1157818690@qq.com>)
Author：作者，如果有配置 git 的作者，自動會讀取。直接回車
第三步操作：
兩個選項，Runtime + Compiler 和 Runtime-only：
· Runtime + Compiler: recommended for most users （運行程序+編譯器:推薦給大多數(shù)用戶） · Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere （僅運行程序: 比上面那種模式輕大約 6KB min+gzip，但是 template (或任何特定于vue的html)只允許在.vue文件中使用——其他地方用需要 render 函數(shù)）
區(qū)別
1、runtime-only 比 runtime-compiler 輕 6kb
2、runtime-only 運行更快
3、runtime-only 其實只能識別 render 函數(shù)，不能識別 template，.vue 文件中的也是被 vue-template-compiler 翻譯成了 render 函數(shù)，所以只能在 .vue 里寫 template。
兩種模式生成的 腳手架 即（代碼模板）其實區(qū)別只有在 main.js 中，其他都是一樣的：
可以發(fā)現(xiàn)一個 是用 template + component 而另一個 則是 用 render 函數(shù)。
第四步操作：
Install vue-router? (Y/n)
Install vue-router?
是否安裝vue的路由插件，需要安裝，選擇Y
第五步操作：
Use ESLint to lint your code? (Y/n) 輸入 Y Pick an ESLint preset:選擇分支風(fēng)格 選項有三個（博主選了第一個） 1.standard(https://github.com/feross/standard) js的標(biāo)準(zhǔn)風(fēng)格 2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，這個github地址說是JavaScript最合理的方法 3.none (configure it yourself) 自己配置
Use ESLint to lint your code?
是否用 ESLint 來限制你的代碼錯誤和風(fēng)格。不需要輸入n，需要選擇y，如果是大型團隊開發(fā)，最好是進(jìn)行配置。
第六步操作：
Set up unit tests (Y/n)
是否需要安裝單元測試工具，不需要輸入n，需要選擇y
第七步操作：
Setup e2e tests with Nightwatch? (Y/n)
是否安裝E2E測試框架NightWatch（E2E，也就是End To End，就是所謂的“用戶真實場景”。
第八步操作：
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
(譯：項目創(chuàng)建后是否要為你運行 “npm install”？ 這里選擇包管理工具)
選項有三個
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己配置安裝包)
開始創(chuàng)建了項目，初始化完成之后會出現(xiàn)以下信息，表示操作成功。
PS E:\node> vue init webpack vue-cli296
? Project name vue-cli296
? Project description A Vue.js project
? Author cwgqmxy <1157818690@qq.com>
? Vue build runtime
? 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) npm
vue-cli · Generated "vue-cli296".
# Installing project dependencies ...
# ========================
npm WARN deprecated babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
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 html-webpack-plugin@2.30.1: out of support
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
> core-js@2.6.12 postinstall E:\node\vue-cli296\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 -)
> ejs@2.7.4 postinstall E:\node\vue-cli296\node_modules\ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
> es5-ext@0.10.60 postinstall E:\node\vue-cli296\node_modules\es5-ext
> node -e "try{require('./_postinstall')}catch(e){}"
#
# Fatal error in , line 0
# Check failed: U_SUCCESS(status).
#
#
#
#FailureMessage Object: 000000E8857BCE10[ ......] / postinstall: info lifecycle es5-ext@0.10.60~postinstall: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! Maximum call stack size exceeded
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2022-04-19T08_59_35_781Z-debug.log
Running eslint --fix to comply with chosen preset rules...
# ========================
> vue-cli296@1.0.0 lint E:\node\vue-cli296
> eslint --ext .js,.vue src "--fix"
# Project initialization finished!
# ========================
To get started:
cd vue-cli296
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
PS E:\node>
③ 目錄結(jié)構(gòu)詳解
④ 運行項目
環(huán)境崩潰了，從新裝node環(huán)境。
npm 是什么東東？
npm其實是Node.js的包管理工具（package manager）。
為啥我們需要一個包管理工具呢？
因為我們在Node.js上開發(fā)時，會用到很多別人寫的JavaScript代碼。
（http://caibaojian.com/npm/all.html）
講了這么多，npm究竟在哪？
其實npm已經(jīng)在Node.js安裝的時候順帶裝好了。我們在命令提示符或者終端輸入npm -v，
node 安裝適合小白
1 去node官網(wǎng)下載
中文官方網(wǎng)址：http://nodejs.cn/
下載網(wǎng)址：http://nodejs.cn/download/
官方網(wǎng)址：https://nodejs.org/en/
2 下載完成后雙擊安裝包，跳出安裝彈窗，點擊Next
以下一路 Next
node.js runtime：node 運行環(huán)境
orepack manager：npm 包管理
Online documentation shortcuts：在線文件快捷方式
Add to Path：添加路徑
corepack manager：核心包管理
不用打鉤，如果打了 √ 會把 node 所有的工具都下載，需要很久，以后要什么工具，直接npm下載。
安裝好啦
環(huán)境路徑已經(jīng)自動設(shè)置好了
可以去 cmd 窗口中查看安裝 node 和 npm 的版本號。
從新來過
上面環(huán)境崩潰了，從新搭建的環(huán)境。
PS E:\node> node -v v11.15.0 PS E:\node>
vue-cli 安裝
vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
PS E:\node> npm install vue-cli -g npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. C:\Program Files\nodejs\vue-init -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init C:\Program Files\nodejs\vue -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue C:\Program Files\nodejs\vue-list -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-list + vue-cli@2.9.6 added 245 packages from 230 contributors in 27.375s PS E:\node>
PS E:\node> vue --version 2.9.6 PS E:\node>
vue-cli 項目初始化
PS E:\node> vue init webpack vue296
? Project name vue296
? Project description A Vue.js project
? Author cwgqmxy <1157818690@qq.com>
? 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) npm
vue-cli · Generated "vue296".
# Installing project dependencies ...
# ========================
npm WARN deprecated babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
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 html-webpack-plugin@2.30.1: out of support
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
> core-js@2.6.12 postinstall E:\node\vue296\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 -)
> ejs@2.7.4 postinstall E:\node\vue296\node_modules\ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
> es5-ext@0.10.60 postinstall E:\node\vue296\node_modules\es5-ext
> node -e "try{require('./_postinstall')}catch(e){}"
> uglifyjs-webpack-plugin@0.4.6 postinstall E:\node\vue296\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@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1395 packages from 715 contributors in 76.245s
Running eslint --fix to comply with chosen preset rules...
# ========================
> vue296@1.0.0 lint E:\node\vue296
> eslint --ext .js,.vue src "--fix"
# Project initialization finished!
# ========================
To get started:
cd vue296
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
PS E:\node>
cd 命令進(jìn)入到項目目錄
npm run dev
成功頁面
package.json
{
"name": "vue296",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "cwgqmxy <1157818690@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}項目結(jié)構(gòu)
一個 vue-cli 的項目結(jié)構(gòu)如下，其中 src 文件夾是需要掌握，其余了解即可。
文件夾目錄如下：
1、build目錄（webpack配置）
build 文件主要是 webpack 的配置，目錄詳情如下：
2、config目錄（vue項目配置目錄）
config 文件主要是項目相關(guān)配置，常用的就是當(dāng)端口沖突時配置監(jiān)聽端口，打包輸出路徑及命名等，目錄詳情如下：
3、node_modules（項目依賴包）
node_modules 里面是項目依賴包，其中包括很多基礎(chǔ)依賴，自己也可以根據(jù)需要安裝其他依賴。安裝方法打開命令工具，進(jìn)入項目目錄，輸入 npm install [依賴包名稱]，回車。
安裝依賴：npm i
在兩種情況下我們會自己去安裝依賴：
》項目運行缺少該依賴包
》安裝插件：如 vuex
PS：有時會安裝指定依賴版本，需在依賴包名稱后加上版本號信息，
如 npm install vue-loader@11.1.4
src 項目核心文件講解
核心文件目錄前面已經(jīng)說明了，下面重點講解 index.html，main.js，App.vue，router 的 index.js，HelloWorld.vue。
1、index.html（主頁）
index.html 為項目的主頁，跟其他 html 一樣，但一般只定義一個空的根節(jié)點，在 main.js 里面定義的實例將掛載在根節(jié)點下，內(nèi)容都通過 vue 組件來填充。
說明如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-vue-demo</title>
</head>
<body>
<!-- 定義的vue實例將掛載在#app節(jié)點下 -->
<div id="app"></div>
</body>
</html>
2、main.js（入口文件）
main.js 為項目的入口文件，即單入口，主要是引入 vue 框架，根組件及路由設(shè)置，并且定義 vue 實例，說明如下：
// 引入vue框架
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'
// 關(guān)閉生產(chǎn)模式下給出的提示
Vue.config.productionTip = false
// 定義實例
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3、App.vue（根組件）
一個 vue 頁面通常由三部分組成：
模板 (template)
js (script)
樣式 (style)
說明如下：
<!-- 模板 --><template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div></template><!-- js代碼 --><script>export default {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> name: 'App'}</script><!-- css樣式 --><style>#app {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>[ template-模板 ]
（1） 模板只能包含一個父節(jié)點，也就是說頂層的 div 只能有一個
（如上圖，父節(jié)點為 #app 的 div，其沒有兄弟節(jié)點）
（2）是子路由視圖插槽，后面的路由頁面都顯示在此處，相當(dāng)于 iframe
【script-JS代碼】
vue 通常用 es6 來寫，用 export default 導(dǎo)出，其下面可以包含數(shù)據(jù) data，生命周期 ( mounted 等)，方法( methods )等。
【style-CSS樣式】
樣式通過 style 標(biāo)簽 <style></style> 包裹，默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加 scoped，<style scoped></style>。
引入外部CSS示例：
<style>
import './assets/css/public.css'
</style>
4、router（路由配置）
router文件夾下，有一個 index,js 的路由配置文件，
說明如下：
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件，命名為HelloWorld
import HelloWorld from '@/components/HelloWorld'
// 使用路由依賴
Vue.use(Router)
// 定義路由配置
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
5、HelloWorld.vue（頁面組件）
最熟悉的 HelloWorld 輸出，說明如下：
<template>
<div>
<!-- 輸出變量 -->
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
// 定義頁面名稱，可以不要
name: 'HelloWorld',
data () {
return {
// 定義變量
msg: 'HelloWorld'
}
}
}
</script>
<style scoped>
h1 {
font-size: 16px;
font-weight: normal;
}
</style>
網(wǎng)頁 CDN 引入 vue@2.6.14 示例
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script> https://unpkg.com/browse/vue@2.6.14/dist/ 選擇vue版本 https://unpkg.com/browse/vue@2.6.14/dist/vue.min.js
<!--第一步：創(chuàng)建文件夾及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之Helloworld</title>
<!--第二步：引入Vue庫-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<!--第三步:創(chuàng)建一個Div-->
<div id="app">
<!--Vue的模板的綁定數(shù)據(jù)的方法，用兩對花括號進(jìn)行綁定Vue中的數(shù)據(jù)對象的屬性 -->
{{message}}
</div>
<!--第四步：創(chuàng)建Vue的對象，并把數(shù)據(jù)綁定到上面創(chuàng)建好的div上去。-->
<script type="text/javascript">
var app=new Vue({ // 創(chuàng)建Vue對象。Vue的核心對象。
el:'#app', // el屬性：把當(dāng)前Vue對象掛載到 div標(biāo)簽上，#app是id選擇器
data:{ // data: 是Vue對象中綁定的數(shù)據(jù)
message:'hello Vue!' // message 自定義的數(shù)據(jù)
}
})
</script>
</body>
</html>
內(nèi)部指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之Helloworld</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- v-if -->
<div v-if="isLogin">你好</div>
<!-- v-else -->
<div v-else>請登錄后操作</div>
<!-- v-show -->
<div v-show="isLogin">你好</div>
<!-- v-else-if -->
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
<!-- v-for基本使用 -->
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
<!-- v-for高級使用 -->
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} - {{ value }}
</li>
</ul>
<!-- v-text -->
<div v-text="message"></div>
<!-- v-html -->
<div v-html="msgHtml"></div>
<!-- v-on部分 -->
<div>本場比賽得分：{{count}}</div>
<!-- 常規(guī)寫法 -->
<button v-on:click="add">加分</button>
<!-- @縮寫 -->
<button @click="add">加分</button><br/>
<!-- v-model input -->
<input type="text" v-model="message">
<br/>
<!-- v-model textarea -->
<textarea cols="30" rows="10" v-model="message"></textarea>
<br/>
<!-- v-model checkbox -->
<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">無效</label>
<div>狀態(tài)：{{status}}</div>
<!-- v-model radio -->
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性別：{{sex}}</div>
<!-- v-model select -->
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected: {{ selected }}</div>
<!-- v-model select -->
<img v-bind:src="imgSrc" width="200px"><br/>
<img :src="imgSrc" width="200px"><br/>
<!-- v-pre -->
<div v-pre>{{message}}</div>
<!-- v-cloak -->
<div v-cloak>{{message}}</div>
<!-- v-pre -->
<div v-once>第一次綁定的值：{{message}}</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isLogin: false,
type: 'A',
items:[20,23,18,65],
object: {
firstName: 'John',
lastName: 'Doe'
},
message: 'hello Vue',
msgHtml: '<h2>hello Vue!</h2>',
count: 1,
status: [],
sex: '男',
selected: '',
imgSrc:'http://liangxinghua.com/uploads/image/20180709/1531106987.png'
},
methods: {
add() {
this.count++;
}
}
})
</script>
</body>
</html>
（1）v-if
<div v-if="isLogin">你好</div>
（2）v-else
<div v-else>請登錄后操作</div>
（3）v-show
<div v-show="isLogin">你好</div>
（4）v-else-if
<div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div>
（5）v-if 與 v-show 的區(qū)別
v-if： 在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建，開銷較高，在運行時條件很少改變時使用。
v-show：調(diào)整css dispaly屬性，開銷較小，在常頻繁地切換時使用。
（6）v-for
（1）基本用法
<!-- 模板 -->
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<!--JS代碼 -->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65]
}
})
</script>
（2）對象遍歷
參數(shù)： 第一個為值，第二個為鍵名，第三個為索引
<!-- 模板 -->
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} - {{ value }}
</li>
</ul>
</div>
<!--JS代碼 -->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
object: {
firstName: 'John',
lastName: 'Doe'
}
}
})
</script>
（7）v-text
{{xxx}} 取值有個弊端，當(dāng)網(wǎng)速很慢或 javascript 出錯時，會在頁面顯示 {{xxx}}，Vue 提供的 v-text 可以解決這個問題。
<div>{{ message }}</div>
<!-- 和下面的一樣 -->
<div v-text="message"></div>
（8）v-html
用于輸出 html 代碼
<span v-html="msgHtml"></span><span v-html="msgHtml"></span>
（9）v-on
（1）常規(guī)用法
// html
<div>本場比賽得分：{{count}}</div>
<button v-on:click="add">加分</button>
// JS
data:{
count: 1
},
methods: {
add() {
this.count++;
}
}
（2）縮寫
<button @click="add">加分</button>
指令詳情的更多用法參照 v-on 官方 API
（10）v-model
以下的 model 都需要在 data 中聲明初始值：
data: {
message: 'hello Vue',
count: 1,
status: [],
sex: '男',
selected: ''
}
（1）input
（2）textarea
<input type="text" v-model="message"> <textarea cols="30" rows="10" v-model="message"></textarea>
（3）checkbox
<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">無效</label>
<div>狀態(tài)：{{status}}</div>
（4）radio
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性別：{{sex}}</div>
（5）select
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected: {{ selected }}</div>
（11）v-bind
用于處理 html 標(biāo)簽的動態(tài)屬性，即動態(tài)賦值。
（1）常規(guī)用法
// html
<img v-bind:src="imgSrc" width="200px">
// js
data: {
imgSrc:'http://liangxinghua.com/uploads/image/20180709/1531106987.png'
}
（2）縮寫
<img :src="imgSrc" width="200px">
指令詳情的更多用法參照 v-bind 官方 API
（12）v-pre
在模板中跳過 vue 的編譯，直接輸出原始值，如果在標(biāo)簽中加入 v-pre 就不會輸出 vue 中的data 值了。
<div v-pre>{{message}}</div>
（13）v-cloak
在 vue 渲染完指定的整個 DOM 后才進(jìn)行顯示。它必須和 CSS 樣式一起使用。
// css
[v-cloak] {
display: none;
}
// html
<div v-cloak>{{message}}</div>
（14）v-once
只顯示 DOM 第一次渲染的值，以后不改變了
<div v-once>第一次綁定的值：{{message}}</div>
生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之Helloworld</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
beforeCreate: function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 創(chuàng)建完畢狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 掛載結(jié)束狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
生命周期表格
| 周期 | 說明 |
|---|---|
| beforeCreate | 在實例初始化之后，數(shù)據(jù)觀測和事件配置之前被調(diào)用 |
| created | 在實例創(chuàng)建完成后被立即調(diào)用，完成數(shù)據(jù)觀測，屬性和方法的運算，初始化事件，$el屬性未見 |
| beforeMount | 在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用，只在虛擬DOM生成HTML |
| mounted | 在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用。實例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進(jìn)行ajax交互 |
| beforeUpdate | 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前?？梢栽谠撱^子中進(jìn)一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程 |
| updated | 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁之后調(diào)用。調(diào)用時，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因為這可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用 |
| activated | keep-alive 組件激活時調(diào)用 |
| deactivated | keep-alive 組件停用時調(diào)用 |
| beforeDestroy | 在實例銷毀之前調(diào)用。實例仍然完全可用 |
| destroyed | 在實例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用 |
生命周期圖解
階段一：創(chuàng)建和掛載
beforecreated：el 和 data 并未初始化
created：完成了 data 數(shù)據(jù)的初始化，el沒有
beforeMount：完成了 el 和 data 初始化
mounted ：完成掛載
階段二：更新
在 chrome console 執(zhí)行以下命令：
app.message= 'yes !! I do';
beforeUpdate：虛擬 DOM 中根據(jù) data 變化去更新 html
updated：將虛擬 DOM 更新完成的 HTML 更新到頁面中
階段三：銷毀
在 chrome console 執(zhí)行以下命令：
app.$destroy();
beforeDestroy：銷毀之前調(diào)用
destroyed：銷毀之后調(diào)用，之后再執(zhí)行app.message= ‘hello vue’，頁面不會同步更新。
常用選項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之Helloworld</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}}
<div>價格： {{newPrice}}</div>
<div>數(shù)字： {{count}}</div>
<div><button @click="add(2)">add</button></div>
<div><input v-model="question"></div>
<div>過濾： {{filtera | filterA}}</div>
</div>
<script type="text/javascript">
// 額外臨時加入時，用于顯示日志
var addLog={
updated:function(){
console.log("數(shù)據(jù)放生變化,變化成"+this.count+".");
}
}
// 擴展
var extendObj ={
created: function(){
console.log("我是被擴展出來的");
}
}
// 實例化vue
var app = new Vue({
// 掛載實例
el:'#app',
// 頁面數(shù)據(jù)初始化，字符，對象、數(shù)組
data:{
message: 'hello Vue!',
price: 100,
count: 100,
question: '',
filtera: 'abc'
},
// 計算屬性：主要是對原數(shù)據(jù)進(jìn)行改造輸出。
// 改造輸出：包括格式化數(shù)據(jù)（價格，日期），大小寫轉(zhuǎn)換，排序，添加符號
computed: {
newPrice () {
return '￥' + this.price + '元';
}
},
// 方法聲明：用于綁定html中的方法
methods:{
add (num) {
this.count += num;
}
},
// data屬性監(jiān)聽器, 作用v-model
watch: {
question(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
}
},
// 過濾器，通常格式化字符，使用傳值
filters: {
filterA(value) {
return value.toUpperCase();
}
},
// 混入，作用：減少代碼污染、減少代碼量、實現(xiàn)代碼重用
mixins: [addLog],
// 擴展
extends: extendObj
})
</script>
</body>
</html>
1、computed 計算屬性、改造輸出
計算屬性：主要是對原數(shù)據(jù)進(jìn)行改造輸出。
改造輸出：包括格式化數(shù)據(jù)（價格，日期），大小寫轉(zhuǎn)換，排序，添加符號。
computed: {
newPrice () {
return '￥' + this.price + '元';
}
}
2、methods 用于綁定 html 中的事件對應(yīng)的方法
方法屬性：用于綁定 html 中的事件對應(yīng)的方法
methods:{
add (num) {
this.count += num;
}
}
3、watch 數(shù)據(jù)變化監(jiān)聽器
數(shù)據(jù)變化監(jiān)聽器：主要用于監(jiān)測 data 中的數(shù)據(jù)變化， v-model 生效
watch: {
question(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
}
}
4、filters 過濾器：通常格式化字符，使用傳值
filters: {
filterA(value) {
return value.toUpperCase();
}
}
5、mixins 實現(xiàn)代碼重用
混入：用于減少代碼污染、減少代碼量、實現(xiàn)代碼重用
// 額外臨時加入時，用于顯示日志
var addLog={
updated:function(){
console.log("數(shù)據(jù)放生變化,變化成"+this.count+".");
}
}
// 實例化vue
var app = new Vue({
// 掛載實例
el:'#app',
// 頁面數(shù)據(jù)初始化，字符，對象、數(shù)組
data:{
count: 100
},
// 混入
mixins: [addLog]
})
6、extends 擴展：對構(gòu)造器進(jìn)行擴展
// 擴展
var extendObj ={
created: function(){
console.log("我是被擴展出來的");
}
}
// 實例化vue
var app = new Vue({
// 掛載實例
el:'#app',
// 頁面數(shù)據(jù)初始化，字符，對象、數(shù)組
data:{
},
// 擴展
extends: extendObj
})
實例事件
vue 有實例屬性，實例方法，實例事件，前兩個跟選項類似，不是很常用，這次只講實例事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之Helloworld</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>數(shù)字：{{count}}</div>
<button onclick="reduce()">on調(diào)用</button>
<button onclick="reduceOnce()">once調(diào)用</button>
<button onclick="off()">off調(diào)用</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
count: 1
}
})
// $on 在構(gòu)造器外部添加事件
app.$on('reduce',function(){
console.log('執(zhí)行了reduce()');
this.count--;
});
// 調(diào)用
function reduce() {
// 事件調(diào)用
console.log('emit事件調(diào)用');
app.$emit('reduce');
}
// $once執(zhí)行一次的事件
app.$once('reduceOnce',function(){
console.log('只執(zhí)行一次的方法');
this.count--;
});
// 調(diào)用
function reduceOnce() {
app.$emit('reduceOnce');
}
// 關(guān)閉事件
function off(){
console.log('關(guān)閉事件');
app.$off('reduce');
}
</script>
</body>
</html>
1、$on（在構(gòu)造器外部添加事件）
$on 接收兩個參數(shù)，第一個參數(shù)是調(diào)用時的事件名稱，第二個參數(shù)是一個匿名方法
app.$on('reduce',function(){
console.log('執(zhí)行了reduce()');
this.count--;
});
2、$once（執(zhí)行一次的事件）
app.$once('reduceOnce',function(){
console.log('只執(zhí)行一次的方法');
this.count--;
});
3、$off（關(guān)閉事件）
function off(){
console.log('關(guān)閉事件');
app.$off('reduce');
}
4、$emit（事件調(diào)用）
function reduce() {
// 事件調(diào)用
console.log('emit事件調(diào)用');
app.$emit('reduce');
}
自定義指令
vue 中的自定義指令通過 Vue.directive 來實現(xiàn)，主要完成內(nèi)置指令不能完成的一些事情。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之自定義指令</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-test="color">
{{num}}
</div>
</div>
<button onclick="unbindApp()">解綁</button>
<script type="text/javascript">
// 解綁
function unbindApp() {
app.$destroy();
}
// 自定義指令
Vue.directive("test",{
//1-被綁定
bind:function (el, binding, vnode) {
console.log("1-bind 被綁定");
console.log("el:",el);
console.log("binding:",binding);
console.log("vnode:",vnode);
el.style.color = binding.value;
},
//2-被插入
inserted:function (el, binding, vnode) {
console.log("2-inserted 被插入");
},
//3-更新
update:function (el, binding, vnode) {
console.log("3-update 更新");
},
//4-更新完成
componentUpdated:function (el, binding, vnode) {
console.log("4-componentUpdated 更新完成");
},
//5-解綁
unbind:function (el, binding, vnode) {
console.log("5-unbind 解綁");
}
});
var app = new Vue({
el:'#app',
data:{
num: 123,
color:'red'
}
})
</script>
</body>
</html>
1、調(diào)試步驟
（1）chrome打開控制器查看
（2）控制臺輸入“ app.num='通過控制臺設(shè)置的新name'”
（3）點擊解綁按鈕
2、參數(shù)說明
el：指令所綁定的元素，可以用來直接操作 DOM
binding： 一個對象，包含指令的很多信息
vnode:：Vue編譯生成的虛擬節(jié)點
3、生命周期
自定義指令有五個生命周期（也叫鉤子函數(shù)），分別是 bind、inserted、update、componentUpdated、unbind，說明如下：
1、bind：
只調(diào)用一次，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個綁定時執(zhí)行一次的初始化動作。
2、inserted：
被綁定元素插入父節(jié)點時調(diào)用（父節(jié)點存在即可調(diào)用，不必存在于document中）
3、update：
被綁定于元素所在的模板更新時調(diào)用，而無論綁定值是否變化。
通過比較更新前后的綁定值，可以忽略不必要的模板更新。
4、componentUpdated：被綁定元素所在模板完成一次更新周期時調(diào)用。
5、unbind：只調(diào)用一次，指令與元素解綁時調(diào)用
組件基礎(chǔ)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之組件</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 全局組件 -->
<div><button-counter></button-counter></div>
<!-- 局部組件 -->
<div><button-inner></button-inner></div>
<!-- 常規(guī)屬性傳值 -->
<div><button-props here="hello" from-here="world"></button-props></div>
<!-- v-bind傳值 -->
<div><button-props v-bind:here="message" :from-here="message"></button-props></div>
<!-- 父子組件調(diào)用 -->
<div><parent></parent></div>
</div>
<script type="text/javascript">
// 定義全局組件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">全局組件顯示： {{ count }}</button>'
});
// 子組件
var city = {
template:`<div>Sichuan of China</div>`
}
// 父組件
var parent = {
template:
`<div>
<p> Panda from China!</p>
<city></city>
</div>`,
components:{
"city": city
}
}
// 實例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
// 定義局部組件
components:{
"button-inner":{
data: function() {
return {
inner: 0
}
},
template: '<button v-on:click="inner++">局部組件顯示： {{ inner }}</button>'
},
// 取值
"button-props":{
template:`<div style="color:red;">參數(shù)1： {{ here }}:---參數(shù)2： {{fromHere}}</div>`,
props:['here', 'fromHere']
},
// 組件注冊
"parent": parent
}
});
</script>
</body>
</html>
1、組件注冊 component
（1）全局注冊
// script
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">全局組件顯示： {{ count }}</button>'
});
new Vue({
el: '#app'
});
// html使用
<button-counter></button-counter>
（2）局部注冊
// script
new Vue({
el: '#app',
components:{
"button-inner":{
data: function() {
return {
inner: 0
}
},
template: '<button v-on:click="inner++">局部組件顯示： {{ inner }}</button>'
}
}
});
// html使用
<button-inner></button-inner>
2、props 屬性傳值
（1）屬性取值
// script
new Vue({
el: '#app',
components:{
"button-props":{
template:`<div style="color:red;">參數(shù)1： {{ here }}:---參數(shù)2： {{fromHere}}</div>`,
props:['here', 'fromHere']
}
}
});
// html使用
<button-props here="hello" from-here="world"></button-props>
PS：如果屬性帶 “-”，props 中需要駝峰取值
（2）在構(gòu)造器向組件傳值（v-bind）
// script
new Vue({
el: '#app',
data: {
message: 'hello'
},
components:{
"button-props":{
template:`<div style="color:red;">參數(shù)1： {{ here }}:---參數(shù)2： {{fromHere}}</div>`,
props:['here', 'fromHere']
}
}
});
// html使用
<button-props v-bind:here="message" :from-here="message"></button-props>
3、父子組件
// script
// 子組件
var city = {
template:`<div>Sichuan of China</div>`
}
// 父組件
var parent = {
template:
`<div>
<p> Panda from China!</p>
<city></city>
</div>`,
components:{
"city": city
}
}
// 實例化
new Vue({
el: '#app',
// 定義局部組件
components:{
// 組件注冊
"parent": parent
}
});
// html使用
<parent></parent>
制作模板
vue 中的模板使用 template 來實現(xiàn)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之組件</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- template標(biāo)簽?zāi)０?-->
<template id="demo2">
<h2 style="color:red">我是template標(biāo)簽?zāi)０?lt;/h2>
</template>
</div>
<!-- script標(biāo)簽?zāi)０?-->
<script type="x-template" id="demo3">
<h2 style="color:red">我是script標(biāo)簽?zāi)０?lt;/h2>
</script>
<script type="text/javascript">
// 實例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
// 選項模板
//template:`<h1 style="color:red">我是選項模板</h1>`
//template:'#demo2'
template:'#demo3'
});
</script>
</body>
</html>
1、選項模板
<div id="app">
</div>
<script type="text/javascript">
// 實例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:`<h1 style="color:red">我是選項模板</h1>`
});
</script>
2、標(biāo)簽?zāi)０?/strong>
<div id="app">
<template id="demo2">
<h2 style="color:red">我是template標(biāo)簽?zāi)０?lt;/h2>
</template>
</div>
<script type="text/javascript">
// 實例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:'#demo2'
});
</script>
3、<script> 標(biāo)簽?zāi)０?/strong>
<div id="app">
</div>
<script type="x-template" id="demo3">
<h2 style="color:red">我是script標(biāo)簽?zāi)０?lt;/h2>
</script>
<script type="text/javascript">
// 實例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:'#demo3'
});
</script>
插槽 slot
插槽，也就是 slot，是組件的一塊HTML模板，一個 slot 最核心的兩個問題是顯示不顯示和怎樣顯示。
1、單個 slot
單個插槽，別名默認(rèn)插槽、匿名插槽，不用設(shè)置 name 屬性。
<div id="app">
<children1>
<span>12345</span>
</children1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
components: {
children1: {
template: "<button><slot></slot>單個插槽</button>"
}
}
});
</script>
2、具名 slot
插槽加了 name 屬性，就變成了具名插槽。
具名插槽可以在一個組件中出現(xiàn) N 次，出現(xiàn)在不同的位置。
<div id="app">
<children2>
<span slot="first" @click="tobeknow">12345</span>
<span slot="second">56789</span>
</children2>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
methods: {
tobeknow: function () {
console.log("It is the parent's method");
}
},
components: {
children2: {//這個無返回值，不會繼續(xù)派發(fā)
template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
}
}
});
</script>
3、作用域 slot
vue2.5 版本中 slot-scope 取代了 scope，來實現(xiàn)作用域插槽，主要用在組件調(diào)用中，具體在 template 標(biāo)簽上面使用 slot-scope 來獲取插槽 slot 上面的屬性值，獲取值的為一個對象，slot-scope=”它可以取任意字符串”，在 element-ui 的組件中經(jīng)常看到。
<div id="app">
<!-- 將數(shù)據(jù)傳遞給組件 -->
<tb-list :data="data">
<!-- 獲取slot上面的值 -->
<template slot-scope="scope">
<p>索引：{{JSON.stringify(scope)}}</p>
<p>索引：{{scope.$index}}</p>
<p>姓名:{{scope.row.name}}</p>
<p>年齡: {{scope.row.age}}</p>
<p>性別: {{scope.row.sex}}</p>
</template>
</tb-list>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
data: [{
name: 'kongzhi1',
age: '29',
sex: 'man'
}]
},
components: {
// 作用域slot
'tb-list': {
template:
`<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index"></slot>
</li>
</ul>`,
// 獲取值
props: ['data']
}
}
});
</script>
Vue 項目中應(yīng)用 vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。
包含的功能有：
- 嵌套的路由/視圖表、
- 模塊化的、基于組件的路由配置、
- 路由參數(shù)、查詢、通配符、
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果、
- 細(xì)粒度的導(dǎo)航控制、
- 帶有自動激活的 CSS class 的鏈接、
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級、
- 自定義的滾動條行為
快速入門
vue-router 是 vue 官方的路由解決方案，簡單易用，中文官方地址如下：vue-router 中文手冊
安裝
vue-router 是一個插件包，需要用 npm 來進(jìn)行安裝的。如果采用 vue-cli 構(gòu)建初始化項目會提示安裝，也可以自己使用命令安裝：
npm install vue-router --save
解讀核心文件
用 vue-cli 構(gòu)建項目之后，在 src/router/index.js 文件中，看到以下的路由核心文件：
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件，命名為 HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定義路由配置
export default new Router({
routes: [ //配置路由，這里是個數(shù)組
{ //每一個鏈接都是一個對象
path: '/', //鏈接路徑
name: 'HelloWorld', //路由名稱，
component: HelloWorld //對應(yīng)的組件模板
}
]
})
使用
在系統(tǒng)入口文件 main.js 中注入 router，代碼如下：
// 引入vue框架
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'
// 關(guān)閉生產(chǎn)模式下給出的提示
Vue.config.productionTip = false
// 定義實例
new Vue({
el: '#app',
router, // 注入框架中
components: { App },
template: '<App/>'
})
路由屬性配置說明
代碼如下：
export default new Router({
mode: 'history', //路由模式，取值為history與hash
base: '/', //打包路徑，默認(rèn)為/，可以修改
routes: [
{
path: string, //路徑
ccomponent: Component; //頁面組件
name: string; // 命名路由-路由名稱
components: { [name: string]: Component }; // 命名視圖組件
redirect: string | Location | Function; // 重定向
props: boolean | string | Function; // 路由組件傳遞參數(shù)
alias: string | Array<string>; // 路由別名
children: Array<RouteConfig>; // 嵌套子路由
beforeEnter?: (to: Route, from: Route, next: Function) => void; // 路由單獨鉤子
meta: any; // 自定義標(biāo)簽屬性，比如：是否需要登錄
icon: any; // 圖標(biāo)
// 2.6.0+
caseSensitive: boolean; // 匹配規(guī)則是否大小寫敏感？(默認(rèn)值：false)
pathToRegexpOptions: Object; // 編譯正則的選項
}
]
})
頁面跳轉(zhuǎn)
一、router-link 標(biāo)簽跳轉(zhuǎn)
在 html 標(biāo)簽內(nèi)使用 router-link 跳轉(zhuǎn)，相應(yīng)于超鏈接 a 標(biāo)簽，使用方式如下：
<router-link to="/">[顯示字段]</router-link>
to：導(dǎo)航路徑
使用示例如下：
<p>導(dǎo)航 ： <router-link to="/">首頁</router-link> <router-link to="/hello">hello</router-link> </p>
二、編程式導(dǎo)航-JS代碼內(nèi)部跳轉(zhuǎn)
實際項目中，很多時候都是通過在JS代碼內(nèi)部進(jìn)行導(dǎo)航的跳轉(zhuǎn)，使用方式如下：
this.$router.push('/xxx')
具體的簡單用法：
（1）先編寫一個按鈕，在按鈕上綁定 goHome( ) 方法。
<button @click="goHome">回到首頁</button>
（2）在 <script> 模塊里加入 goHome 方法，并用 this.$router.push(‘/’) 導(dǎo)航到首頁
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/home');
}
}
}
三、其他常用方法
// 后退一步記錄，等同于 history.back() this.$router.go(-1) // 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward() this.$router.go(1)
子路由-路由嵌套
子路由，也叫路由嵌套，采用在 children 后跟路由數(shù)組來實現(xiàn)，數(shù)組里和其他配置路由基本相同，需要配置 path 和 component，然后在相應(yīng)部分添加 <router-view/> 來展現(xiàn)子頁面信息，相當(dāng)于嵌入 iframe 。
1、src/components/Home.vue（父頁面）
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- 添加子路由導(dǎo)航 -->
<p>導(dǎo)航 ：
<router-link to="/home">首頁</router-link> |
<router-link to="/home/one">-子頁面1</router-link> |
<router-link to="/home/two">-子頁面2</router-link>
</p>
<!-- 子頁面展示部分 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Home Page!'
}
}
}
</script>
<style scoped>
</style>
2、src/components/One.vue（子頁面1）
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'One',
data () {
return {
msg: 'Hi, I am One Page!'
}
}
}
</script>
<style scoped>
</style>
3、src/components/Two.vue（子頁面2）
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Two',
data () {
return {
msg: 'Hi, I am Two Page!'
}
}
}
</script>
<style scoped>
</style>
4、src/router/index.js（路由配置）
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home'
},
{
path: '/home', // 主頁路由
name: 'Home',
component: Home,
children:[ // 嵌套子路由
{
path:'one', // 子頁面1
component:One
},
{
path:'two', // 子頁面2
component:Two
},
]
}
]
})
路由傳遞參數(shù)
1、通過 <router-link> 標(biāo)簽中的 to 傳參
基本語法：
<router-link :to="{name:xxx, params: {key:value}}">
valueString
</router-link>
PS：上面 to 前邊是帶冒號，后邊跟的是一個對象形勢的字符串
name：在路由配置文件中起的 name 值。叫做命名路由，下一節(jié)會講到。
params：要傳的參數(shù)，它是對象形式，在對象里可以傳遞多個值。
具體實例如下：
（1）在 src/components/Home.vue 里面導(dǎo)航中添加如下代碼：
<router-link :to="{name: 'one', params:{username:'test123'}}">
子頁面1
</router-link>
（2）在 src/router/indes.js 中添加如下代碼，重點是 name：
{
path:'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component:One
}
（3）在 src/components/One.vue 里面接受參數(shù)，代碼如下：
<h2>{{$route.params.username}}</h2>
2、url 中傳遞參數(shù)
（1）在路由中以冒號傳遞，在 src/router/index.js 中加入如下代碼：
{
path:'/home/two/:id/:name', // 子頁面2
component:Two
},
（2）接受參數(shù)，在 src/components/Two.vue 中加入如下代碼：
<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>
（3）路由跳轉(zhuǎn)，在 src/components/Home.vue 中加入如下代碼：
<router-link to="/home/two/1/張三">子頁面2</router-link>
PS：to 前沒有冒號為字符串路由，必須全部匹配。
（4）如果路由參數(shù)需要有特定的規(guī)則，就需要加入正則表達(dá)式了，示例如下：
{
path:'/home/two/:id(\\d+)/:name', // 子頁面2
component:Two
}
源碼 E:\node\vue296\src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home'
},
{
path: '/home', // 主頁路由
name: 'Home',
component: Home,
children: [ // 嵌套子路由
{
path: 'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component: One
},
{
path: '/home/two/:id/:name', // 子頁面2
component: Two
},
]
}
]
})
E:\node\vue296\src\components\Two.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>
</div>
</template>
<script>
export default {
name: 'Two',
data () {
return {
msg: 'Hi, I am Two Page!'
}
}
}
</script>
<style scoped>
</style>
E:\node\vue296\src\components\Home.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- 添加子路由導(dǎo)航 -->
<p>導(dǎo)航 ：
<router-link to="/home">首頁</router-link> |
<router-link to="/home/one">-子頁面1</router-link> |
<router-link to="/home/two">-子頁面2</router-link>
<br>
<router-link :to="{name: 'one', params:{username:'test123'}}">子頁面1傳遞參數(shù)</router-link>
<br>
<router-link to="/home/two/1/張三">子頁面2</router-link>
</p>
<!-- 子頁面展示部分 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Home Page!'
}
}
}
</script>
<style scoped>
</style>
編程式導(dǎo)航 -params 傳遞參數(shù)
（1）在 src/router/index.js 頁面加入如下代碼：
{
path:'/home/three', // 子頁面3
name: 'three',
component:Three
}
（2）在 src/components/Three.vue 頁面加入如下代碼：
<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>
（3）在 src/components/Home.vue 中加入如下代碼：
// template
<button @click="toThreePage">頁面3-params傳參</button>
// script
methods: {
toThreePage() {
this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
}
}
說明：
A、動態(tài)路由使用 params 傳遞參數(shù)，在 this.$router.push() 方法中 path 不能和 params 一起使用，否則 params 將無效。需要用 name 來指定頁面。
B、以上方式參數(shù)不會顯示到瀏覽器的地址欄中，如果刷新一次頁面，就獲取不到參數(shù)了，改進(jìn)方式將第一部中的代碼改成如下：
{
path:'/home/three/:id/:name', // 子頁面3
name: 'three',
component:Three
}
源碼 E:\node\vue296\src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
import Three from '@/components/Three'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home'
},
{
path: '/home', // 主頁路由
name: 'Home',
component: Home,
children: [ // 嵌套子路由
{
path: 'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component: One
},
{
path: '/home/two/:id/:name', // 子頁面2
component: Two
},
{
path:'/home/three/:id/:name', // 子頁面3
name: 'three',
component:Three
}
]
}
]
})
E:\node\vue296\src\components\Three.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>
</div>
</template>
<script>
export default {
name: 'Three',
data () {
return {
msg: 'Hi, I am Three Page!'
}
}
}
</script>
<style scoped>
</style>
E:\node\vue296\src\components\Home.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- 添加子路由導(dǎo)航 -->
<p>導(dǎo)航 ：
<router-link to="/home">首頁</router-link> |
<router-link to="/home/one">-子頁面1</router-link> |
<router-link to="/home/two">-子頁面2</router-link>
<br>
<router-link :to="{name: 'one', params:{username:'test123'}}">子頁面1傳遞參數(shù)</router-link>
<br>
<router-link to="/home/two/1/張三">子頁面2</router-link>
<br>
<button @click="toThreePage">頁面3-params傳參</button>
</p>
<!-- 子頁面展示部分 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Home Page!'
}
},
methods: {
toThreePage() {
this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
}
}
}
</script>
<style scoped>
</style>
編程式導(dǎo)航 -query 傳遞參數(shù)
（1）在 src/router/index.js 頁面加入如下代碼：
{
path:'/home/three', // 子頁面3
name: 'three',
component:Three
}
（2）在 src/components/Three.vue 頁面加入如下代碼：
<p>ID：{{ $route.query.id}}</p>
<p>名稱：{{ $route.query.name}}</p>
（3）在 src/components/Home.vue 中加入如下代碼：
// template
<button @click="toThreePage">頁面3-params傳參</button>
// script
methods: {
toThreePage() {
this.$router.push({path: '/home/three', query: {id: 1, name: 'zhangsan'}})
}
}
PS：動態(tài)路由使用 query 傳遞參數(shù)，會顯示到瀏覽器地址欄中，
以上鏈接為 /home/three?id=1&name=zhangsan。
源碼
E:\node\vue296\src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
import Three from '@/components/Three'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home'
},
{
path: '/home', // 主頁路由
name: 'Home',
component: Home,
children: [ // 嵌套子路由
{
path: 'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component: One
},
{
path: '/home/two/:id/:name', // 子頁面2
component: Two
},
{
path:'/home/three', // 子頁面3
name: 'three',
component:Three
}
]
}
]
})
E:\node\vue296\src\components\Three.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>ID：{{ $route.query.id}}</p>
<p>名稱：{{ $route.query.name}}</p>
</div>
</template>
<script>
export default {
name: 'Three',
data () {
return {
msg: 'Hi, I am Three Page!'
}
}
}
</script>
<style scoped>
</style>
E:\node\vue296\src\components\Home.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- 添加子路由導(dǎo)航 -->
<p>導(dǎo)航 ：
<router-link to="/home">首頁</router-link> |
<router-link to="/home/one">-子頁面1</router-link> |
<router-link to="/home/two">-子頁面2</router-link>
<br>
<router-link :to="{name: 'one', params:{username:'test123'}}">子頁面1傳遞參數(shù)</router-link>
<br>
<router-link to="/home/two/1/張三">子頁面2</router-link>
<br>
<button @click="toThreePage">頁面3-params傳參</button>
</p>
<!-- 子頁面展示部分 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Home Page!'
}
},
methods: {
toThreePage() {
this.$router.push({path: '/home/three', query: {id: 1, name: 'zhangsan'}})
}
}
}
</script>
<style scoped>
</style>
命名路由-命名視圖-重定向-別名
1、命名路由
給一個路由命一個唯一的名稱，然后跳轉(zhuǎn)調(diào)用這個名稱即可。
（1）在 src/router/index.js 中加一個帶 name 的路由，代碼如下：
{
path: 'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component: One // 頁面組件
}
（2）在 src/component/Home.vue 頁面中調(diào)用，代碼如下：
// template跳轉(zhuǎn)調(diào)用
<router-link :to="{name: 'one'}">子頁面1</router-link>
// router.push函數(shù)跳轉(zhuǎn)調(diào)用
router.push({ name: 'user'}})
2、命名視圖
在同一個頁面展示多個視圖，如果不用嵌套，只能采用命名視圖來實現(xiàn)了。
代碼如下：
（1）在 src/router/index.js 中，代碼如下：
import Vue from 'vue'
import Router from 'vue-router'
// 創(chuàng)建頁面組件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' }
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 主頁路由
components: {
default: Header,
a: Left,
b: Right
}
}
]
})
（2）在 src/App.vue 中，代碼如下：
<template>
<div id="app">
<router-view />
<router-view name="a" class="left" />
<router-view name="b" class="right" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
width: 500px;
border: 1px solid red;
margin: 0 auto;
}
.left,.right{
float: left;
width:48%;
text-align: center;
border:1px solid red
}
</style>
PS：經(jīng)過實踐，命名視圖只能放在最頂級的頁面中，即第一步中的代碼不能放在其他頁面中。
3、重定向
重定向是通過 route 的配置中關(guān)鍵詞 redirect 來實現(xiàn)的，具體代碼如下：
（1）在 src/router/index.js 中，代碼如下：
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home' // 重定向
},
{
path: '/home', // 主頁路由
component: Home,
children:[ // 嵌套子路由
{
path:'/home/two/:id/:name', // 子頁面2
component:Two
},
{
path:'/home/three/:id/:name', // 子頁面3
name: 'three', // 路由名稱-命名路由
redirect: '/home/two/:id/:name' // 重定向-傳遞參數(shù)
},
]
}
]
})
（2）在 src/components/Home.vue 中，代碼如下：
<router-link to="/">首頁</router-link> |
<router-link to="/home/two/1/lisi">子頁面2</router-link> |
<router-link :to="{name: 'three', params: {id: 1, name: 'zhangsan'}}">
子頁面3
</router-link>
說明1-不帶參數(shù)的重定向：
redirect: '/home' // 重定向-不帶參數(shù)
說明2-帶參數(shù)的重定向：
redirect: '/home/two/:id/:name' // 重定向-傳遞參數(shù)
4、別名
重定向是通過 route 的配置中關(guān)鍵詞 alias 來實現(xiàn)的，具體代碼如下：
（1）在 src/router/index.js 中，代碼如下：
{
path:'/one', // 子頁面1
component:One,
alias: '/oneother'
}
（2）在 src/components/Home.vue 中，代碼如下：
<router-link to="/oneother">子頁面1</router-link>
說明1：redirect 和 alias 的區(qū)別
redirect：直接改變了 url 的值，把 ur l變成了真實的 path 路徑。\
alias：
url 路徑?jīng)]有別改變，這種更友好，讓用戶知道自己訪問的路徑，只是改變了 <router-view> 中的內(nèi)容。
說明2：別名請不要用在 path 為 ’/’ 中，如下代碼的別名是不起作用的。
<router-link to="/oneother">子頁面1</router-link>
過渡動畫
（1）在 <router-view> 標(biāo)簽的外部添加 <transition> 標(biāo)簽，標(biāo)簽還需要一個 name 屬性，代碼如下：
<transition name="fade" mode="out-in">
<router-view />
</transition>
過渡模式 mode
in-out：新元素先進(jìn)入過渡，完成之后當(dāng)前元素過渡離開，默認(rèn)模式。
out-in：當(dāng)前元素先進(jìn)行過渡離開，離開完成后新元素過渡進(jìn)入。
（2）加入CSS，一共4個CSS類名，四個類名與 transition 的 name 屬性有關(guān)，比如name=”fade”，相應(yīng)的 css 如下：
/*頁面切換動畫*/
/*進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時就生效，在過渡過程完成后移除*/
.fade-enter-active {
transition: opacity .5s;
}
/*進(jìn)入過渡的開始狀態(tài)，元素被插入時生效，只應(yīng)用一幀后立刻刪除*/
.fade-enter {
opacity: 0;
}
/*離開過渡的開始狀態(tài)，元素被刪除時觸發(fā)，只應(yīng)用一幀后立刻刪除*/
.fade-leave {
opacity: 1;
}
/*離開過渡的結(jié)束狀態(tài)，元素被刪除時生效，離開過渡完成后被刪除*/
.fade-leave-active {
opacity:0;
transition: opacity .5s;
}
文件：E:\node\vue296\src\App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/*頁面切換動畫*/
/*進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時就生效，在過渡過程完成后移除*/
.fade-enter-active {
transition: opacity .5s;
}
/*進(jìn)入過渡的開始狀態(tài)，元素被插入時生效，只應(yīng)用一幀后立刻刪除*/
.fade-enter {
opacity: 0;
}
/*離開過渡的開始狀態(tài)，元素被刪除時觸發(fā)，只應(yīng)用一幀后立刻刪除*/
.fade-leave {
opacity: 1;
}
/*離開過渡的結(jié)束狀態(tài)，元素被刪除時生效，離開過渡完成后被刪除*/
.fade-leave-active {
opacity:0;
transition: opacity .5s;
}
</style>mode 與 404
1、mode 模式
代碼示例：
export default new Router({
mode: 'history', //mode模式
routes: [...]
})
mode取值說明：
（1）histroy：URL就像正常的 url，示例：http://localhost:8080/home
（2） hash：默認(rèn)值，會多一個 “#”，示例：http://localhost:8080/#/home
2、404頁面設(shè)置
如果訪問的路由不存在，或者用戶輸入錯誤時，會有一個404友好的提示頁面，配置如下：
（1）在 /src/router/index.js 中加入如下代碼：
// 404
{
path: '*',
component: () => import('@/components/404')
}
（2）在 src/components/404.vue 中編寫如下代碼：
<template>
<div class="hello">
<h1>404 not found</h1>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style scoped>
</style>
路由鉤子
路由鉤子，即導(dǎo)航鉤子，其實就是路由攔截器，vue-router 一共有三類：
1、全局鉤子：最常用
2、路由單獨鉤子
3、組件內(nèi)鉤子
1、全局鉤子
在 src/router/index.js 中使用，代碼如下：
// 定義路由配置
const router = new VueRouter({ ... })
// 全局路由攔截-進(jìn)入頁面前執(zhí)行
router.beforeEach((to, from, next) => {
// 這里可以加入全局登陸判斷
// 繼續(xù)執(zhí)行
next();
});
// 全局后置鉤子-常用于結(jié)束動畫等
router.afterEach(() => {
//不接受next
});
export default router;
每個鉤子方法接收三個參數(shù)：
to: Route : 即將要進(jìn)入的目標(biāo) [路由對象]
from: Route : 當(dāng)前導(dǎo)航正要離開的路由
next: Function : 繼續(xù)執(zhí)行函數(shù)
next()：繼續(xù)執(zhí)行
next(false)：中斷當(dāng)前的導(dǎo)航。
next(‘/‘) 或 next({ path: ‘/‘ })：跳轉(zhuǎn)新頁面，常用于登陸失效跳轉(zhuǎn)登陸
2、路由單獨鉤子
使用：在路由配置中單獨加入鉤子，在 src/router/index.js 中使用，代碼如下：
{
path:'/home/one', // 子頁面1
component: One,
// 路由內(nèi)鉤子
beforeEnter: (to, from, next) => {
console.log('進(jìn)入前執(zhí)行');
next();
}
}
3、組件內(nèi)鉤子
使用：在路由組件內(nèi)定義鉤子函數(shù)：
beforeRouteEnter：進(jìn)入頁面前調(diào)用 beforeRouteUpdate (2.2 新增)：頁面路由改變時調(diào)用，一般需要帶參數(shù) beforeRouteLeave：離開頁面調(diào)用
任意找一頁面，編寫如下代碼：
<script>
export default {
name: 'Two',
data () {
return {
msg: 'Hi, I am Two Page!'
}
},
// 進(jìn)入頁面前調(diào)用
beforeRouteEnter(to, from, next) {
console.log('進(jìn)入enter路由鉤子')
next()
},
// 離開頁面調(diào)用
beforeRouteLeave(to,from, next){
console.log('進(jìn)入leave路由鉤子')
next()
},
// 頁面路由改變時調(diào)用
beforeRouteUpdate(to, from, next) {
console.log('進(jìn)入update路由鉤子')
console.log(to.params.id)
next()
}
}
</script>
路由懶加載
1、路由正常模式：
// 1、先引入頁面組件
import Home from '@/components/Home'
// 2、使用組件
{
path: '/home',
component: Home
}
2、懶加載模式
大項目中，為了提高初始化頁面的效率，路由一般使用懶加載模式，一共三種實現(xiàn)方式。
（1）第一種寫法：
component: (resolve) => require(['@/components/One'], resolve)
（2）第二種寫法：
component: () => import('@/components/Two')
（3）第三種寫法：
components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')
PS：
一般常用第二種簡寫
第三種中，’group-home’ 是把組件按組分塊打包, 可以將多個組件放入這個組中，在打包的時候 Webpack 會將相同 chunk 下的所有異步模塊打包到一個異步塊里面。
路由懶加載用法：E:\node\vue296\src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
import Three from '@/components/Three'
Vue.use(Router)
export default new Router({
mode: 'history', //mode模式
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home'
},
{
path: '/home', // 主頁路由
name: 'Home',
component: Home,
children: [ // 嵌套子路由
{
path: 'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component: One
},
{
path: '/home/two/:id/:name', // 子頁面2
component: Two
},
{
path:'/home/three', // 子頁面3
name: 'three',
component:Three
}
]
},
{
path: '*',
component: () => import('@/components/404')
}
]
})
vuex 背景引言
1、vuex是什么？
vuex是一個專為 Vue.js 應(yīng)用程序開發(fā)的 狀態(tài)管理模式。
它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
chrome 安裝調(diào)試工具 devtools extension。
2、單向數(shù)據(jù)流
示意圖說明：
State：驅(qū)動應(yīng)用的數(shù)據(jù)源（單向數(shù)據(jù)流）
View：以聲明方式將 state 映射到視圖（靜態(tài)顯示出來的數(shù)據(jù)源）
Actions：處理用戶在 view 上面操作而導(dǎo)致的狀態(tài)變化（數(shù)據(jù)源變化追蹤）
一個簡單的 demo 案例：E:\node\vue296\src\router\index.js
// 引入組件
import HelloWorld from '@/components/HelloWorld'
// 添加路由
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld,
}
E:\node\vue296\src\components\Home.vue 首頁
<!-- 添加跳轉(zhuǎn) --> <router-link to="/hello">Hello頁</router-link>
E:\node\vue296\src\components\HelloWorld.vue 案例頁
<template>
<div>
<!-- view -->
<div>{{ count }}</div>
<button @click="increment">increment</button>
</div>
</template>
<script>
export default {
// state
data () {
return {
count: 0
}
},
// actions
methods: {
increment () {
this.count++
}
}
}
</script>
<style scoped>
</style>
3、vuex 解決的問題
多個視圖組件，包括父子組件，兄弟組件之間的狀態(tài)共享。
不同視圖組件的行為需要變更同一個狀態(tài)。
4、vuex 使用場景
中大型單頁應(yīng)用，需要考慮如何更好地在組件外部管理狀態(tài)，簡單應(yīng)用不建議使用。
5、vuex 與全局變量的區(qū)別
響應(yīng)式：
vuex 的狀態(tài)存儲是響應(yīng)式的，當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會得到高效更新。
不能直接改變store：
不能直接改變 store 的變化，改變 store 中狀態(tài)的唯一途徑是 commit mutation，方便于跟蹤每一個狀態(tài)的變化。
6、vuex 核心流程
示意圖說明：
1、Vue Components Vue組件：
HTML頁面上，負(fù)責(zé)接收用戶操作等交互行為，執(zhí)行 dispatch 方法觸發(fā)對應(yīng) action 進(jìn)行回應(yīng)。
2、Dispatch：操作行為觸發(fā)方法，是唯一能執(zhí)行 action 的方法。
3、Actions 操作行為處理模塊：
負(fù)責(zé)處理 Vue Components 接收到的所有交互行為。
包含同步/異步操作，支持多個同名方法，按照注冊的順序依次觸發(fā)。
向后臺API請求的操作就在這個模塊中進(jìn)行，包括觸發(fā)其他 action 以及提交 mutation 的操作。該模塊提供了 Promise 的封裝，以支持 action 的鏈?zhǔn)接|發(fā)。
4、Commit 態(tài)改變提交操作方法：
狀對 mutation 進(jìn)行提交，是唯一能執(zhí)行 mutation 的方法。
5、Mutations 狀態(tài)改變操作方法：
是 Vuex 修改 state 的唯一推薦方法，其他修改方式在嚴(yán)格模式下將會報錯。
該方法只能進(jìn)行同步操作，且方法名只能全局唯一。
操作之中會有一些 hook 暴露出來，以進(jìn)行 state 的監(jiān)控等。
6、State 頁面狀態(tài)管理容器對象：
集中存儲 Vue components 中 data 對象的零散數(shù)據(jù)，全局唯一，以進(jìn)行統(tǒng)一的狀態(tài)管理。頁面顯示所需的數(shù)據(jù)從該對象中進(jìn)行讀取，利用Vue的細(xì)粒度數(shù)據(jù)響應(yīng)機制來進(jìn)行高效的狀態(tài)更新。
7、Getters：state對象讀取方法。
圖中沒有單獨列出該模塊，應(yīng)該被包含在了render 中，Vue Components 通過該方法讀取全局 state 對象。
總結(jié)說明：
Vue 組件接收交互行為，調(diào)用 dispatch 方法觸發(fā) action 相關(guān)處理，若頁面狀態(tài)需要改變，則調(diào)用 commit 方法提交 mutation 修改 state，通過 getters 獲取到 state 新值，重新渲染Vue Components，界面隨之更新。
入門示例
安裝
PS E:\node\vue296> npm install --save vuex@3.6.2
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ vuex@3.6.2
removed 1 package and updated 1 package in 8.474s
PS E:\node\vue296>
（1）新建 src/vuex/store.js 中寫入以下代碼：
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
// 1、state：創(chuàng)建初始化狀態(tài)
const state = {
// 放置初始狀態(tài)
count: 1
}
// 2、mutations：創(chuàng)建改變狀態(tài)的方法
const mutations = {
// 狀態(tài)變更函數(shù)-一般大寫
ADD (state, n) {
state.count += n;
}
}
// 3、getters：提供外部獲取state
const getters = {
count: function(state){
return state.count;
}
}
// 4、actions：創(chuàng)建驅(qū)動方法改變mutations
const actions ={
// 觸發(fā)mutations中相應(yīng)的方法-一般小寫
add ({commit}, data) {
commit('ADD', data)
}
}
// 5、全部注入Store中
const store = new Vuex.Store({
state,
mutations,
getters,
actions
});
// 6、輸出store
export default store;
代碼說明：
state - mutations - getters - actions - store，以上寫法基本固定。
小型項目用上面的簡單管理狀態(tài)即可。
（2）src/main.js 代碼中添加
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入store
import store from './vuex/store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // 全局注入
components: { App },
template: '<App/>'
})
（3）src/compontent/Count.vue 頁面組件中代碼如下：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{count}}</h2>
<button @click="clickAdd">新增</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Vuex test!'
}
},
computed: {
// 獲取 state 值
count() {
return this.$store.state.count;
}
},
methods: {
clickAdd() {
//分發(fā)action中的add方法
this.$store.dispatch('add', 1);
}
}
}
</script>
<style scoped>
</style>
state-狀態(tài)對象的獲取方法
1、在組件的 template 中直接使用
<h2>{{ $store.state.count }}</h2>
2、在計算屬性 computed 中直接賦值
// 方式1：直接獲取
computed: {
count() {
// this指的是main.js中的vue實例對象
return this.$store.state.count;
}
}
3、通過 mapState 的對象來賦值
// 方式2：利用mapState
computed: mapState({
// es5寫法
count: function (state) {
return state.count;
},
// es6寫法
count: state => state.count
})
4、通過 mapState 的數(shù)組來賦值
// 方式3：數(shù)組獲取 computed: mapState(['count'])
5、通過 mapState 的 JSON 來賦值
// 方式4：JSON獲取
computed: mapState({
count: 'count'
})
PS：一般 4 和 5 兩種比較常用
完整示例代碼：E:\node\vue296\src\components\Count.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{ $store.state.count }}</h2>
<h2>{{count}}</h2>
<button @click="clickAdd">新增</button>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
data () {
return {
msg: 'Vuex test!'
}
},
// 方式1：在計算屬性computed中直接賦值
// computed: {
// count() {
// // this指的是main.js中的vue實例對象
// return this.$store.state.count;
// }
// },
// 方式2：通過mapState的對象來賦值
// computed: mapState({
// // es5
// // count: function (state) {
// // return state.count;
// // },
// // es6
// count: state => state.count
// }),
// 方式3：通過mapState的對象來賦值
// computed: mapState(['count']),
// 方式4：通過mapState的JSON來賦值
computed: mapState({
count: 'count'
}),
methods: {
clickAdd() {
//分發(fā)action中的add方法
this.$store.dispatch('add', 1);
}
}
}
</script>
<style scoped>
</style>
mutations - getters - actions 異步 1、mutations（修改狀態(tài)）
（1）template 中直接使用 $store.commit( ) 觸發(fā)
// template
<button @click="$store.commit('ADD')">+</button>
// src/vuex/store.js
const mutations = {
// 狀態(tài)變更函數(shù)
ADD (state) {
state.count++;
}
}
（2）利用 mapMutations 引入觸發(fā)
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{count}}</h2>
<!-- 3、、直接調(diào)用相應(yīng)的方法 -->
<button @click="ADD">+</button>
</div>
</template>
<script>
// 1、引入mapMutations
import {mapState, mapMutations} from 'vuex'
export default {
data () {
return {
msg: 'Vuex test!'
}
},
// 通過mapState的JSON來賦值
computed: mapState({
count: 'count'
}),
// 2、methods中加入mapMutations
methods: mapMutations([
'ADD'
])
}
</script>
<style scoped>
</style>
2、getters（獲取state和過濾）
（1）基本用法
// src/vuex/store.js
const getters = {
count: function(state){
// 返回加上100
return state.count + 100;
}
}
（2）常規(guī)獲取值
computed: {
// 獲取getters
count(){
return this.$store.getters.count;
}
}
（3）mapGetters 獲取值
// 1、引入mapMutations
import {mapState, mapMutations, mapGetters} from 'vuex'
// 2、使用
computed: {
// 獲取getters
...mapGetters(["count"])
}
3、actions（異步狀態(tài)修改）
actions 和 mutations 功能基本一樣，不同點是，actions 是異步的改變 state 狀態(tài)，而mutations 是同步改變狀態(tài)。
不過實際項目中一般都是通過 actions 改變 mutations 中的值。
（1）store.js 中增加異步代碼
// src/vuex/store.js
const actions ={
// 觸發(fā)mutations中相應(yīng)的方法
add ({commit}) {
// 增加異步
setTimeout(()=>{
commit('ADD')
},3000);
console.log('我比reduce提前執(zhí)行');
}
}
（2）常規(guī)使用
// template
<button @click="add">+</button>
// script
methods: {
add() {
//分發(fā)action
this.$store.dispatch('add');
}
}
（3）mapActions 的使用
// template
<button @click="add">+</button>
// script
// 引入mapActions
import {mapState, mapActions} from 'vuex'
// 使用mapActions
methods: {
...mapActions(['add'])
}
傳遞參數(shù)
在 vuex 的方法調(diào)用傳遞參數(shù)，只需要在 mutations 和 actions 相應(yīng)的地方加上參數(shù)，然后調(diào)用的時候傳入即可。
（1）src/vuex/store.js 中
// actions中傳遞參數(shù)
const mutations = {
ADD (state, n) {
state.count += n;
}
}
// actions中傳遞參數(shù)
const actions ={
// 觸發(fā)mutations中相應(yīng)的方法
add ({commit}, n) {
// 增加異步
setTimeout(()=>{
commit('ADD', n);
},3000);
console.log('我比reduce提前執(zhí)行');
}
}
（2）頁面組件常規(guī)調(diào)用傳遞
// template
<button @click="add">+</button>
// script
methods: {
add() {
// 分發(fā)action
this.$store.dispatch('add', 99);
}
}
（3）頁面組件使用 mapActions 調(diào)用傳遞
// template
<button @click="add(99)">+</button>
// script
methods: {
...mapActions(['add'])
}
module-模塊組
當(dāng)應(yīng)用非常復(fù)雜，狀態(tài)非常多的時候，需要將 store 分割成模塊（module）。
每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊，從上至下進(jìn)行同樣方式的分割。
1、大致的結(jié)構(gòu)
// 模塊A
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
// 模塊B
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
// 組裝
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
// 取值
store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)
2、詳細(xì)示例
實際開發(fā)中建議把 module 分開編寫。
（1）src/vuex/module1.js
// 模塊1
const module1 = {
// 初始化狀態(tài)
state: {
module1: {
name: '模塊1'
}
},
// 編寫動作
mutations: {
CHANGE1 (state, data) {
state.module1 = data;
}
},
// 取值
getters: {
module1: function(state){
return state.module1;
}
},
// 創(chuàng)建驅(qū)動，可異步
actions: {
change1 ({commit}, data) {
commit('CHANGE1', data)
}
}
}
export default module1;
（2）src/vuex/module2.js
// 模塊2
const module2 = {
// 初始化狀態(tài)
state: {
module2: {
name: '模塊2'
}
},
// 編寫動作
mutations: {
CHANGE2 (state, data) {
state.module2 = data;
}
},
// 取值
getters: {
module2: function(state){
return state.module2;
}
},
// 創(chuàng)建驅(qū)動，可異步
actions: {
change2 ({commit}, data) {
commit('CHANGE2', data)
}
}
}
export default module2;
（3）src/vuex/store.js
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 引入module1
import module1 from '@/vuex/module1'
// 引入module2
import module2 from '@/vuex/module2'
// 使用vuex
Vue.use(Vuex)
// 模塊注入
const store = new Vuex.Store({
modules: {
a: module1,
b: module2
}
})
// 輸出store
export default store;
（4）組件中使用，src/compontent/one.vue
<template>
<div id="app">
<!-- module1 -->
<h2>{{ module1.name }}</h2>
<button @click="change1({'name': 'change1'})">module1改變</button>
<!-- module2 -->
<h2>{{ module2.name }}</h2>
<button @click="change2({'name': 'change2'})">module2改變</button>
</div>
</template>
<script>
// 引入快捷方法
import {mapState, mapGetters, mapActions} from 'vuex'
export default {
name: 'app',
data () {
return {
}
},
computed:{
// mapState取值
// ...mapState({
// module1: state => state.a.module1.name,
// module2: state => state.b.module2.name
// })
// mapGetter取值
...mapGetters(['module1', 'module2'])
},
methods: {
// mapAction取方法
...mapActions([
'change1',
'change2'
])
}
}
</script>
<style>
</style>
PS：module 中命名要唯一，不然獲取值和改變值的時候會沖突，目前親測 mapGetters 只能獲取對象。
總結(jié)
到此這篇關(guān)于Vue命令行工具Vue-CLI圖文的文章就介紹到這了,更多相關(guān)Vue命令行工具Vue-CLI內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 中filter的多種用法,本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-04-04
vue2.* element tabs tab-pane 動態(tài)加載組件操作
這篇文章主要介紹了vue2.* element tabs tab-pane 動態(tài)加載組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在現(xiàn)代 Web 開發(fā)中,前端路由管理是構(gòu)建單頁面應(yīng)用（SPA）的關(guān)鍵組成部分,隨著 Vue3 的發(fā)布,Vue Router 也得到了相應(yīng)的更新,在這篇博文中,我們將詳細(xì)探討 Vue3 中的路由管理,需要的朋友可以參考下2025-01-01
Print.js一個小的javascript庫,可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要給大家介紹了關(guān)于printJS打印問題匯總以及解決辦法的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue如何監(jiān)聽某個元素的大小變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue利用vue meta info設(shè)置每個頁面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個頁面的title與meta信息的相關(guān)資料,文中將實現(xiàn)的方法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10
最近遇見一個需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細(xì)過程,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，通過引入Vue-router對象模塊時配置mode屬性可以啟用history模式，本文將通過代碼示例給大家詳細(xì)分析Vue路由History模式2023-06-06
這篇文章主要介紹了Vue字符串中如何添加多個空格問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vue 配置多頁面應(yīng)用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10