命令安装vue-cli了

时间:2019-09-26 14:23来源:快三平台下载编程
摘要 学习本篇之前要具备一定的vue基础知识,可以先看一下Vue基础(环境配置、内部指令、全局API、选项、内置组件) 1、Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架,这里

摘要

学习本篇之前要具备一定的vue基础知识,可以先看一下Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1、Vue-cli

Vue-cli是vue官方出品的快速构建单页应用的脚手架,这里牵扯的东西很多,有webpack,npm,nodejs,babel等等。

官网:

GitHub:

1.1、安装vue-cli

首先要安装npm,npm的安装在基础视频中有。npm没有问题,接下来我们可以用npm 命令安装vue-cli了,在命令行输入下面的命令:

npm install -g @vue/cli//卸载  npm uninstall -g @vue/cli
  • -g:代表全局安装。如果你安装时报错,一般是网络问题,你可以尝试用cnpm来进行安装。安装完成后,可以用vue
  • -V:来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是3.4.1
PS G:DemosVUEVUECLI> vue --version3.4.1

如果vue -V的命令管用了,说明已经顺利的把vue-cli安装到我们的计算机里了。

如果想使用2.X版本的命令来创建项目,则可以执行以下命令

npm install -g @vue/cli-init# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

1.2、初始化项目

我们用vue init命令来初始化项目,具体看一下这条命令的使用方法。

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

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

<template-name>:表示模板名称,vue-cli官方为我们提供了5种模板

<project-name>:标识项目名称,这个你可以根据自己的项目来起名字。

  • webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。

  • webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。

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

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

  • simple-一个最简单的单页应用模板。

在实际开发中,一般我们都会使用webpack这个模板,那我们这里也安装这个模板,在命令行输入以下命令:

vue init webpack vuecliTest

输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

  • Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
  • Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
  • Author:作者,如果你有配置git的作者,他会读取。
  • Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
  • Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。
  • setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
  • Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。

这里我们创建一个名为vuecliTest的项目

图片 1

命令行出现上面的文字,说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。

cd vuecliTest进入我们的vue项目目录。

npm install安装我们的项目依赖包,也就是安装package.json里的包,如果你网速不好,你也可以使用cnpm来安装。

npm run dev开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。

这时候我们运行我们创建的vuecliTest项目

我们可以通过

图片 2

1.3、Vue-cli项目结构讲解

vue-cli脚手架工具就是为我们搭建了开发所需要的环境,为我们省去了很多精力。有必要对这个环境进行熟悉,我们就从项目的结构讲起。

//Ps:由于版本实时更新和你选择安装的不同(这里列出的是模板为webpack的目录结构),所以你看到的有可能和下边的有所差别。.|-- build                            // 项目构建相关代码|   |-- build.js                       // 生产环境构建代码|   |-- check-version.js               // 检查node、npm等版本|   |-- dev-client.js                  // 热重载相关|   |-- dev-server.js                  // 构建本地服务器|   |-- utils.js                       // 构建工具相关|   |-- webpack.base.conf.js           // webpack基础配置|   |-- webpack.dev.conf.js            // webpack开发环境配置|   |-- webpack.prod.conf.js           // webpack生产环境配置|-- config                           // 项目开发环境配置|   |-- dev.env.js                       // 开发环境变量|   |-- index.js                       // 项目一些配置变量|   |-- prod.env.js                    // 生产环境变量|   |-- test.env.js                    // 测试环境变量|-- node_modules                     // 项目开用到的包|-- src                              // 源码目录|   |-- components                     // vue公共组件|   |-- store                          // vuex的状态管理|   |-- App.vue                        // 页面入口文件|   |-- main.js                        // 程序入口文件,加载各种公共组件|-- static                           // 静态文件,比如一些图片,json数据等|   |-- data                           // 群聊分析得到的数据用于数据可视化|-- .babelrc                         // ES6语法编译配置|-- .editorconfig                    // 定义代码格式|-- .gitignore                       // git上传需要忽略的文件格式|-- README.md                        // 项目说明|-- favicon.ico |-- index.html                       // 入口页面|-- package.json                     // 项目基本信息.

1.3.1、重要文件讲解

  • package.json:package.json文件是项目根目录下的一个文件,定义该项目开发所需要的各种模块以及一些项目配置信息(如项目名称、版本、描述、作者等)。
    package.json 里的scripts字段,这个字段定义了你可以用npm运行的命令。在开发环境下,在命令行工具中运行npm run dev 就相当于执行webpack-dev-server --inline --progress --config build/webpack.dev.conf.js.也就是开启了一个node写的开发行建议服务器。由此可以看出script字段是用来指定npm相关命令的缩写。

    "scripts": {  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  "start": "npm run dev",  "build": "node build/build.js"},
    
  • dependencies字段和devDependencies字段

    • dependencies字段指项目运行时所依赖的模块;
    • devDependencies字段指定了项目开发时所依赖的模块;
      在命令行中运行npm install命令,会自动安装dependencies和devDempendencies字段中的模块。

package.json还有很多相关配置,如果你想全面了解,可以专门去百度学习一下。

1.3.2、webpack配置相关

我们在上面说了运行npm run dev 就相当于执行了webpack-dev-server --inline --progress --config build/webpack.dev.conf.js,说明这个文件相当重要,先来熟悉一下它。 我贴出代码并给出重要的解释。

