Vue基础入门-04

1 Vue cil 脚手架

1.1 优点

• 创建项目之后可以直接进行vue开发
• 项目中的依赖可以随时升级
• 基于webpack构建，并带有合理的默认设置，用于聚合单页面和各种开发组件

1.2 webpack

• 丰富的官方插件的集合，继承了前端生态中最好的工具
  • es6语法自动转成es5
  • node.js服务器
  • 支持热部署
• 完全的图形化的创建和管理vue.js

1.3 安装node.js

1.安装node.js,下载node.js安装包
2.解压缩安装包
3.配置node.js环境变量
4.设置node.js本地仓库

npm config set cache "D:\Environment\noderep"
npm config set prefix"D:\Environment\noderep"

5.设置下载镜像

npm config set registry https://register.npm.taobao.org

6.执行

nom config ls

执行结果：

1.4 创建项目

1.安装vue cli

npm install -g @vue/cli   // 安装3.x
npm install -g vue-cli	  // 安装2.x

2.通过cli创建项目

a.配置node.js本地仓库环境变量 D:\Java Code\Vue
b.测试命令能否执行

vue--version

显示出vue的版本

c.选择一个项目的目录，在地址栏cmd

vue init webpack hello

d.运行项目

cd hello
npm run dev

e.浏览器访问http://localhost:8080

1.5 目录结构

• build：用来存放对项目的构建项目配置﹑用来配置生产环境﹐测试环境﹐原始目录﹑推荐默认
• config：用来修改生产配置和测试配置核心目录推荐默认
• node_modules：用来存放当前项目中使用js依赖存放js目录无须修改
• src：用来存放日后自己开发代码目录重点
  • assets：用来存放所有静态资源css,img等
  • components ：用来开发项目中—个个组件
  • router：用来配置项目中路由规则index.js日后再这个位置修改我们自己路由规则
  • app.vue：根组件
  • main.js： 入口JS
• static：用来存放静态资源注意现在开发习惯已经不再使用这个目录 被src / assets代替
• .babelrc和.editorconfig 和.postcssrc.js开头文件 都是隐藏文件在打包时将es6语法转为es5
• index.html ：当前项目唯一页面，单页面应用中唯一入口打包之后就是一张index. html
• package.json ：用来管理当前项目中使用那些前端依赖类似于pom.xml

2 图书管理系统（优化升级版）

待补入!!!

3 Vue-X

3.1 介绍

Vue-x是一个专门为vue.js应用程序开发的状态管理模式，官方称为状态管理器

什么是状态管理器？

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

说白了就是全局变量/函数！！！

3.2 安装和配置

第一步：安装vue-x，我用的是vue2.7.4版本，需要指定vue-x版本，否则报错！！！

npm install --save vuex@3.6.2

---

第二步：配置vue-x，在src下创建store,并新建index.js,并在main.js进行引入

store/index.js

import Vue from "vue";
import Vuex from 'vuex'

// 配置内置vue注册状态管理
Vue.use(Vuex)
export default new Vuex.Store({

});

main.js

import store from "./store";// 引入store

目录结构如下：

---

3.3 简单使用

3.3.1 state

定义：用来定义共享数据

使用：{{this.$store.state.count}}

简单实例：

store/index.js

import Vue from "vue";
import Vuex from 'vuex';

// 配置内置vue注册状态管理
Vue.use(Vuex)

export default new Vuex.Store({
  // 定义组件共享数据
  state:{
    count:0
  },
});

User.vue

<h1>{{msg}}---{{$store.state.count}}</h1>

3.3.2 mutations

定义：对共享数据修改的方法，在这里定义方法，都有一个默认参数state

使用：this.$store.commit('方法名','参数/对象')

简单实例：

Dept.vue

<template>
  <div>
    <h1>{{msg}}---{{this.$store.state.count}}</h1>
    <button @click="add">添加</button>
    <button @click="decrease">减少</button>
  </div>
</template>

<script>
export default {
  name: "dept",
  data(){
    return{
      msg:'部门管理'
    }
  },
  methods:{
    add(){
      this.$store.commit('add',10)
    },
    decrease(){
      this.$store.commit('decrease')
    }
  }
}
</script>

store/index.js

mutations:{
  add(state,pay){
    state.count = state.count + pay
  },
  decrease(state){
    state.count--
  }

效果演示：

3.3.3 getter

定义：对共享数据进行计算方法,相当于组建中的computed，一样都是属性，不需要()，同样的好处都是只计算一次，缓存结果

使用：this.$store.getters.computedSqrt

简单实例：

<h1>{{this.$store.state.count}}--{{this.$store.getters.computedSqrt}}</h1>

store/index.js

 getters:{
   computedSqrt(state){
     return state.count*state.count
   }

效果演示：