Vue3技术概览：脚手架、ElementPlus、状态管理库-优快云博客

本文链接：https://blog.youkuaiyun.com/ZH_brave/article/details/135200460

一、Vue3脚手架的安装

1. 通过cmd安装

npm install -g @vue/cli 或者 r yarn global add @vue/cli

2. 查看版本号
通过 vue-V 查看版本号

二、vue3项目创建

Element Plus

安装

npm install element-plus --save

引入

// 在man.ts中引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

Element Plus icon

安装

npm install @element-plus/icons-vue

使用1

<template>
	<div id="app">
        // 通过el-icon标签包裹使用
        <el-icon :size="size" :color="color">
            // 图标以标签形式展出
            <Document />
        </el-icon>
		// 直接使用（通过style设置样式）
        <Document  style="width:1rem; hegit:1rem; margin-left:10px;" />
    </div>
</template>
<script lang="ts" steap>
// 引入使用
import { Document } from '@element-plus/icons-vue'
</script>

使用2

<template>
  <div class="hello">
    <el-icon :size="size" :color="color">
      <Document />
    </el-icon>
    <Document style="width: 1rem; hegit: 1rem; margin-left: 10px" />
  </div>
</template>

<script>
import { Document } from '@element-plus/icons-vue'
export default {
  // 在components中注册
  components: { Document },
  data () {
  }
}
</script>

<style scoped lang="scss"></style>

Pinia

安装

// 手动创建文件夹， 手动引入
npm install pinia
// 安装之后 自动创建项目 自动引入 (需要把原先的store文件夹删除)
vue add vue-cli-plugin-pinia

使用

在main中引入pinia

// 引入pinia
import { createPinia } from 'pinia'
// 挂载pinia
createApp(App).use(createPinia()).mount('#app')

在store文件中配置pinia

// 引入pinia
import { defineStore } from 'pinia'
// 抛出
export const useCounterStore = defineStore('counter', {
  // state存放状态
  state: () => ({
    count: 0,
    name: 'jack',
    age: 18,
    nub: 12
  }),
  // 相当于 vue 中的 computed 计算属性
  getters: {
    // getters内函数的形参是state
    double: state => state.age * 2
  },
  // 相当于 vue 中的 methods 方法
  actions: {
    increment (a:number) {
      this.count = this.count + a
    }
  }
})

在组件中使用在组件中必须使用storeToRefs才能使pinia中的数据为响应式数据

//（storeToRefs读取声明式数据）
const { count, name, age, double } = storeToRefs(store)

当要同时修改多个state中的状态时可以使用$patch

// 多个状态修改时可以使用$patch来操作
store.$patch({ nub: 12, name: 'ZH',age:20 })   // 同时修改三个状态

解决pinia报错: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

报错原因：在 main.ts文件中，是先引入permission.ts文件然后再将pinia挂载到app上的，如果在permission.ts文件中全局调用了store，这样会导致pinia实例还没挂载，所以不能全局调用。

解决：

1.在store文件夹下面创建store.ts文件写入以下代码

import { createPinia } from 'pinia';
const pinia = createPinia();
// 局部抛出pinia
export default pinia;

2.在需要用到的组件中使用

<template>
  <div class="home">
    <h1>{{ counts }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
// 局部引入pinia
import pinia from '../store/store'
// 引入pinia抛出的方法参数写入pinia
const store = useCounterStore(pinia)
export default defineComponent({
  name: 'HomeView',
  setup() {
    let counts = ref(123)
    console.log(store);
    return {
      counts,
    }
  }
});
</script>

pinia数据持久化

原理: 通过本地存储来实现页面刷新保留数据不丢失

安装

npm i pinia-plugin-persist

配置

//在main中引入
import piniaPluginPersist from 'pinia-plugin-persist'
// 挂载
createApp(App).use(createPinia().use(piniaPluginPersist)).mount('#app')

在store中配置

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // 配置数据持久化
  persist: {
    enabled: true, // 开启数据持久化
    strategies: [
      {
        key: 'managestate', // 给一个要保存的名称
        storage: localStorage // sessionStorage / localStorage 存储方式
      }
    ]
  },

  state: () => ({
    count: 0,
    name: 'jack',
    age: 18,
    nub: 12
  }),
  // 相当于 vue 中的 computed 计算属性
  getters: {
    // getters内的形参是state
    double: state => state.age * 2
  },
  // 相当于 vue 中的 methods 方法
  actions: {
    increment (a:number) {
      this.count = this.count + a
    }
  }
})

Vuex

import { useStore } from 'vuex'
export default defineComponent({
  name: 'Home',
  setup () {
    const store = useStore()
    // 通过computed通过state请求vuex中的数据   （通过computed请求过来的数据是响应式的）
    const dataIn = computed(() => store.state.data)
    console.log(dataIn.value)
   	// 直接通过state请求vuex中的数据
    const datas = store.state.data
    console.log(datas)

    // 通过computed通过getters请求vuex中的数据   （通过computed请求过来的数据是响应式的）
    const dataIns = computed(() => store.getters.getData)
    console.log(dataIns.value)
    // 直接通过getters请求vuex中的数据
    const datass = store.getters.getData
    console.log(datass)·
    arr.push(obj)
    return {
      dataIn,
    }
  }
})

使用Echarts

安装

npm install echarts --save
npm install echarts vue-echarts

使用

<template>
  <div class="dataOverview">
    <ECharts style="height: 400px; width: 1200px;" :option="option" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 引入echarts
import 'echarts'
import ECharts from 'vue-echarts'
// 配置echarts数据
const option = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
})
</script>
<style scoped>
.dataOverview{
  width:100%;
  height:100%;
}
</style>

lodash

安装

npm i -s lodash

使用

lodash中文网站https://www.lodashjs.com/%C2%A0

<template>
	<el-button @click="goIn">登录</el-button>
</template>
<script setup>
 // 引入防抖
 import { debounce } from 'lodash'
 // 使用
 const goIn = debounce((e) => {
 console.log('测试防抖')
 }, 1000)
</script>