首页 > 其他分享> > Vue总结篇下（看完你就学会整个Vue）

Vue总结篇下（看完你就学会整个Vue）

2022-02-25 16:02:48 作者：互联网

1.项目系列

1.vue-cli脚手架

vue脚手架，基于webpack构建的，自动创建工程化的vue应用程序开发环境

1.1安装vue-cli

推荐使用cnpm 这是淘宝镜像源
npm install -g cnpm -registry=https://registry.npm.taobao.org 

cnpm i -g @vue/cli


//检查有无安装成功
vue --version //版本出现代表安装成功

1.2 创建项目

找到一个合适的目录(不要以在vue.JS目录中)打开cmd 

vue create 项目名  // 项目名 不能出现大写字母

1.3运行项目

cmd进入项目  ：npm run serve 运行脚本启动  

要到文件目录demo下启动 不能直接cmd

1.4项目目录

public // 静态资源目录 开发环境服务器 监听目录
  index.html
  favicon.ico
src // 源码目录
  api//http 请求目录
  utils（工具存放目录）  
  assets // 存储 静态资源目录
  components // 存储公共组件
  router // 路由配置
  store // vuex 存储目录
  views // 存储路由组件目录
  App.vue // 根组件
  main.js // 入口文件
.browserslistrc  // postcss 定义浏览器兼容
.eslintrc.js // eslint配置文件
babel.config.js// babel的配置文件

1.5webpack中的入口文件

webpack 一切在入口文件src/main.js中引入（包括css 字体图标 js文件 图片）
最终main.js会自动在 页面上的index.html中引入
最终记住：
  1 在main.js中引入资源 或者 写的代码 就相当于 在html中的写的或者引入

  2 main.js引入的资源或者代码 会影响 全部组件（影响全局）

1.6 单文件组件

vue中 组件 参数对象 应该是一个js
定义 当前组件的template结构 自动编译到 组件参数对象template属性上

<template>
  <div>
    <h2>home页</h2>
  </div>
</template>
// 组件对象 在 script 这个标签中定义
<script>
// 不需要定义template属性了 
export default {
  create(){},//初始化调用
  data(){},//和model绑定的数据
  methods: {},//方法
  watch:{},//监听数据
  computed: {}//计算属性
  components{}//子组件注册大厅
} 
</script>
// 定义当前组件的template 标签的样式
<style lang="scss" scoped>

 lang定义使用css的预处理器 和安装时 安装预处理器保持一致
  scoped style写的样式 只针对当前组件有效，不影响其他组件
  需求：
    加scoped情况下 修改 子组件的中样式
  vue提供了一个深度选择器 /deep/，可以穿透 scoped限制
  使用时只需要加在普通选择器之前即可
  /deep/ h2{
    color:red;
  }

2.自定义项目配置

项目默认配置 配置服务器端口 8080 
eslint保存代码 就检查代码格式
+ 在项目根目录下 创建 vue.config.js
+ 代码中通过node模块化导出对象 做配置 （webpack是基于）
```js
  module.exports = {
     // 项目服务器配置
    devServer: {
      port: 9527,//自定义地址
      open: true,
      proxy: {}//反向代理
    },
    // 管理 保存代码 eslint检查代码格式
    lintOnSave: false
  }

```
注意：必须根目录 如果改了配置 一定要重启项目

+ 需求 管理eslint情况下 需要能够检查代码格式 但是不报错
vscode中安装 eslint插件
插件：自动读取 当前项目的eslint配置 帮你检查代码
前提：项目一定要在vscode中作为根目录打开

2.1自定义路径别名

const path = require('path');

module.exports = { 
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.join('src'))
      .set('_components', path.join(__dirname, 'src/components'))
      .set('_views', path.join(__dirname, 'src/views'))
  }
}

3.分析 App.vue

App.vue中写了 路由组件的出口
 <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>

从入口函数开始
import App  from './App'

new Vue({
  router,
  store,
  render: h => h(App)        
}).$mount('#app')
*render将 App template结构 生成真实dom，绑定到 vm 挂载的dom

4.基于脚手架从0 开始开发vue

1.找到App.vue

// 删除代码 只保存 router-view
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

2.删除 views 和 components里面组件，并根据业务定义我们的路由组件和公共组件

3.找到路由 router/index.js 将 routes 清0 根据我们业务定义路由

4.开发vue 装vscode插件 Vue VSCode Snippets(提供vue代码块)vuter(vscode高亮显示 .vue文件代码)

2.vue路由懒加载

路由预加载，
在模块化环境中，定义路由之前，先将路由参数对象提前import引入
这种情况下：
  当我们 打开首页 显示Home组件时，其他组件的js代码也会引入，并注册为路由组件
