Vue 命令行工具 Vue-CLI 详解

大家好，欢迎来到IT知识分享网。

阅读目录

阐述
vue全家桶
vue-cli
node 安装适合小白
- 1 去node官网下载
- 2 下载完成后双击安装包，跳出安装弹窗，点击Next
从新来过

阐述

vue-cli 构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握 es6，而 vue 的全家桶还是都要上的。

Vue CLI 的包名称由vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的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开发必备的也是必学的东西，概括起来就是：

最常见常用的 vue 全家桶简单的介绍一下，希望可以帮助你了解认识学会 vue 全家桶！

vue-cli

vue-cli 就是快速搭建一个 vue 项目的脚手架工具。

VueCLI是一个官方发布vue.js项目脚手架，使用 VueCLI 可以快速搭建 vue 开发环境，以及对应的 webpack 配置。

脚手架依赖于 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

注意：下面的默认安装的是 Vue CLI3 的版本，如果需要想按照 Vue CLI2 的方式初始化项目时不可以的。

由于博主的版本过低出现了切换 node 版本、反复安装操作，第二步查看 Vue Cli 需要的node 版本。版本一直请越过反复安装过程。

① 默认安装 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 结束

② 默认安装失败，解决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。 请升级您的节点版本。 PS C:\Windows\system32>

③ nvm下载太慢问题解决

由于 nvm 默认的下载地址 http://nodejs.org/dist/ 是外国外服务器，国内很慢可以使用淘宝的镜像。

将下面这两句话复制到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 安装结束

查看 vue 版本，及验证是否安装正确。

PS C:\Windows\system32> vue --version @vue/cli 5.0.4 PS C:\Windows\system32>

④ 拉取 2.x 模板 (旧版本)

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 相同。

创建项目提示，原因上面安装已经提示命令都为弃用状态。

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指定版本

【前端开发】Vue-CLI4 &Vue-CLI3 与Vue-CLI2 的区别

npm install -g vue-cli 或 cnpm install -g vue-cli

Vue-CLI最新版本：

npm install -g @vue/cli 或 cnpm install -g @vue/cli

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 init命令讲解

用 vue init 命令来初始化项目，具体使用方法如下：

vue init <template-name> <project-name>

init：表示要用 vue-cli 来初始化项目

<template-name>：表示模板名称，vue-cli 官方提供的 5 种模板：

<project-name>：标识项目名称，用户根据自己的项目来起名字。

② 项目初始化

在实际开发中，一般都会使用 webpack 这个模板，命令使用如下：

第一步操作：

PS E:\node> vue init webpack vue-cli296 ? Project name (vue-cli296)

Project name：项目名称，默认为初始化建项目的名称 vue-cli296，不需要直接回车

第二步操作：

 Project description (A Vue.js project)

Project description：项目描述，默认为A Vue.js project，不需要直接回车

Author (cwgqmxy <@.com>)

Author：作者，如果有配置 git 的作者，自动会读取。直接回车

第三步操作：

两个选项，Runtime + Compiler 和 Runtime-only：

· Runtime + Compiler: recommended for most users

（运行程序+编译器:推荐给大多数用户）

· 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 函数）

2、runtime-only 运行更快

3、runtime-only 其实只能识别 render 函数，不能识别 template，.vue 文件中的也是被 vue-template-compiler 翻译成了 render 函数，所以只能在 .vue 里写 template。

第四步操作：

Install vue-router? (Y/n)

第五步操作：

Use ESLint to lint your code? (Y/n) 输入 Y Pick an ESLint preset:选择分支风格 选项有三个（博主选了第一个） 1.standard(https://github.com/feross/standard) js的标准风格 2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法 3.none (configure it yourself) 自己配置

第六步操作：

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)

(译：项目创建后是否要为你运行 “npm install”？这里选择包管理工具)

选项有三个 yes,use npm(使用npm) yes,use yarn(使用yarn) no,I will handle that myself(自己配置安装包)

开始创建了项目，初始化完成之后会出现以下信息，表示操作成功。

PS E:\node> vue init webpack vue-cli296

