06 day5-Vue.js黑马全家桶笔记-Vue-cli、Vuex

（四）Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构。官网地址：https://cli.vuejs.org/zh/

(1) 基本用法

安装3.x版本的Vue脚手架：
npm install -g @vue/cli

卸载命令：npm uninstall -g vue-cli

检查命令 Vue -V

1.1 命令行形式创建

基于3.x版本的脚手架创建Vue项目：
1).使用命令打开目录，创建Vue项目，名字英文
命令：vue create my-project

回车：提示交互式的问答面板

​ 1选择Manually select features(选择手动特性以创建项目)
​ 2勾选特性可以用上下滚动选择然后用空格进行勾选（*）。

Babel、Router、Linter/Formatter

​ 是否选用历史模式的路由：n (选hash版本的)
​ ESLint选择：ESLint + Standard config（标准）
​ 何时进行ESLint语法校验：Lint on save
​ babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置，好维护)
​ 是否保存为模板：n

​ 正在创建

cd my-project

npm run serve

​ 选择地址回车


main.js：el是挂载点，router是路由
App.vue 是整个文件的入口，有三部分，template模板 script 逻辑 style样式
目录解析:

目录/文件	说明
build	项目构建(webpack)相关代码
手机	$12
导管	$1

目录解析
目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，根组件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件，入口。
src/router.js:路由js
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

1.2 基于ui界面创建Vue项目

    命令：vue ui
    在自动打开的创建项目网页中配置项目信息。

详情：项目my_project2 初始化建议：init project

预设：手动
功能：4个 Babel、Router、Linter/Formatter、使用配置文件
配置：



点击项目管理器->查看项目
任务->serve->运行->启动app

1.3 基于2.x的旧模板，创建Vue项目

    npm install -g @vue/cli-init
    vue init webpack my-project03

（2）Vue脚手架的自定义配置

• A.通过 package.json 进行配置 。
  注意:不推荐使用这种配置方式。因为package.json主要用来管理包的配置信息;为了方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中。

 "vue":{
    "devServer":{
             "port":"9990",
             "open":true
            }
       }

• B.通过单独的配置文件进行配置，创建vue.config.js

  module.exports = {
         devServer:{
             port:8888,
             open:true
            }
        }

（五）Element-Ul的基本使用

Element-UI:一套基于2.0的桌面端组件库，官网地址：点击。点击组件即可查看。

（1）基于命令行方式手动安装

• A.安装：npm install element-ui -S
• B.main.js导入：

     // 导入组件库：
​    import ElementUI from "element-ui";
      //导入组件相关样式
​    import "element-ui/lib/theme-chalk/index.css";
​     // 配置vue插件
    Vue.use(ElementUI)

• C.复制组件代码插入App.vue代码中即可。
• D.npm run serve

（2）基于图形化界面自动安装

• 1.运行vue ui命令,打开图形化界面
• 2.创建新项目，选择现成的预设 ,通过Vue项目管理器，进入具体的项目配置面板，任务里serve运行
• 3.点击插件->添加插件,进入插件查询面板，搜索vue-cli-plugin- element并安装
• 4.配置插件，实现按需导入，从而减少打包后项目的体积
• 5.项目重新运行，Vscode打开项目 ，App.vue写入即可。

（六）Vuex

（1） Vuex概述

1.1组件之间共享数据的方式

• 1 父向子传值: v-bind属性绑定
• 2 子向父传值: v-on事件绑定
• 3 兄弟组件之间共享数据: EventBus
  • $on接收数据的那个组件
  • $emit 发送数据的那个组件

1.2 Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。

1.3 什么样的数据适合存储到Vuex中

一般情况下，只有组件之间共享的数据，有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可。

• 使用Vuex管理数据的好处：
  A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护。
  B.能够高效的实现组件之间的数据共享，提高开发效率。
  C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新。

（2）Vuex的基本使用

2.1 图形化界面使用

• 1.vue ui
• 2.新建项目vuex_demo1–>手动–>Babel、Vuex、Linter、Use config files–>标准配置文件–>存预设–>运行。

2.2 命令行方式使用

• 1.安装vuex依赖包：npm install vuex --save
• 2.导入vuex包

import Vuex from 'vuex '
vue .use (Vuex)

• 3.创建store对象

const store = new  Vuex.Store({
       //state中存放的就是全局共享的数据
        state:{ count: 0 }
   })

• 4.将store对象挂载到vue实例中