```js
import Home from './Home'
import News from './News'

const routes = [
  {
    path:'/home,
    component: Home
  },
  {
    path:'/news,
    component: News
  }
]
```
+ 解决首页打开速度慢问题 就是路由懒加载
原理：当我们打开首页时，只会引入 首页组件的js，其他不引入
```js
 {
    path:'/news,
    component: ()=>import('@/views/News')
  }

3.vuex

是 vue一个集中式状态管理的插件。使用了集中式管理状态，保证状态是以一种可预测方式进行改变。

是 vue一个 集中式状态 管理 的插件。使用了集中式管理状态，保证状态是以一种可预测方式进行改变。
什么时候用：
  1 vuex用来管理 多个组件公共的状态（数据）
  2 小型项目，不建议使用，中大型项目使用
  state：驱动应用的数据源
  view：dom
  actions：方法

创建仓库src/目录下创建 store 
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)

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

  const store = new Vuex.Store({
    // 定义仓库的状态
    state: {
      num: 10
    },
    // 定义修改状态的方法
    mutations: {
      add_num (state, n) {
        state += n
      },
      reduce_num (state, n) {
        state -= n
      }
    }
  })
  export default store

  // 在main.js中引入 并在实例挂载
  import store from './store'
  new Vue({
    store
  })

// 获取state
 this.$store.state.状态名
 // 修改 state 提交一个mutation
 this.$store.commit('mutation名字'[,参数])

1.vuex助手函数

 mapState 在组件中 便捷 获取 store中的某些某个state

import { mapState } from 'vuex'

mapState(['num', 'num2'])
// 返回的结果是
{
  num(){
    return store.state.num
  },
  num2(){
    return store.state.num2
  }
}

+ mapMutations 在组件中 快捷 提交mutation

  import { mapMutations } from 'vuex'

  mapMutations(['add_num', 'reduce_num'])
  // 返回
  {
    add_num (param) {
      store.commit('add_num', param)
    },
    reduce_num (param) {
      store.commit('reduce_num', param)
    }
  }

1.1getters

相当于 仓库 store中的计算属性
场景：
  有时候 仓库中的某个state 在某个组件中使用，需要 进行 一个数据 变形
  距离
 const store = new Vuex.Store({
   state: {
     num: 10
   }
 })
 // state中的这个num 在 News组件中使用 需要时原来的两倍
// 可以在 News组件中新增一个计算属性 使用这个计算属性
const News = {
  computed: {
    doubleNum () {
      return this.$store.state.num * 2
    }
  }
}
// vuex的getters就相当于 store中的计算属性
const store = new Vuex.Store({
   state: {
     num: 10
   },
   getters: {
     doubleNum: state => {
       return state.num * 2
     }
   }
 })
 // 在组件中使用 getter
 this.$store.getters.doubleNum
 // 通过助手函数 mapGetters
 import { mapGetters } from 'vuex'
 const News = {
   computed: {
     ...mapGetters(['doubleNum'])
     // 新增一个组件的同名的计算属性
   }
 }

1.2modules

可以将 state 进行分层，可以将 相同类型的state 放到 一个模块中单独管理

解决所有数据 都在 同一个对象中管理 造成 混乱问题
// 定义items模块
const items = {
  state: {
    num: 10
  },
  mutations: {
    add_num (state, n) {
      state.num += n
    }
  },
  actions: {}
}
// 定义orders模块
const orders = {
  state: {
    num: 20
  },
  mutations: {
    add_num (state, n) {
      state.num += n
    }
  },
  actions: {}
}

// 仓库中 模块化
const store = new Vuex.Store({
  modules: {
    items: items,
    orders: orders
  }
})

// 组件中获取state
this.$store.state.模块名.状态名
this.$store.state.item.num

2.vuex中的action

当我们 vuex仓库中存储的公共状态 初始值需要请求 一个接口才能拿到初始值，
这个接口函数的调用也应该在vuex中体现（请求接口 是异步 mutations不能写异步）
action
  不直接修改状态，提交mutation让mutation来修改
  action中可以包含任意的异步操作
可在将某个状态 初始状态获取 请求函数 在action中调用，拿到结果后，action提交一个mutation赋值

const store = new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    init_items (state, items) {
      state.items = items
    }
  },
  actions: {
    fetch_items (context, params) {
      /* 
      context是 store对象 有state commit dispatch
      */
      axios.get(url,{params}).then(res => {
        if (res.data.code === 200) {
          context.commit('init_items', res.data.data)
        }
      })
    }
  }
})
// 组件中提交action
this.$store.dispatch('acion名字'[,参数])

3.模块化后提交mutation和action

模块化后 只是将state 进行模块化，mutation和 action没有，如果组件中提交一个mutation，多个模块有同名mutation，那么他们都会触发


解决问题？
  vuex模块化 模块的命名空间

const items = {
  namespaced: true,
  state: {
    num: 10
  },
  mutations: {
    add_num (state, n) {
      state.num += n
    }
  },
  actions: {}
}
const user = {
  namespaced: true,
  state: {
    num: 20
  },
  mutations: {
    add_num (state, n) {
      state.num += n
    }
  },
  actions: {}
}
// 原理当加了命名空间后 模块下的mutation和action名字会自动加上 模块名作为前缀
商品模块中add_num这个mutation编译后的名字会自动变成 'item/addNum'
user模块中add_num这个mutation编译后的名字会自动变成 'user/addNum'

// 在组件中再提交action或者模块
this.$store.commit('模块名/mutation名字'[,参数])

// 助手函数 提交mutation或者 action
// 方式1
{
  methods: {
    ...mapMutations(['item/add_num']),
    ...mapActions(['item/add_num_async'])
  }
}
// 调用时
this['item/add_num'](参数)
// 方式2
{
  methods: {
    ...mapMutations('模块名',['这个模块下的mutation名']),
    ...mapMutations('user',['add_num']),
    ...mapActions(['items','add_num_async'])
  }
}
// 调用th
this.add_num(参数)
this.add_num_async(参数)
// action同mutation

4.vue中的常用UI组件库

很多大厂开源了很多封装好的网页中常用组件直接使用

pc端（开发后台管理）

element-ui 饿了么

antd-vue 蚂蚁金服（支付宝）

iview（个人）

移动端（m站）

mint-ui 饿了么（停止维护）

vant-ui 有赞 https://vant-contrib.gitee.io/vant/#/zh-CN/

cube-ui 滴滴（组件少）

nut-ui

标签：总结,Vue,vue,学会,js,state,num,组件,store
来源： https://blog.csdn.net/Sakura1921/article/details/123131983

Vue总结篇下 （看完你就学会整个Vue）