? Project name vue-cli296
? Project description A Vue.js project
? Author cwgqmxy <1157818690@.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>

③ 目录结构详解

④ 运行项目

环境崩溃了，从新装node环境。

node 安装适合小白

1 去node官网下载

2 下载完成后双击安装包，跳出安装弹窗，点击Next

 node.js runtime：node 运行环境 orepack manager：npm 包管理 Online documentation shortcuts：在线文件快捷方式 Add to Path：添加路径 corepack manager：核心包管理

不用打钩，如果打了 √ 会把 node 所有的工具都下载，需要很久，以后要什么工具，直接npm下载。

安装好啦

环境路径已经自动设置好了

可以去 cmd 窗口中查看安装 node 和 npm 的版本号。

从新来过

上面环境崩溃了，从新搭建的环境。

PS E:\node> node -v v11.15.0 PS E:\node>

vue-cli 安装

vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了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@.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 命令进入到项目目录

npm run dev

成功页面

package.json

{ 
    "name": "vue296", "version": "1.0.0", "description": "A Vue.js project", "author": "cwgqmxy <@.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" ] }

项目结构

1、build目录（webpack配置）

2、config目录（vue项目配置目录）

3、node_modules（项目依赖包）

node_modules 里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法打开命令工具，进入项目目录，输入 npm install [依赖包名称]，回车。

安装依赖：npm i

src 项目核心文件讲解

核心文件目录前面已经说明了，下面重点讲解 index.html，main.js，App.vue，router 的 index.js，HelloWorld.vue。

1、index.html（主页）

index.html 为项目的主页，跟其他 html 一样，但一般只定义一个空的根节点，在 main.js 里面定义的实例将挂载在根节点下，内容都通过 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节点下 --> <div id="app"></div> </body> </html>

2、main.js（入口文件）

main.js 为项目的入口文件，即单入口，主要是引入 vue 框架，根组件及路由设置，并且定义 vue 实例，说明如下：

// 引入vue框架 import Vue from 'vue' // 引入根组件 import App from './App' // 引入路由配置 import router from './router' // 关闭生产模式下给出的提示 Vue.config.productionTip = false // 定义实例 new Vue({ 
    el: '#app', router, components: { 
    App }, template: '<App/>' })

3、App.vue（根组件）

一个 vue 页面通常由三部分组成：

说明如下：

<!-- 模板 --> <template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <!-- js代码 --> <script> export default { 
      name: 'App' } </script> <!-- css样式 --> <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; } </style>

（2）是子路由视图插槽，后面的路由页面都显示在此处，相当于 iframe

引入外部CSS示例：

<style> import './assets/css/public.css' </style>

4、router（路由配置）

// 引入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>

网页 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

<!--第一步：创建文件夹及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> <!--第三步:创建一个Div--> <div id="app"> <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 --> { 
  {message}} </div> <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。--> <script type="text/javascript"> var app=new Vue({ 
      // 创建Vue对象。Vue的核心对象。 el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器 data:{ 
      // data: 是Vue对象中绑定的数据 message:'hello Vue!' // message 自定义的数据 } }) </script> </body> </html>

内部指令

<!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> <!-- 常规写法 --> <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>状态：{ 
  {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//.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 的区别

v-if：在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。

v-show：调整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>

<!-- 模板 --> <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}} 取值有个弊端，当网速很慢或 javascript 出错时，会在页面显示 { {xxx}}，Vue 提供的 v-text 可以解决这个问题。

<div>{ 
  { message }}</div> <!-- 和下面的一样 --> <div v-text="message"></div>

（8）v-html

用于输出 html 代码

<span v-html="msgHtml"></span>

（9）v-on

（1）常规用法

// 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: '' }

<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>状态：{ 
  {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
<img v-bind:src="imgSrc" width="200px"> // js data: { imgSrc:'http://liangxinghua.com/uploads/image//.png' }

（2）缩写

<img :src="imgSrc" width="200px">

指令详情的更多用法参照 v-bind 官方 API

（12）v-pre

在模板中跳过 vue 的编译，直接输出原始值，如果在标签中加入 v-pre 就不会输出 vue 中的data 值了。

<div v-pre>{ 
  {message}}</div>

（13）v-cloak

在 vue 渲染完指定的整个 DOM 后才进行显示。它必须和 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 创建前状态===============》'); 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 创建完毕状态===============》'); 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 挂载前状态===============》'); 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 挂载结束状态===============》'); 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 更新前状态===============》'); 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 更新完成状态===============》'); 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 销毁前状态===============》'); 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 销毁完成状态===============》'); 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	在实例初始化之后，数据观测和事件配置之前被调用
created	在实例创建完成后被立即调用，完成数据观测，属性和方法的运算，初始化事件，$el属性未见
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用，只在虚拟DOM生成HTML
mounted	在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互
beforeUpdate	在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程
updated	在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
activated	keep-alive 组件激活时调用
deactivated	keep-alive 组件停用时调用
beforeDestroy	在实例销毁之前调用。实例仍然完全可用
destroyed	在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