// 检查 Node 和 npm 版本require('./check-versions')()// 获取 config/index.js 的默认配置var config = require('../config')// 如果 Node 的环境无法判断当前是 dev / product 环境// 使用 config.dev.env.NODE_ENV 作为当前的环境if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)// 使用 NodeJS 自带的文件路径工具var path = require('path')// 使用 expressvar express = require('express')// 使用 webpackvar webpack = require('webpack')// 一个可以强制打开浏览器并跳转到指定 url 的插件var opn = require('opn')// 使用 proxyTablevar proxyMiddleware = require('http-proxy-middleware')// 使用 dev 环境的 webpack 配置var webpackConfig = require('./webpack.dev.conf')// default port where dev server listens for incoming traffic// 如果没有指定运行端口,使用 config.dev.port 作为运行端口var port = process.env.PORT || config.dev.port// Define HTTP proxies to your custom API backend// https://github.com/chimurai/http-proxy-middleware// 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置var proxyTable = config.dev.proxyTable// 使用 express 启动一个服务var app = express()// 启动 webpack 进行编译var compiler = webpack(webpackConfig)// 启动 webpack-dev-middleware,将 编译后的文件暂存到内存中var devMiddleware = require('webpack-dev-middleware')(compiler, {  publicPath: webpackConfig.output.publicPath,  stats: {    colors: true,    chunks: false  }})// 启动 webpack-hot-middleware,也就是我们常说的 Hot-reloadvar hotMiddleware = require('webpack-hot-middleware')// force page reload when html-webpack-plugin template changescompiler.plugin('compilation', function (compilation) {  compilation.plugin('html-webpack-plugin-after-emit', function  {    hotMiddleware.publish({ action: 'reload' })    cb// proxy api requests// 将 proxyTable 中的请求配置挂在到启动的 express 服务上Object.keys(proxyTable).forEach(function  {  var options = proxyTable[context]  if (typeof options === 'string') {    options = { target: options }  }  app.use(proxyMiddleware(context, options))})// handle fallback for HTML5 history API// 使用 connect-history-api-fallback 匹配资源,如果不匹配就可以重定向到指定地址app.use(require('connect-history-api-fallback')// serve webpack bundle output// 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上app.use(devMiddleware)// enable hot-reload and state-preserving// compilation error display// 将 Hot-reload 挂在到 express 服务上app.use(hotMiddleware)// serve pure static assets// 拼接 static 文件夹的静态资源路径var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)// 为静态资源提供响应服务app.use(staticPath, express.static('./static'))// 让我们这个 express 服务监听 port 的请求,并且将此服务作为 dev-server.js 的接口暴露module.exports = app.listen(port, function  {  if  {    console.log    return  }  var uri = 'http://localhost:' + port  console.log('Listening at ' + uri + 'n')  // when env is testing, don't need open it  // 如果不是测试环境,自动打开浏览器并跳到我们的开发地址  if (process.env.NODE_ENV !== 'testing') {    opn

webpack.base.confg.jswebpack的基础配置文件

......module.export = {    // 编译入口文件    entry: {},    // 编译输出路径    output: {},    // 一些解决方案配置    resolve: {},    resolveLoader: {},    module: {        // 各种不同类型文件加载器配置        loaders: {        ...        ...        // js文件用babel转码        {            test: /.js$/,            loader: 'babel',            include: projectRoot,            // 哪些文件不需要转码            exclude: /node_modules/        },        ...        ...        }    },    // vue文件一些相关配置    vue: {}}

1.3.3、.babelrc

Babel解释器的配置文件,存放在根目录下。Babel是一个转码器,项目里需要用它将ES6代码转为ES5代码。如果你想了解更多,可以查看babel的知识。

{  //设定转码规则  "presets": [    ["env", { "modules": false }],    "stage-2"  ],  //转码用的插件  "plugins": ["transform-runtime"],  "comments": false,  //对BABEL_ENV或者NODE_ENV指定的不同的环境变量,进行不同的编译操作  "env": {    "test": {      "presets": ["env", "stage-2"],      "plugins": [ "istanbul" ]    }  }}

1.3.4、.editorconfig

该文件定义项目的编码规范,编译器的行为会与.editorconfig文件中定义的一致,并且其优先级比编译器自身的设置要高,这在多人合作开发项目时十分有用而且必要。

root = true[*]    // 对所有文件应用下面的规则charset = utf-8                    // 编码规则用utf-8indent_style = space               // 缩进用空格indent_size = 2                    // 缩进数量为2个空格end_of_line = lf                   // 换行符格式insert_final_newline = true        // 是否在文件的最后插入一个空行trim_trailing_whitespace = true    // 是否删除行尾的空格

这是比较重要的关于vue-cli的配置文件,当然还有很多文件,我们会在以后的文章中讲解。

1.4解读Vue-cli的模板

我们主要了解一下Vue-cli的模板操作,包括增加模板,修改模板,以及一个常规模板的基本结构。

1.4.1npm run build 命令

有小伙伴问我,如何把写好的Vue网页放到服务器上,那我就在这里讲解一下,主要的命令就是要用到npm run build命令。我们在命令行中输入npm run build命令后,vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中可以看出,你执行的npm run build命令就相对执行的 node build/build.js

package.json的scripts 字段:

"scripts": {  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  "start": "npm run dev",  "build": "node build/build.js"},

在执行完npm run build命令后,在你的项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件。

npm run build//如果遇到以下错误npm: 6.5.0-next.0 should be >= 3.0.0,执行npm更新指令即可npm install npm@latest -g

dist文件夹下目录包括:

  • index.html主页文件:因为我们开发的是单页web应用,所以说一般只有一个html文件。
  • static 静态资源文件夹:里边js、CSS和一些图片。

1.4.2、main.js文件解读

main.js是整个项目的入口文件,在src文件夹下:

import Vue from 'vue'      import App from './App'import router from './router'Vue.config.productionTip = false   //生产环境提示,这里设置成了false/* eslint-disable no-new */new Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

通过代码可以看出这里引进了App的组件和的模板,它是通过 import App from'./App'这句代码引入的。 我们找到App.vue文件,打开查看。

1.4.3、App.vue文件

<template>  <div id="app">    <img src="./assets/logo.png">    <router-view/>  </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;}</style>

app.vue文件我们可以分成三部分解读,

  • <template></template>标签包裹的内容:这是模板的HTMLDom结构,里边引入了一张图片和<router-view></router-view>标签,<router-view>标签说明使用了路由机制。我们会在以后专门拿出一篇文章讲Vue-router。
  • <script></script>标签包括的js内容:你可以在这里些一些页面的动态效果和Vue的逻辑代码。
  • <style></style>标签包裹的css内容:这里就是你平时写的CSS样式,对页面样子进行装饰用的,需要特别说明的是你可以用<style scoped></style>来声明这些css样式只在本模板中起作用。

1.4.5、router/index.js 路由文件

引文在app.vue中我们看到了路由文件,虽然router的内容比较多,但是我们先简单的看一下。下篇文章我们就开始讲Vue-router。

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.useexport default new Router({  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    }  ]})