new Vue ({
     el :' #app' ,
     render: h => h(app),
     router,
     //将创建的共享数据对象，挂载到Vue实例中
     //所有的组件，就可以直接从store 中获取全局的数据了
      store
})

2.3 使用Vuex完成计数器案例

1.打开刚刚创建的vuex项目，找到src目录中的App.vue组件，将代码重新编写如下：

<template>
  <div>
    <my-addition></my-addition>

    <p>----------------------------------------</p>

    <my-subtraction></my-subtraction>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'

export default {
  data() {
    return {}
  },
  components: {
    'my-subtraction': Subtraction,
    'my-addition': Addition
  }
}
</script>

<style>
</style>

2.在components文件夹中创建Addition.vue组件，代码如下：

<template>
    <div>
        <h3>当前最新的count值为：</h3>
        <button>+1</button>
    </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>
</style>

3.在components文件夹中创建Subtraction.vue组件，代码如下：

<template>
    <div>
        <h3>当前最新的count值为：</h3>
        <button>-1</button>
    </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>
</style>

4.最后在项目根目录(与src平级)中创建 .prettierrc 文件，编写代码如下：

{
    "semi":false,//不使用分号
    "singleQuote":true//双引号改为单引号
}

（3）Vuex中的核心特性

3.1 State

• State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储
• 例如，打开项目中的store.js文件，在State对象中可以添加我们要共享的数据，如：count:0

//创建store数据源，提供唯一公共数据
 const store = new vuex. store ({
                      state: { count: 0 }
})

• 在组件中访问State的两种方式：
  1).插值表达式，this.$store.state.全局数据名称 如：{{this.$store.state.count}}，template中this可以省略
  2).先按需导入mapState函数：import { mapState } from 'vuex'
  3).通过刚才导入的mapState函数, 然后数据映射为计算属性：computed:{ ...mapState(['全局数据名称']) }
  //…是展开运算符的意思，把全局里面的数据映射为当前组件的computed计算属性。

3.2 Mutation

Mutation用于修改变更$store中的数据。使用方式：
1.打开store.js文件，在mutations中添加代码如下

mutations: {
    addN(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

2.触发mutation,然后在Addition.vue中给按钮添加事件代码如下：

+1

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit('addN',10)
  }
}

this. $store. commit()是触发mutations的第一种方式， 触发mutations的第二种方式:

// 1.从vuex中按需导入mapMutations 函数
 import { mapMutations } from 'vuex'
// 2.将指定的mutations 函数，映射为当前组件的methods 函数
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  }

3.3 Action

• 在mutations中不能编写异步的代码，会导致vue调试器的显示出错。
• 在vuex中我们可以使用Action来执行异步操作。但是在Action中不能直接修改state中的数据，还是要通过context.commit()触发某个Mutation的方式间接变更数据。操作步骤如下：
  1.打开store.js文件，修改Action，如下：

const store = new Vue.Store({
mutations: {
    add(state){
      state.count++;
    }
  }
actions: {
  addAsync(context){
    setTimeout(()=>{
      context.commit('add');
    },2000)
  }
 }
})

2.触发，然后在Addition.vue中给按钮添加事件代码如下：

...+1

methods:{
  AddAsync(){
  //触发actions的第一种方式,这里的dispatch 函数，专门用来触发action
    this.$store.dispatch('addAsync')
  }
}

参数的话：

触发第二种方式：

// 1.从vuex中按需导入mapActions 函数
import { mapActions } from 'vuex'
2.通过刚才导入的mapActions函数,将需要的actions函数，映射为当前组件的methods方法:
methods:{
  ...mapMutations(['subAsync'])
}

完整如下：

import { mapState,mapMutations,mapActions } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      },
      //获得mapActions映射的addAsync函数
      ...mapActions(['subAsync']),
      asyncSub(){
          this.subAsync(5);
      }
  },
  computed:{
      ...mapState(['count'])    
  }
}

3.4 Getter

• Getter用于对Store中的数据进行加工处理形成新的数据，它只会包装Store中保存的数据，并不会修改Store中保存的数据，类似Vue的计算属性
• 当Store中的数据发生变化时，Getter生成的内容也会随之变化。
  1.打开store.js文件，添加getters，如下：

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

2.然后打开Addition.vue中，触发，

• 添加插值表达式使用getters。
  

  {{$store.getters.showNum}}

• 也可以在Addition.vue中，导入mapGetters，并将之映射为计算属性。

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}