生命周期图解

阶段一：创建和挂载

beforecreated：el 和 data 并未初始化 created：完成了 data 数据的初始化，el没有 beforeMount：完成了 el 和 data 初始化 mounted ：完成挂载

阶段二：更新

在 chrome console 执行以下命令：

app.message= 'yes !! I do';

beforeUpdate：虚拟 DOM 中根据 data 变化去更新 html
     updated：将虚拟 DOM 更新完成的 HTML 更新到页面中

阶段三：销毁

在 chrome console 执行以下命令：

app.$destroy();

beforeDestroy：销毁之前调用 destroyed：销毁之后调用，之后再执行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>数字： { 
  {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("数据放生变化,变化成"+this.count+"."); } } // 扩展 var extendObj ={ 
      created: function(){ 
      console.log("我是被扩展出来的"); } } // 实例化vue var app = new Vue({ 
      // 挂载实例 el:'#app', // 页面数据初始化，字符，对象、数组 data:{ 
      message: 'hello Vue!', price: 100, count: 100, question: '', filtera: 'abc' }, // 计算属性：主要是对原数据进行改造输出。 // 改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号 computed: { 
      newPrice () { 
      return '￥' + this.price + '元'; } }, // 方法声明：用于绑定html中的方法 methods:{ 
      add (num) { 
      this.count += num; } }, // data属性监听器, 作用v-model watch: { 
      question(val, oldVal) { 
      console.log('new: %s, old: %s', val, oldVal); } }, // 过滤器，通常格式化字符，使用传值 filters: { 
      filterA(value) { 
      return value.toUpperCase(); } }, // 混入，作用：减少代码污染、减少代码量、实现代码重用 mixins: [addLog], // 扩展 extends: extendObj }) </script> </body> </html>

1、computed 计算属性、改造输出

computed: { 
    newPrice () { 
    return '￥' + this.price + '元'; } }

2、methods 用于绑定 html 中的事件对应的方法

方法属性：用于绑定 html 中的事件对应的方法

methods:{ 
    add (num) { 
    this.count += num; } }

3、watch 数据变化监听器

数据变化监听器：主要用于监测 data 中的数据变化， v-model 生效

watch: { 
    question(val, oldVal) { 
    console.log('new: %s, old: %s', val, oldVal); } }

4、filters 过滤器：通常格式化字符，使用传值

filters: { 
    filterA(value) { 
    return value.toUpperCase(); } }

5、mixins 实现代码重用

混入：用于减少代码污染、减少代码量、实现代码重用

// 额外临时加入时，用于显示日志 var addLog={ 
    updated:function(){ 
    console.log("数据放生变化,变化成"+this.count+"."); } } // 实例化vue var app = new Vue({ 
    // 挂载实例 el:'#app', // 页面数据初始化，字符，对象、数组 data:{ 
    count: 100 }, // 混入 mixins: [addLog] })

6、extends 扩展：对构造器进行扩展