我们可以看到import HelloWorld from '@/components/HelloWorld'这句话, 文件引入了/components/HelloWorld.vue文件。这个文件里就配置了一个路由,就是当我们访问网站时给我们显示HelloWorld.vue的内容。

1.4.6、HelloWorld.vue文件解读

这个文件就是我们在第一节课看到的页面文件了。也是分为<template><script><style>三个部分,以后我们大部分的工作都是写这些.vue结尾的文件。现在我们可以试着改一些内容,然后预览一下。

<template>  <div class="hello">    <h1>{{ msg }}</h1>    <h2>Essential Links</h2>    <ul>      <li>        <a          href="https://vuejs.org"          target="_blank"        >          Core Docs        </a>      </li>      <li>        <a          href="https://forum.vuejs.org"          target="_blank"        >          Forum        </a>      </li>      <li>        <a          href="https://chat.vuejs.org"          target="_blank"        >          Community Chat        </a>      </li>      <li>        <a          href="https://twitter.com/vuejs"          target="_blank"        >          Twitter        </a>      </li>      <br>      <li>        <a          href="http://vuejs-templates.github.io/webpack/"          target="_blank"        >          Docs for This Template        </a>      </li>    </ul>    <h2>Ecosystem</h2>    <ul>      <li>        <a          href="http://router.vuejs.org/"          target="_blank"        >          vue-router        </a>      </li>      <li>        <a          href="http://vuex.vuejs.org/"          target="_blank"        >          vuex        </a>      </li>      <li>        <a          href="http://vue-loader.vuejs.org/"          target="_blank"        >          vue-loader        </a>      </li>      <li>        <a          href="https://github.com/vuejs/awesome-vue"          target="_blank"        >          awesome-vue        </a>      </li>    </ul>  </div></template><script>export default {  name: 'HelloWorld',  data () {    return {      msg: 'Welcome to My Blog ,I am 进击的辣条'    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 {  font-weight: normal;}ul {  list-style-type: none;  padding: 0;}li {  display: inline-block;  margin: 0 10px;}a {
  color: #42b983;}</style>

总结: 这个教程只是带着你大概浏览和重点讲解了vue-cli的知识,如果你想完全弄明白vue-cli,我建议最好是有调理的阅读所有代码,这对你以后成为vue实际项目 的开发很有帮助。如果你是一个初学者,了解这些已经足够向下学习了。这篇教程结束后,我们会学习vue-router的知识,vue-router是一个重点学习任务。

2、Vue-router

简介: 由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。

有的小伙伴会有疑虑,为什么我们不能像原来一样直接用<a></a>标签编写链接哪?因为我们用Vue作的都是单页应用,就相当于只有一个主的index.html页面,所以你写的<a></a>标签是不起作用的,你必须使用vue-router来进行管理。

2.1、Vue-router入门

2.1.1、安装vue-router

vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。

npm install vue-router --save-dev

如果你安装很慢,也可以用cnpm进行安装,如果你在使用vue-cli中已经选择安装了vue-router,那这里不需要重复安装了。

2.1.2、解读router/index.js文件

我们用vue-cli生产了我们的项目结构,你可以在src/router/index.js文件,这个文件就是路由的核心文件

import Vue from 'vue'   //引入Vueimport Router from 'vue-router'  //引入vue-routerimport HelloWorld from '@/components/HelloWorld'  //引入根目录下的HelloWorld.vue组件Vue.use  //Vue全局使用Routerexport default new Router({  routes: [                   //配置路由,这里是个数组    {                         //每一个链接都是一个对象      path: '/',              //链接路径      name: 'HelloWorld',     //路由名称,      component: HelloWorld   //对应的组件模板    }  ]})

上边的代码中已经对每行都进行了注释,其实在这个路由文件里只配置了一个功能,就是在进入项目时,显示HelloWorld.vue里边的内容代码。

2.1.3、增加一个Hi的路由和页面

对路由的核心文件熟悉后,我们试着增加一个路由配置,我们希望在地址栏输入

  • 在src/components目录下,新建 Hi.vue 文件。w
  • 编写文件内容,和我们之前讲过的一样,文件要包括三个部分<template><script><style>。文件很简单,只是打印一句话。

    <template>  <div class="hello">    <h1>{{ msg }}</h1>  </div></template><script>export default {  name: 'hi',  data () {    return {      msg: 'Hi, I am 进击的辣条'    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>
    
  • 引入 Hi组件:我们在router/index.js文件的上边引入Hi组件

    import Hi from '@/components/Hi'
    
  • 增加路由配置:在router/index.js文件的routes[]数组中,新增加一个对象,代码如下。

    {  path: '/hi',  name: 'Hi',  component: Hi}
    

    通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看,贴出现在的路由配置文件:

    图片 3图片 4

    import Vue from 'vue' //引入Vueimport Router from 'vue-router' //引入vue-routerimport HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件import Hi from '@/components/Hi'Vue.use //Vue全局使用Routerexport default new Router({  routes: [ //配置路由,这里是个数组    { //每一个链接都是一个对象      path: '/', //链接路径      name: 'HelloWorld', //路由名称,      component: HelloWorld //对应的组件模板    },    {      path: '/hi',      name: 'Hi',      component: Hi    }  ]})
    

    View Code

2.1.4、router-link制作导航

现在通过在地址栏改变字符串地址,已经可以实现页面内容的变化了。这并不满足需求,我们需要的是在页面上有个像样的导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要标签,我们先来看一下它的语法。

<router-link to="/">[显示字段]</router-link>
  • to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成to=”/”
  • [显示字段] :就是我们要显示给用户的导航名称,比如首页 新闻页。

明白了router-link的基本语法,我们在 src/App.vue文件中的template里加入下面代码,实现导航。

<div>  <router-link to="/">首页</router-link>|  <router-link to="/hi">Hi页面</router-link></div>

现在我们访问页面,发现已经多出了导航。

图片 5

总结:这节课我们在vue-cli的构建下对vue-router有了一个基本的了解,学会了vue-router的核心文件的基本结构,学会了如何添加一个新的模板页面,还学会了用<router-link>标签设置导航。

2.2、vue-router配置子路由

我们上节课初步了解Vue-router的初步知识,也学会了基本的跳转,那我们这节课学习一下子菜单的路由方式,也叫子路由。子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式。我们接着第一节课的实例,在Hi页面的下面新建两个子页面,分别是 “Hi页面1” 和 “Hi页面2”,来实现子路由。

2.2.1、改造App.vue的导航代码

我们需要先改造app.vue的导航代码,来实现基本的导航功能。我们用标签增加了两个新的导航链接。

App.vue代码

<div>  <router-link to="/">首页</router-link>|  <router-link to="/hi">Hi页面</router-link>|  <router-link to="/hi/hi1">Hi1页面</router-link>|  <router-link to="/hi/hi2">Hi2页面</router-link></div>

这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航:Hi页面1 和 Hi页面2

图片 6

2.2.2、改写components/Hi.vue页面

把Hi.vue改成一个通用的模板,加入<router-view>标签,给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面,有点像继承关系。我们在“Hi页面”里加入<router-view>标签。

components/Hi.vue,就是第5行的代码,其他代码不变。

<template>  <div class="hello">    <h1>{{ msg }}</h1>    <router-view></router-view>  </div></template><script>export default {  name: "hi",  data() {    return {      msg: "Hi, I am Hi page."    };  }};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

2.2.3、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

新建的模板和Hi.vue没有太多的差别,知识改变了data中message的值,也就是输出的结果不太一样了。

Hi1.vue

图片 7图片 8

<template>  <div class="hello">    <h1>{{ msg }}</h1>  </div></template><script>export default {  name: "hi1",  data() {    return {      msg: "Hi, I am Hi1 page."    };  }};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

View Code

Hi2.vue

图片 9图片 10

<template>  <div class="hello">    <h1>{{ msg }}</h1>  </div></template><script>export default {  name: "hi2",  data() {    return {      msg: "Hi, I am Hi2 page."    };  }};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

View Code

2.2.4、修改router/index.js代码

我们现在导航有了,母模板和子模板也有了,只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。

children: [  { path: '/', name: 'hi', component: Hi },   { path: 'hi1', name: 'hi1', component: Hi1 },  { path: 'hi2', name: 'hi2', component: Hi2 }]

children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。具体看一下这个子路由的配置写法。

import Vue from 'vue' //引入Vueimport Router from 'vue-router' //引入vue-routerimport HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件import Hi from '@/components/Hi'import Hi1 from '@/components/Hi1'import Hi2 from '@/components/Hi2'Vue.use //Vue全局使用Routerexport default new Router({  routes: [ //配置路由,这里是个数组    { //每一个链接都是一个对象      path: '/', //链接路径      name: 'HelloWorld', //路由名称,      component: HelloWorld //对应的组件模板    },    {      path: '/hi',      name: 'Hi',      component: Hi,      children: [        { path: '/', name: 'hi', component: Hi },         { path: 'hi1', name: 'hi1', component: Hi1 },         { path: 'hi2', name: 'hi2', component: Hi2 }      ]    }  ]})

需要注意的是,在配置路由文件前,需要先用import引入Hi1和Hi2。

总结: 这节的内容在路由配置里经常用到,比如我们作一个购物模块,购物模块里有很多相同的元素,我们就会利用这种子路由的形式,先定一个父页面,然后再修改子页面。希望这节课对你有帮助,其实子路由的步骤还是有些繁琐的,所以希望你们多练习几遍,能够完全掌握。

2.1、vue-router如何参数传递

开发中,参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式,这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求,就是在我们点击导航菜单时,跳转页面上能显示出当前页面的路径,来告诉用户你想在所看的页面位置。

2.1.1、用name传递参数

前两节课一直出现name的选项,但是我们都没有讲,这节课我们讲name的一种作用,传递参数。接着上节课的程序继续编写。

两步完成用name传值并显示在模板里:

  • 在路由文件src/router/index.js里配置name属性。

    routes: [ //配置路由,这里是个数组  { //每一个链接都是一个对象    path: '/', //链接路径    name: 'HelloWorld', //路由名称,    component: HelloWorld //对应的组件模板  }]
    
  • 模板里(src/App.vue)用$route.name的形势接收,比如直接在模板中显示:

    <p>{{$route.name}}</p>
    

2.1.2、通过标签中的to传参

也许你也会觉的上边的传参很不正规,也不方便,其实我们多数传参是不用name进行传参的,我们用标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。

先来看一下这种传参方法的基本语法:

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

这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

  • name:就是我们在路由配置文件中起的name值。
  • params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

了解基本的语法后,我们改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改。

<router-link :to="{name:'hi1',params:{username:'进击的辣条'}}">Hi1页面</router-link>|

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

{ path: 'hi1', name: 'hi1', component: Hi1 }, 

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

{{$route.params.username}}

总结:今天我们学习了两种传参的方法,一般会使用第二种方法。我们通过学习也知道了name的用途,一种作用是传参,一种作用是在传参时起到名称作用。

2.2、单页面多路由区域操作

实际需求是这样的,在一个页面里我们有2个以上<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目,并打开了src目录下的App.vue文件,在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view><router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

现在的页面中有了三个标签,也就是说我们需要在路由里配置这三个区域,配置主要是在components字段里进行。

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Hi1 from '@/components/Hi1'import Hi2 from '@/components/Hi2'Vue.useexport default new Router({  routes: [    {      path: '/',      name: 'HelloWorld',      components: {        default:HelloWorld,        left:Hi1,        right:Hi2      }    },    {      path: '/Hi',      name: 'HelloWorld',      components: {        default:HelloWorld,        left:Hi2,        right:Hi1      }    }  ]})

上边的代码我们编写了两个路径,一个是默认的‘/’,另一个是’/Hi’.在两个路径下的components里面,我们对三个区域都定义了显示内容。 定义好后,我们需要在component文件夹下,新建Hi1.vue和Hi2.vue页面就可以了。

Hi1.vue

图片 11图片 12

<template>  <h2>{{msg}}</h2></template><script>export default {  data() {    return {      msg: "I am Hi1"    };  }};</script>

View Code

Hi2.vue

图片 13图片 14

<template>  <h2>{{msg}}</h2></template><script>export default {  data() {    return {      msg: "I am Hi2"    };  }};</script>

View Code

最后在App.vue中配置我们的就可以了

<router-link to="/">首页</router-link> | <router-link to="/hi">Hi页面</router-link> |

2.3、vue-router 利用url传递参数

我们之前已经学会传递参数,但是我们这些老程序员的情怀还是利用url来传值,因为我们以前在前后端没有分开开发的时候,经常这样做。在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。

2.3.1、:冒号的形式传递参数

我们可以在理由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。 -. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

{  path: '/params/:newsId/:newsTitle',  name: 'Params',  component:Params}

我们需要传递参数是新闻ID`和新闻标题(newsTitle`).所以我们在路由配置文件里制定了这两个值。

  • src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

    <template>  <div>    <h2>{{msg}}</h2>    <p>新闻ID:{{$route.params.newsId}}</p>    <p>新闻标题:{{$route.params.newsTitle}}</p>  </div></template><script>export default {  data() {    return {      msg: "params pages"    };  }};</script>
    
  • 在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。

    <router-link to="/params/aaa/bbb">Params</router-link>
    

    我们已经实现了以url方式进行传值,这在实际开发中经常使用,必须完全了解。

2.3.2、正则表达式在URL传值中的应用

上边的例子,我们传递了新闻编号,现在需求升级了,我们希望我们传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的类型判断,vue是支持正则的。

加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。

path:'/params/:newsId/:newsTitle',

加入了正则,我们再传递数字之外的其他参数,params.vue组件就没有办法接收到。

2.4、vue-router 的重定向-redirect

开发中有时候我们虽然设置的路径不一致,但是我们希望跳转到同一个页面,或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。

2.4.1、redirect基本重定向

我们只要在路由配置文件中(/src/router/index.js)把原来的component换成redirect参数就可以了。我们来看一个简单的配置。

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Hi1 from '@/components/Hi1'import Hi2 from '@/components/Hi2'import Params from '@/components/Params'Vue.useexport default new Router({  routes: [{      path: '/',      name: 'HelloWorld',      component: HelloWorld    },    {      path: '/params/:newsId/:newsTitle',      name: 'Params',      component: Params    },    {      path: '/goHome',      redirect: '/'    }  ]})

这里我们设置了goHome路由,但是它并没有配置任何component,而是直接redirect到path:’/’下了,这就是一个简单的重新定向。

2.4.2、重定向时传递参数

我们已经学会了通过url来传递参数,那我们重定向时如果也需要传递参数怎么办?其实vue也已经为我们设置好了,我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了。可能你看的有点晕,我们来看一段代码:

{  path:'/params/:newsId/:newsTitle',  component:Params},{  path:'/goParams/:newsId/:newsTitle',  redirect:'/params/:newsId/:newsTitle'}

已经有了一个params路由配置,我们在设置一个goParams的路由重定向,并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方法和正常的路由接收方法一样。

2.5、alias别名的使用

上节学习了路由的重定向,我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式,我们也可以实现类似重定向的效果。

  1. 首先我们在路由配置文件里(/src/router/index.js),给上节课的Home路径起一个别名,aliasHi1。

    {  path: '/hi1',  name: 'hi1',  component: Hi1,  alias:'/aliasHi1'}
    
  2. 配置我们的,起过别名之后,可以直接使用<router-link>标签里的to属性,进行重新定向。

    <router-link to="/aliasHi1">aliasHi1</router-link>
    

2.5.1、redirect和alias的区别

  • redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
  • alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。

2.6、路由的过渡动画

在开发中有一种需求叫高端、大气、上档次。所以作为一个大前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。

2.6.1、<transition>标签

想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性。

<transition name="fade">  <router-view/></transition>

我们在/src/App.vue文件里添加了<transition>标签,并给标签起了一个名字叫fade

2.6.2、css过渡类名

组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:

  1. fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
  2. fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
  3. fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
  4. fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。

从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

那我们就在App.vue页面里加入四种CSS样式效果,并利用CSS3的transition属性控制动画的具体效果。代码如下:

.fade-enter {  opacity:0;}.fade-leave{  opacity:1;}.fade-enter-active{  transition:opacity .5s;}.fade-leave-active{  opacity:0;  transition:opacity .5s;}

上边的代码设置了改变透明度的动画过渡效果,但是默认的mode模式in-out模式,这并不是我们想要的。下面我们学一下mode模式。

2.6.3、过渡模式mode

  • in-out:新元素先进入过渡,完成之后当前元素过渡离开。
  • out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。

这节课只能算是一个简单的过渡入门,教会大家原理,如果想做出实用酷炫的过渡效果,你需要有较强的动画制作能力,我们下节课继续学习动画的知识。

2.7、mode的设置和404页面的处理

在学习过渡效果的时候,我们学了mode的设置,但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。

2.7.1、mode的两个值

  1. histroy:当你使用history模式时,URL 就像正常的 url,例如

  2. hash:默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。

2.7.2、404页面的设置

用户会经常输错页面,当用户输错页面时,我们希望给他一个友好的提示,为此美工都会设计一个漂亮的页面,这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.

  1. 设置我们的路由配置文件(/src/router/index.js):

    //...import Error from '@/components/Error'//...{  path: '*',  component: Error}, 
    

    这里的path:’*’就是找不到页面时的配置,component是我们新建的一个Error.vue的文件。

  2. 新建404页面
    /src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。

    <template>  <div>    <h2>{{ msg }}</h2>  </div></template><script>export default {  data() {    return {      msg: "Error:404"    };  }};</script>
    
  3. 我们在用<router-link>瞎写一个标签的路径。

    <router-link to="/bbbbbb">我是瞎写的</router-link>
    

    预览一下我们现在的结果,就已经实现404页面的效果。

2.8、路由中的钩子

我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中,也可以写在我们的组件模板中。我们这节课就介绍这两种钩子函数的写法。

2.8.1、路由配置文件中的钩子函数

我们可以直接在路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码

{  path: '/params/:newsId/:newsTitle',  name: 'Params',  component: Params,  beforeEnter:(to,from,next)=>{    console.log('我进入了params模板');    console.log;    console.log(from);    next();  }},

我们在params路由里配置了bdforeEnter得钩子函数,函数我们采用了ES6的箭头函数,需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。

三个参数:

  1. to:路由将要跳转的路径信息,信息是包含在对像里边的。
  2. from:路径跳转前的路径信息,也是一个对象的形式。
  3. next:路由的控制参数,常用的有next和next。

2.8.2、写在模板中的钩子函数

在配置文件中的钩子函数,只有一个钩子-beforeEnter,如果我们写在模板中就可以有两个钩子函数可以使用:

  • beforeRouteEnter:在路由进入前的钩子函数。
  • beforeRouteLeave:在路由离开前的钩子函数。

    export default {  data() {    return {      msg: "params pages"    };  },  beforeRouteEnter(to, from, next) {    console.log("准备进入路由模板");    next();  },  beforeRouteLeave(to, from, next) {    console.log("准备离开路由模板");    next();  }};
    

这是我们写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开,也可以轻易的读出to和from的值。

2.9、编程式导航

这是这篇文章的最后一节,前10节课的导航都是用<router-link>标签或者直接操作地址栏的形式完成的,那如果在业务逻辑代码中需要跳转页面我们如何操作?这就是我们要说的编程式导航,顾名思义,就是在业务逻辑代码中实现导航。

router.go(-1)代表着后退,我们可以让我们的导航进行后退,并且我们的地址栏也是有所变化的。

  1. 我们先在app.vue文件里加入一个按钮,按钮并绑定一个goback方法。

    <button @click="goback">后退</button>
    
  2. 在我们的script模块中写入goback()方法,并使用this.$router.go,进行后退操作。

    <script>export default {  name: "App",  methods: {    goBack() {      this.$router.go(-1);    }  }};</script>
    

打开浏览器进行预览,这时我们的后退按钮就可以向以前的网页一样后退了。

router.go(1):代表着前进,用法和后退一样,我在这里就不重复码字了(码字辛苦希望大家理解)。

this.$router.push(‘/xxx ‘)这个编程式导航都作用就是跳转,比如我们判断用户名和密码正确时,需要跳转到用户中心页面或者首页,都用到这个编程的方法来操作路由。

我们设置一个按钮,点击按钮后回到站点首页。

  1. 先编写一个按钮,在按钮上绑定goHome方法。

    <button @click="goHome">回到首页</button>
    
  2. <script>模块里加入goHome方法,并用this.$router.push(‘/’)导航到首页

    <script>export default {  name: "App",  methods: {    goBack() {      this.$router.go(-1);    },    goHome() {      this.$router.push("/");    }  }};</script>
    

3、vuwx

vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。比如:我们有几个页面要显示用户名称和用户等级,或者显示用户的地理位置。如果我们不把这些属性设置为状态,那每个页面遇到后,都会到服务器进行查找计算,返回后再显示。在中大型项目中会有很多共用的数据,所以尤大神给我们提供了vuex。

官网:

3.1、vuex小Demo

3.1.1、引入vuex

  1. 先使用vuecli创建项目,然后利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了

    npm n install vuex --save
    

    需要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。

  2. 新建一个vuex文件夹,并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。

    import Vue from 'vue';import Vuex from 'vuex';
    
  3. 使用我们vuex,引入之后用Vue.use进行引用。

    Vue.use;
    

    通过这三步的操作,vuex就算引用成功了,接下来我们就可以尽情的玩耍了。

3.1.2、入门小Demo

我们这个小案例先声明一个state的count状态,在页面中使用显示这个count,然后可以利用按钮进行加减,如果你看过我的文章,你一定知道,在我们学基础知识 的时候经常编写这个程序。

  1. 现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件。

    const state={    count:1}
    
  2. 用export default 封装代码,让外部可以引用。

    export default new Vuex.Store({    state})
    
  3. 新建一个vue的模板,位置在components文件夹下,名字叫count.vue。在模板中我们引入我们刚建的store.js文件,并在模板中用{{$store.state.count}}输出count 的值。

    <template>  <div>    <h2>{{ msg }}</h2>    <hr>    <h3>{{$store.state.count}}</h3>    <div>      <button @click="$store.commit">+</button>      <button @click="$store.commit">-</button>    </div>  </div></template><script>import store from '@/vuex/store'export default {  data () {    return {      msg: 'Hello Vuex'    }  },  store}</script>
    
  4. 在store.js文件中加入两个改变state的方法。

    const mutations={    add{        state.count++;    },    reduce{        state.count--;    }}
    

    这里的mutations是固定的写法,意思是改变的,我们到时候会用一节课专门讲这个mutations,所以你先不用着急,只知道我们要改变state的数值的方法,必须写在mutations里就可以了。

  5. 在count.vue模板中加入两个按钮,并调用mutations中的方法。

    <div>    <button @click="$store.commit">+</button>    <button @click="$store.commit">-</button></div>
    

    这样进行预览就可以实现对vuex中的count进行加减了。

3.2、state访问状态对象

在第1节我们已经写了一个 const state ,这个就是我们说的访问状态对象,它就是我们SPA中的共享值。今天我们主要学习状态对象赋值给内部对象,也就是把stroe.js中的值,赋值给我们模板里data中的值。我们有三种赋值方式,我们一个一个来学习一下。

3.2.1、通过computed的计算属性直接赋值

computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

computed:{    count(){        return this.$store.state.count;    }}

这里需要注意的是return this.$store.state.count这一句,一定要写this,要不你会找不到$store的。这种写法很好理解,但是写起来是比较麻烦的,那我们来看看第二种写法。

3.2.2、通过mapState的对象来赋值

我们首先要用import引入mapState。

import {mapState} from 'vuex';

然后还在computed计算属性里写如下代码:

computed:mapState({  count:state=>state.count})

这里我们使用ES6的箭头函数来给count赋值。

3.2.3、通过mapState的数组来赋值

computed:mapState(["count"])

这个算是最简单的写法了,在实际项目开发当中也经常这样使用。

3.3、Mutations修改状态

上节我们学习了怎么样读取state,那我们接下来学习一下怎么样修改状态。这个常量我们在第一节课的时候也碰到过,并且进行了加减的操作。那这节课我们就具体学习一下,如何操作Mutations。

3.3.1、$store.commit

Vuex提供了commit方法来修改状态,我们粘贴出第一节课的代码内容,简单回顾一下,我们在button上的修改方法。

<button @click="$store.commit">+</button><button @click="$store.commit">-</button>

store.js文件:

const mutations={    add{        state.count++;    },    reduce{        state.count--;    }}

3.3.2、传值

这只是一个最简单的修改状态的操作,在实际项目中我们常常需要在修改状态时传值。比如上边的例子,是我们每次只加1,而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数,并在commit的时候传递就就可以了。我们来看具体代码:

现在store.js文件里给add方法加上一个参数n。

const mutations={    add{        state.count+=n;    },    reduce{        state.count--;    }}

在Count.vue里修改按钮的commit方法传递的参数,我们传递10,意思就是每次加10.

<p>   <button @click="$store.commit">+</button>   <button @click="$store.commit">-</button></p>

这样两个简单的修改我们就完成了传值,我们可以在浏览器中实验一下了。

3.3.3、模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit这样的方法出现,我们希望跟调用模板里的方法一样调用。

例如:@click=”reduce”就和没引用vuex插件一样。

要达到这种写法,只需要简单的两部就可以了:

  1. 在模板count.vue里用import 引入我们的mapMutations:

    import {mapState,mapMutations} from 'vuex';
    
  2. 在模板的<script>标签里添加methods属性,并加入mapMutations

    methods:mapMutations(['add','reduce'])
    

    通过上边两部,我们已经可以在模板中直接使用我们的reduce或者add方法了,就像下面这样。

    <button @click="reduce">-</button>
    

3.4、getters计算过滤操作

getters从表面是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

3.4.1、getters基本用法

比如我们现在要对store.js文件中的count进行一个计算属性的操作,就是在它输出前,给它加上100.

我们首先要在store.js里用const声明我们的getters属性。

const getters = {    count:function{        return state.count +=100;    }}

写好了gettters之后,我们还需要在Vuex.Store()里引入,由于之前我们已经引入了statemutations,所以引入里有三个引入属性。代码如下,

export default new Vuex.Store({    state,mutations,getters})

在store.js里的配置算是完成了,我们需要到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性,如果你写多个,只有最后一个computed属性可用,所以要对上节课写的computed属性进行一个改造。改造时我们使用ES6中的展开运算符”…”。.

computed:{    ...mapState(["count"]),    count(){        return this.$store.getters.count;    }},

需要注意的是,你写了这个配置后,在每次count 的值发生变化的时候,都会进行加100的操作。

3.4.2、用mapGetters简化模板写法.

我们都知道state和mutations都有map的引用方法把我们模板中的编码进行简化,我们的getters也是有的,我们来看一下代码。

首先用import引入我们的`mapGetters

import { mapState,mapMutations,mapGetters } from 'vuex';

在computed属性中加入mapGetters

computed:{  ...mapState(["count"]),  // count(){  //   return this.$store.getters.count;  // }  ...mapGetters(["count"])},methods:mapMutations(['add','reduce'])

3.5、actions异步修改状态

actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了,如果你不懂自己去百度查一下吧。

3.5.1、在store.js中声明actions

actions是可以调用Mutations里的方法的,我们还是继续在上节课的代码基础上进行学习,在actions里调用add和reduce两个方法。

const actions ={    addAction{        context.commit('add',10)    },    reduceAction{        commit('reduce')    }}

在actions里写了两个方法addAction和reduceAction,在方法体里,我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。

  • context:上下文对象,这里你可以理解称store本身。
  • {commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。

3.5.2、模板中的使用

我们需要在count.vue模板中编写代码,让actions生效。我们先复制两个以前有的按钮,并改成我们的actions里的方法名,分别是:addAction和reduceAction。

<p>  <button @click="addAction">+</button>  <button @click="reduceAction">-</button></p>

改造一下我们的methods方法,首先还是用扩展运算符把mapMutations和mapActions加入。

methods:{    ...mapMutations([          'add','reduce'    ]),    ...mapActions(['addAction','reduceAction'])},

你还要记得用import把我们的mapActions引入才可以使用。

import {mapState,mapMutations,getters, mapGetters, mapActions} from 'vuex';

3.5.3、增加异步检验

我们现在看的效果和我们用Mutations作的一模一样,肯定有的小伙伴会好奇,那actions有什么用,我们为了演示actions的异步功能,我们增加一个计时器(setTimeOut)延迟执行。在addAction里使用setTimeOut进行延迟执行。

const actions={    addAction{        context.commit('add',10);        setTimeout=>{context.commit},2000);        console.log("我比reduce先执行了");    },    reduceAction{        commit('reduce')    }}

我们可以看到在控制台先打印出了‘我比reduce提前执行’这句话。

3.6、module模块组

随着项目的复杂性增加,我们共享的状态越来越多,这时候我们就需要把我们状态的各种操作进行一个分组,分组后再进行按组编写。那今天我们就学习一下module:状态管理器的模块组操作。

3.6.1、声明模块组

在vuex/store.js中声明模块组,我们还是用我们的const常量的方法声明模块组。代码如下:

const moduleA={    state,mutations,getters,actions}

声明好后,我们需要修改原来 Vuex.Stroe里的值:

export default new Vuex.Store({    modules:{a:moduleA}})

3.6.2、在模板中使用

现在我们要在模板中使用count状态,要用插值的形式写入。

<h3>{{$store.state.a.count}}</h3>

如果想用简单的方法引入,还是要在我们的计算属性中rutrun我们的状态。写法如下:

computed:{    count(){        return this.$store.state.a.count;    }},

编辑:快三平台下载编程 本文来源:命令安装vue-cli了

关键词: