vue 精简教程（五) vue-cli脚手架

---

前言

一、重要的部分？

1、vue-cli 脚手架

1） Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
其实就是一个配置好了的使用webpack完成打包构建的初始化工程，和我们前面讲的webpack打包没啥区别，只是更为全面，在实际开发中也是常用的工具

2）全局安装cli，确保你已经安装了node了哦，命令行执行　npm i @vue/cli -g

3. 安装完成后检查一下 vue --version 可以看到安装后的版本

4）使用create创建项目，命令行执行，后面紧跟的是项目名
，这里我起名 vueclidemo vue create vueclidemo

5. 然后进入这个项目文件夹，命令行执行 npm run serve
   
6. comand 链接就可以打开
   
   7） 可以对项目打包 npm run build

2、我们来使用一下脚手架 搭建一个最简单的程序

1） 首先在components里面 新建一个 vueFooter.vue

<template>
  <div>
    <h2>test first</h2>
  </div>
</template>  

<script>
export default {
   };
</script>

2） App.vue 引入 并且使用它

3） 页面展示 正常

3、vuex状态管理

1、含义 ？
vuex是vue.js专门用来进行状态管理的工具，采用集中式状态管理,并以相应的规则保证一种可预测的方式发生变化

通俗的来说，就相当于一个管家，我们把一些公用的数据交给他进行管理，并且每个组件都能从他那里获取数据，或者通知他修改数据，比如存储用户信息

2、组成？
State 数据仓库
getter 获取数据
mutation 修改数据
action 提交mutation
modules 模块

3、首先使用脚手架创建一个vue项目 vue create vuexdemo

4、可以使用 vue ui 安装 vuex插件
完成后打开就行

5、


6、打开src/store/index.js,讲解一下属性

import {
   
  createStore
} from 'vuex'

export default createStore({
   
  // state 存储 全局变量
  state