[JavaScript知识库]Vue 命令行工具 Vue-CLI 详解

阐述

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开发必备的也是必学的东西，概括起来就是：

1.vue-cli项目构建工具
2.vue-router路由管理
3.vuex状态管理全局变量
4.axios，http请求工具。
5.UI 框架 element，iview，vant

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

vue-cli

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

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

1、CLI 是 Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
2、Vue CLI是一个官方发布 vue.js 项目脚手架
3、使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置.

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 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

注意： 下面的默认安装的是 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/ 是外国外服务器，国内很慢可以使用淘宝的镜像。

where nvm 找到 nvm 安装路径

找到 settings.txt 文件

将下面这两句话复制到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 模板 (旧版本)

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

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

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

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 创建的项目，则找到项目根目录下的 "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 的开发环境。

3、browserify：
一个全面的 Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

4、browserify-simple：
一个简单 Browserify+vueify 的模板，不包含其他功能，让你快速的搭建 vue 的开发环境。

5、simple：
一个最简单的单页应用模板。

<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 <1157818690@qq.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 函数）

区别
1、runtime-only 比 runtime-compiler 轻 6kb

2、runtime-only 运行更快

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

两种模式生成的 脚手架 即（代码模板）其实区别只有在 main.js 中，其他都是一样的：

可以发现一个 是用 template + component 而另一个 则是 用 render 函数。

第四步操作：

Install vue-router? (Y/n)

Install vue-router?
是否安装vue的路由插件，需要安装，选择Y

第五步操作：

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) 自己配置

Use ESLint to lint your code?
是否用 ESLint 来限制你的代码错误和风格。不需要输入n，需要选择y，如果是大型团队开发，最好是进行配置。

第六步操作：

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@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>

③ 目录结构详解

④ 运行项目

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

npm 是什么东东？
npm其实是Node.js的包管理工具（package manager）。

为啥我们需要一个包管理工具呢？
因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。
（http://caibaojian.com/npm/all.html）

讲了这么多，npm究竟在哪？
其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v，

node 安装适合小白

1 去node官网下载

中文官方网址：http://nodejs.cn/
下载网址：http://nodejs.cn/download/
官方网址：https://nodejs.org/en/

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

以下一路 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@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 命令进入到项目目录

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"
  ]
}

项目结构

一个 vue-cli 的项目结构如下，其中 src 文件夹是需要掌握，其余了解即可。
文件夹目录如下：

1、build目录（webpack配置）

build 文件主要是 webpack 的配置，目录详情如下：

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

config 文件主要是项目相关配置，常用的就是当端口冲突时配置监听端口，打包输出路径及命名等，目录详情如下：

3、node_modules（项目依赖包）

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

安装依赖：npm i

在两种情况下我们会自己去安装依赖：
》项目运行缺少该依赖包
》安装插件：如 vuex

PS：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，
如 npm install vue-loader@11.1.4

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)
js (script)
样式 (style)

说明如下：

<!-- 模板 -->
<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>

[ template-模板 ]
（1） 模板只能包含一个父节点，也就是说顶层的 div 只能有一个
（如上图，父节点为 #app 的 div，其没有兄弟节点）

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

【script-JS代码】
vue 通常用 es6 来写，用 export default 导出，其下面可以包含数据 data，生命周期 ( mounted 等)，方法( methods )等。

【style-CSS样式】
样式通过 style 标签 <style></style> 包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加 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>

网页 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/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 的区别

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>

（2）对象遍历
参数： 第一个为值，第二个为键名，第三个为索引

<!-- 模板 -->
<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: ''
}

（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>状态：{{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 标签的动态属性，即动态赋值。
（1）常规用法

// 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 的编译，直接输出原始值，如果在标签中加入 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>

生命周期表格

生命周期图解

阶段一：创建和挂载

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

实例事件

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>数字：{{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、调试步骤

（1）chrome打开控制器查看
（2）控制台输入“ app.num='通过控制台设置的新name'”
（3）点击解绑按钮

2、参数说明

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

3、生命周期

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

1、bind：
只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

2、inserted：
被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）

3、update：
被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。
通过比较更新前后的绑定值，可以忽略不必要的模板更新。

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>

制作模板

vue 中的模板使用 template 来实现。

<!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

插槽加了 name 属性，就变成了具名插槽。
具名插槽可以在一个组件中出现 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: {//这个无返回值，不会继续派发  
            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.js 过渡系统的视图过渡效果、
细粒度的导航控制、
带有自动激活的 CSS class 的链接、
HTML5 历史模式或 hash 模式，在 IE9 中自动降级、
自定义的滚动条行为

快速入门

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

具体的简单用法：
（1）先编写一个按钮，在按钮上绑定 goHome( ) 方法。

<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：要传的参数，它是对象形式，在对象里可以传递多个值。

具体实例如下：
（1）在 src/components/Home.vue 里面导航中添加如下代码：

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

说明：
A、动态路由使用 params 传递参数，在 this.$router.push() 方法中 path 不能和 params 一起使用，否则 params 将无效。需要用 name 来指定页面。

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

PS：动态路由使用 query 传递参数，会显示到浏览器地址栏中，
以上链接为 /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: '/', // 默认页面重定向到主页
            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' // 重定向-传递参数
	            },
	        ]
	    }
    ]
})