// 扩展 var extendObj ={ 
    created: function(){ 
    console.log("我是被扩展出来的"); } } // 实例化vue var app = new Vue({ 
    // 挂载实例 el:'#app', // 页面数据初始化，字符，对象、数组 data:{ 
    }, // 扩展 extends: extendObj })

实例事件

<!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>数字：{ 
   { 
   count}}</div> <button onclick="reduce()">on调用</button> <button onclick="reduceOnce()">once调用</button> <button onclick="off()">off调用</button> </div> <script type="text/javascript"> var app = new Vue({ 
    el:'#app', data:{ 
    count: 1 } }) // $on 在构造器外部添加事件 app.$on('reduce',function(){ 
    console.log('执行了reduce()'); this.count--; }); // 调用 function reduce() { 
    // 事件调用 console.log('emit事件调用'); app.$emit('reduce'); } // $once执行一次的事件 app.$once('reduceOnce',function(){ 
    console.log('只执行一次的方法'); this.count--; }); // 调用 function reduceOnce() { 
    app.$emit('reduceOnce'); } // 关闭事件 function off(){ 
    console.log('关闭事件'); app.$off('reduce'); } </script> </body> </html>

1、$on（在构造器外部添加事件）

$on 接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法

app.$on('reduce',function(){ 
    console.log('执行了reduce()'); this.count--; });

2、$once（执行一次的事件）

app.$once('reduceOnce',function(){ 
    console.log('只执行一次的方法'); this.count--; });

3、$off（关闭事件）

function off(){ 
    console.log('关闭事件'); app.$off('reduce'); }

4、$emit（事件调用）

function reduce() { 
    // 事件调用 console.log('emit事件调用'); app.$emit('reduce'); }

自定义指令

vue 中的自定义指令通过 Vue.directive 来实现，主要完成内置指令不能完成的一些事情。

<!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、调试步骤

2、参数说明

 el：指令所绑定的元素，可以用来直接操作 DOM binding： 一个对象，包含指令的很多信息 vnode:：Vue编译生成的虚拟节点

3、生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind，说明如下：

4、componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

5、unbind：只调用一次，指令与元素解绑时调用

组件基础

<!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> <!-- 常规属性传值 --> <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> <!-- 父子组件调用 --> <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;">参数1： { 
      { here }}:---参数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;">参数1： { 
    { here }}:---参数2： { 
    {fromHere}}</div>`, props:['here', 'fromHere'] } } }); // html使用 <button-props here="hello" from-here="world"></button-props>

PS：如果属性带 “-”，props 中需要驼峰取值

（2）在构造器向组件传值（v-bind）

// script new Vue({ 
    el: '#app', data: { 
    message: 'hello' }, components:{ 
    "button-props":{ 
    template:`<div style="color:red;">参数1： { 
    { here }}:---参数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>

制作模板

<!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标签模板 --> <template id="demo2"> <h2 style="color:red">我是template标签模板</h2> </template> </div> <!-- script标签模板 --> <script type="x-template" id="demo3"> <h2 style="color:red">我是script标签模板</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、标签模板

<div id="app"> <template id="demo2"> <h2 style="color:red">我是template标签模板</h2> </template> </div> <script type="text/javascript"> // 实例化 new Vue({ 
    el: '#app', data: { 
    message: 'hello' }, template:'#demo2' }); </script>

3、`<script>` 标签模板

<div id="app"> </div> <script type="x-template" id="demo3"> <h2 style="color:red">我是script标签模板</h2> </script> <script type="text/javascript"> // 实例化 new Vue({ 
    el: '#app', data: { 
    message: 'hello' }, template:'#demo3' }); </script>

插槽 slot

插槽，也就是 slot，是组件的一块HTML模板，一个 slot 最核心的两个问题是显示不显示和怎样显示。

1、单个 slot

单个插槽，别名默认插槽、匿名插槽，不用设置 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

<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: { 
   //这个无返回值，不会继续派发  template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>" } } }); </script>

3、作用域 slot

vue2.5 版本中 slot-scope 取代了 scope，来实现作用域插槽，主要用在组件调用中，具体在 template 标签上面使用 slot-scope 来获取插槽 slot 上面的属性值，获取值的为一个对象，slot-scope=”它可以取任意字符串”，在 element-ui 的组件中经常看到。

<div id="app"> <!-- 将数据传递给组件 --> <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 项目中应用 vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

包含的功能有：

快速入门

vue-router 是 vue 官方的路由解决方案，简单易用，中文官方地址如下：vue-router 中文手册

安装

vue-router 是一个插件包，需要用 npm 来进行安装的。如果采用 vue-cli 构建初始化项目会提示安装，也可以自己使用命令安装：

npm install vue-router --save

解读核心文件

用 vue-cli 构建项目之后，在 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: [ //配置路由，这里是个数组 { 
    //每一个链接都是一个对象 path: '/', //链接路径 name: 'HelloWorld', //路由名称， component: HelloWorld //对应的组件模板 } ] })

使用

在系统入口文件 main.js 中注入 router，代码如下：

// 引入vue框架 import Vue from 'vue' // 引入根组件 import App from './App' // 引入路由配置 import router from './router' // 关闭生产模式下给出的提示 Vue.config.productionTip = false // 定义实例 new Vue({ 
    el: '#app', router, // 注入框架中 components: { 
    App }, template: '<App/>' })

路由属性配置说明

代码如下：

export default new Router({ 
    mode: 'history', //路由模式，取值为history与hash base: '/', //打包路径，默认为/，可以修改 routes: [ { 
    path: string, //路径 ccomponent: Component; //页面组件 name: string; // 命名路由-路由名称 components: { 
    [name: string]: Component }; // 命名视图组件 redirect: string | Location | Function; // 重定向 props: boolean | string | Function; // 路由组件传递参数 alias: string | Array<string>; // 路由别名 children: Array<RouteConfig>; // 嵌套子路由 beforeEnter?: (to: Route, from: Route, next: Function) => void; // 路由单独钩子 meta: any; // 自定义标签属性，比如：是否需要登录 icon: any; // 图标 // 2.6.0+ caseSensitive: boolean; // 匹配规则是否大小写敏感？(默认值：false) pathToRegexpOptions: Object; // 编译正则的选项 } ] })

页面跳转

一、router-link 标签跳转

在 html 标签内使用 router-link 跳转，相应于超链接 a 标签，使用方式如下：

<router-link to="/">[显示字段]</router-link>

to：导航路径

使用示例如下：

<p>导航 ： <router-link to="/">首页</router-link> <router-link to="/hello">hello</router-link> </p>

二、编程式导航-JS代码内部跳转

实际项目中，很多时候都是通过在JS代码内部进行导航的跳转，使用方式如下：

this.$router.push('/xxx')

<button @click="goHome">回到首页</button>

（2）在 <script> 模块里加入 goHome 方法，并用 this.$router.push(‘/’) 导航到首页

export default { 
    name: 'app', methods: { 
    goHome(){ 
    this.$router.push('/home'); } } }

三、其他常用方法

// 后退一步记录，等同于 history.back() this.$router.go(-1) // 在浏览器记录中前进一步，等同于 history.forward() this.$router.go(1)

子路由-路由嵌套

子路由，也叫路由嵌套，采用在 children 后跟路由数组来实现，数组里和其他配置路由基本相同，需要配置 path 和 component，然后在相应部分添加 <router-view/> 来展现子页面信息，相当于嵌入 iframe 。

1、src/components/Home.vue（父页面）

<template> <div class="hello"> <h1>{ 
   { 
    msg }}</h1> <!-- 添加子路由导航 --> <p>导航 ： <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: '/', // 默认页面重定向到主页 redirect: '/home' }, { 
    path: '/home', // 主页路由 name: 'Home', component: Home, children:[ // 嵌套子路由 { 
    path:'one', // 子页面1 component:One }, { 
    path:'two', // 子页面2 component:Two }, ] } ] })

路由传递参数

1、通过 `<router-link>` 标签中的 `to` 传参

基本语法：

<router-link :to="{name:xxx, params: {key:value}}"> valueString </router-link>

PS：上面 to 前边是带冒号，后边跟的是一个对象形势的字符串

 name：在路由配置文件中起的 name 值。叫做命名路由，下一节会讲到。 params：要传的参数，它是对象形式，在对象里可以传递多个值。

<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 里面接受参数，代码如下：

<h2>{ 
   { 
   $route.params.username}}</h2>

2、url 中传递参数

（1）在路由中以冒号传递，在 src/router/index.js 中加入如下代码：

{ 
    path:'/home/two/:id/:name', // 子页面2 component:Two },

（2）接受参数，在 src/components/Two.vue 中加入如下代码：

<p>ID：{ 
   { 
    $route.params.id}}</p> <p>名称：{ 
   { 
    $route.params.name}}</p>

（3）路由跳转，在 src/components/Home.vue 中加入如下代码：

<router-link to="/home/two/1/张三">子页面2</router-link>

PS：to 前没有冒号为字符串路由，必须全部匹配。

（4）如果路由参数需要有特定的规则，就需要加入正则表达式了，示例如下：

{ 
    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: '/', // 默认页面重定向到主页 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> <!-- 添加子路由导航 --> <p>导航 ： <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传递参数</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>

编程式导航 -params 传递参数

（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'}}) } }

B、以上方式参数不会显示到浏览器的地址栏中，如果刷新一次页面，就获取不到参数了，改进方式将第一部中的代码改成如下：

{ 
    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: '/', // 默认页面重定向到主页 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> <!-- 添加子路由导航 --> <p>导航 ： <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传递参数</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>

编程式导航 -query 传递参数

（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'}}) } }

源码

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: '/', // 默认页面重定向到主页 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> <!-- 添加子路由导航 --> <p>导航 ： <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传递参数</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、命名路由

给一个路由命一个唯一的名称，然后跳转调用这个名称即可。

（1）在 src/router/index.js 中加一个带 name 的路由，代码如下：

{ path: 'one', // 子页面1 name: 'one', // 路由名称-命名路由 component: One // 页面组件 }

（2）在 src/component/Home.vue 页面中调用，代码如下：

// template跳转调用 <router-link :to="{name: 'one'}">子页面1</router-link> // router.push函数跳转调用 router.push({ name: 'user'}})

2、命名视图

在同一个页面展示多个视图，如果不用嵌套，只能采用命名视图来实现了。

代码如下：

（1）在 src/router/index.js 中，代码如下：

import Vue from 'vue' import Router from 'vue-router' // 创建页面组件 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：经过实践，命名视图只能放在最顶级的页面中，即第一步中的代码不能放在其他页面中。

3、重定向

重定向是通过 route 的配置中关键词 redirect 来实现的，具体代码如下：

（1）在 src/router/index.js 中，代码如下：

export default new Router({ 
    routes: [ { 
    path: '/', // 默认页面重定向到主页 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' // 重定向-传递参数 }, ] } ] })

（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-不带参数的重定向：

redirect: '/home' // 重定向-不带参数

说明2-带参数的重定向：

redirect: '/home/two/:id/:name' // 重定向-传递参数

4、别名

重定向是通过 route 的配置中关键词 alias 来实现的，具体代码如下：

（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 的区别

redirect：直接改变了 url 的值，把 ur l变成了真实的 path 路径。\

说明2：别名请不要用在 path 为 ’/’ 中，如下代码的别名是不起作用的。

{ 
    path: '/', component: Hello, alias:'/home' }

过渡动画

（1）在 <router-view> 标签的外部添加 <transition> 标签，标签还需要一个 name 属性，代码如下：

<transition name="fade" mode="out-in"> <router-view /> </transition>

过渡模式 mode

（2）加入CSS，一共4个CSS类名，四个类名与 transition 的 name 属性有关，比如name=”fade”，相应的 css 如下：

/*页面切换动画*/ /*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/ .fade-enter-active { 
    transition: opacity .5s; } /*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/ .fade-enter { 
    opacity: 0; } /*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/ .fade-leave { 
    opacity: 1; } /*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/ .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; } /*页面切换动画*/ /*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/ .fade-enter-active { 
      transition: opacity .5s; } /*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/ .fade-enter { 
      opacity: 0; } /*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/ .fade-leave { 
      opacity: 1; } /*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/ .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：默认值，会多一个 “#”，示例：http://localhost:8080/#/home

2、404页面设置

如果访问的路由不存在，或者用户输入错误时，会有一个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>

路由钩子

路由钩子，即导航钩子，其实就是路由拦截器，vue-router 一共有三类：

1、全局钩子

在 src/router/index.js 中使用，代码如下：

// 定义路由配置 const router = new VueRouter({ 
    ... }) // 全局路由拦截-进入页面前执行 router.beforeEach((to, from, next) => { 
    // 这里可以加入全局登陆判断 // 继续执行 next(); }); // 全局后置钩子-常用于结束动画等 router.afterEach(() => { 
    //不接受next }); export default router;

每个钩子方法接收三个参数：

 to: Route : 即将要进入的目标 [路由对象] from: Route : 当前导航正要离开的路由 next: Function : 继续执行函数

 next()：继续执行 next(false)：中断当前的导航。 next(‘/‘) 或 next({ 
    path: ‘/‘ })：跳转新页面，常用于登陆失效跳转登陆

2、路由单独钩子

使用：在路由配置中单独加入钩子，在 src/router/index.js 中使用，代码如下：

{ 
    path:'/home/one', // 子页面1 component: One, // 路由内钩子 beforeEnter: (to, from, next) => { 
    console.log('进入前执行'); next(); } }

3、组件内钩子

使用：在路由组件内定义钩子函数：

beforeRouteEnter：进入页面前调用 beforeRouteUpdate (2.2 新增)：页面路由改变时调用，一般需要带参数 beforeRouteLeave：离开页面调用

任意找一页面，编写如下代码：

<script> export default { 
    name: 'Two', data () { 
    return { 
    msg: 'Hi, I am Two Page!' } }, // 进入页面前调用 beforeRouteEnter(to, from, next) { 
    console.log('进入enter路由钩子') next() }, // 离开页面调用 beforeRouteLeave(to,from, next){ 
    console.log('进入leave路由钩子') next() }, // 页面路由改变时调用 beforeRouteUpdate(to, from, next) { 
    console.log('进入update路由钩子') console.log(to.params.id) next() } } </script>

路由懒加载

1、路由正常模式：

// 1、先引入页面组件 import Home from '@/components/Home' // 2、使用组件 { 
    path: '/home', component: Home }

（1）第一种写法：

component: (resolve) => require(['@/components/One'], resolve)

（2）第二种写法：

component: () => import('@/components/Two')

（3）第三种写法：

components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')

PS：

路由懒加载用法：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: '/', // 默认页面重定向到主页 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 应用程序开发的 状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

chrome 安装调试工具 devtools extension。

2、单向数据流

示意图说明：

 State：驱动应用的数据源（单向数据流） View：以声明方式将 state 映射到视图（静态显示出来的数据源） Actions：处理用户在 view 上面操作而导致的状态变化（数据源变化追踪）

// 引入组件 import HelloWorld from '@/components/HelloWorld' // 添加路由 { 
    path: '/hello', name: 'HelloWorld', component: HelloWorld, }

E:\node\vue296\src\components\Home.vue 首页

<!-- 添加跳转 --> <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 解决的问题

4、vuex 使用场景

中大型单页应用，需要考虑如何更好地在组件外部管理状态，简单应用不建议使用。

5、vuex 与全局变量的区别

6、vuex 核心流程

示意图说明：

2、Dispatch：操作行为触发方法，是唯一能执行 action 的方法。

入门示例

安装

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：创建初始化状态 const state = { 
    // 放置初始状态 count: 1 } // 2、mutations：创建改变状态的方法 const mutations = { 
    // 状态变更函数-一般大写 ADD (state, n) { 
    state.count += n; } } // 3、getters：提供外部获取state const getters = { 
    count: function(state){ 
    return state.count; } } // 4、actions：创建驱动方法改变mutations const actions ={ 
    // 触发mutations中相应的方法-一般小写 add ({ 
    commit}, data) { 
    commit('ADD', data) } } // 5、全部注入Store中 const store = new Vuex.Store({ 
    state, mutations, getters, actions }); // 6、输出store export default store;

代码说明：

（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() { 
      //分发action中的add方法 this.$store.dispatch('add', 1); } } } </script> <style scoped> </style>

state-状态对象的获取方法

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 的数组来赋值

// 方式3：数组获取 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() { 
      //分发action中的add方法 this.$store.dispatch('add', 1); } } } </script> <style scoped> </style>

mutations – getters – actions 异步

1、mutations（修改状态）

（1）template 中直接使用 $store.commit( ) 触发

// template <button @click="$store.commit('ADD')">+</button> // src/vuex/store.js const mutations = { // 状态变更函数 ADD (state) { state.count++; } }

（2）利用 mapMutations 引入触发

<template> <div class="hello"> <h1>{ 
  { msg }}</h1> <h2>{ 
  {count}}</h2> <!-- 3、、直接调用相应的方法 --> <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）常规获取值

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（异步状态修改）

actions 和 mutations 功能基本一样，不同点是，actions 是异步的改变 state 状态，而mutations 是同步改变状态。

不过实际项目中一般都是通过 actions 改变 mutations 中的值。

（1）store.js 中增加异步代码

// src/vuex/store.js const actions ={ 
    // 触发mutations中相应的方法 add ({ 
    commit}) { 
    // 增加异步 setTimeout(()=>{ 
    commit('ADD') },3000); console.log('我比reduce提前执行'); } }

（2）常规使用

// template <button @click="add">+</button> // script methods: { add() { //分发action this.$store.dispatch('add'); } }

（3）mapActions 的使用

// template <button @click="add">+</button> // script // 引入mapActions import {mapState, mapActions} from 'vuex' // 使用mapActions methods: { ...mapActions(['add']) }

传递参数

在 vuex 的方法调用传递参数，只需要在 mutations 和 actions 相应的地方加上参数，然后调用的时候传入即可。

（1）`src/vuex/store.js` 中

// actions中传递参数 const mutations = { 
    ADD (state, n) { 
    state.count += n; } } // actions中传递参数 const actions ={ 
    // 触发mutations中相应的方法 add ({ 
    commit}, n) { 
    // 增加异步 setTimeout(()=>{ 
    commit('ADD', n); },3000); console.log('我比reduce提前执行'); } }

（2）页面组件常规调用传递

// template <button @click="add">+</button> // script methods: { add() { // 分发action this.$store.dispatch('add', 99); } }

（3）页面组件使用 mapActions 调用传递

// template <button @click="add(99)">+</button> // script methods: { ...mapActions(['add']) }

module-模块组

当应用非常复杂，状态非常多的时候，需要将 store 分割成模块（module）。

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，从上至下进行同样方式的分割。

1、大致的结构

// 模块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 的状态 store.state.b // -> moduleB 的状态

2、详细示例

实际开发中建议把 module 分开编写。

（1）src/vuex/module1.js

// 模块1 const module1 = { 
    // 初始化状态 state: { 
    module1: { 
    name: '模块1' } }, // 编写动作 mutations: { 
    CHANGE1 (state, data) { 
    state.module1 = data; } }, // 取值 getters: { 
    module1: function(state){ 
    return state.module1; } }, // 创建驱动，可异步 actions: { 
    change1 ({ 
    commit}, data) { 
    commit('CHANGE1', data) } } } export default module1;

（2）src/vuex/module2.js

// 模块2 const module2 = { 
    // 初始化状态 state: { 
    module2: { 
    name: '模块2' } }, // 编写动作 mutations: { 
    CHANGE2 (state, data) { 
    state.module2 = data; } }, // 取值 getters: { 
    module2: function(state){ 
    return state.module2; } }, // 创建驱动，可异步 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 只能获取对象。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/120401.html