vite+v3+ts+pinia 项目

LZQ <=小氣鬼=>

已于 2022-10-11 11:39:40 修改

阅读量729

点赞数

分类专栏： vite pinia element-plus 文章标签： javascript vue.js 前端

于 2022-10-11 11:39:12 首次发布

本文链接：https://blog.csdn.net/id_EquinoxFlower/article/details/127260594

版权

vite 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

pinia

2 篇文章 0 订阅

订阅专栏

element-plus

2 篇文章 0 订阅

订阅专栏

前言搭建前的准备

知识点

vite:官网
掌握使用vite快速搭建一个前端的框架
掌握pinia 的基本用法

第一步

创建一个文件夹，用cmd打开黑窗口，打开vite中文网站，点击vue3中文文档，点击开始找到如图内如

如果是yarn 就是用这个：yarn create vite
如果是 npm 就是用这个 npm create vite@latest
咱们这里使用的是 pnpm 就是用第三个

直接复制的黑窗口就可以/

第二步

复制粘贴到黑窗口后按下回车会出现红框里的字样，意思是你是用默认的项目名称还是其他的名称, 如果用默认的名称就直接回车,如果不用直接在后面写上自己的项目名称,我在这就直接使用默认的的名称
回车后显示六个选项第二，第三，第二个是本次要建的项目，第三个是react 项目，这里我们选第二即可
接下来选择typescript这个选项
在黑窗口输入 code . 回车可以从文件夹中直接打开 vscode
使用cd vite-project 这个‘vite-project’根据你自子定义的一样就可以，使用 npm / yarn / pnpm run dev 启动项目。成功后，如图所示，如果是这个界面恭喜您成功了

第三步

配置路由
1. 在vue-router官网使用npm /yarn / pnpm下载相关的依赖这面有一点官方的版本是4 如果我们把@后面的去下拉直接下载就是最新的这边我们使用官方的写方法一般官方的是最稳定的
2. 下好之后可以在package.json 文件下看到如红框所示，说明已经安装成功了。

第四步

在建立router文件夹 src/router

分别建立 src/router/index.ts 路由的主要部分

可以使用import{home} from './home' 引入这种也可以把下面注释打开直接在这个页面使用
但是有一个不好的就是{ // path: '/home', // name: 'home', // component: Home // },写了很多这个样的代码看起来会很臃肿

import{home} from './home'
//！home 这个必须是一个数组
import { createRouter, createWebHistory } from "vue-router"
const routes =home
//[
//    {
//        path: '/home',
//        name: 'home',
//        component: Home
//    },
//    {
//        path: '/about',
//        name: 'about',
//        component: () => import('../view/about.vue')
//   }
//]
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

src/router/home.ts存放页面的路径

将所有页面的路由写这个地方用routerList 抛出去


export const routerList = [
  {
    path: '/',
    name: '',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../../vitew/home/index.vue')
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../../vitew/about/index.vue')
  }

]

第五步

在min.ts中引入router ，并且声名一个app来进行挂载

import { createApp } from 'vue'
import './style.css' //这是全局的公共样式
import router from './router/index' // 这个是自己配的路由
import App from './App.vue'
const app = createApp(App)//这个是实例出的app 用来挂载

app.use(router).mount('#app') // 全局的挂载

第六步

element-plus组件库的引用

element-lpus管网 点击指南这是一些对element-plus的一些介绍
element-plus 自己下去看看这就不多说了
点击安装相应的依赖，下载依赖的方式这里边我还是使用 pnpm 来下载

特殊说明 vite 在是用element-plus 的时候比起vue3 vue2直接建立项目使用方便的多
接下来在黑窗口先下载一下依赖可以在package.json文件看到element-plus 的版本号
在快速开始里有全局引入跟按需引入

全局引入代码如下

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需引入

因为使用的是vite搭建的框架就直接使用 element-plue提供的自动引入

首先安装依赖

npm install -D unplugin-vue-components unplugin-auto-import

在 vite.config.ts 文件中配置如下代码

// element plus按需导入
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Icons from 'unplugin-icons/vite'
import IcosResolver from 'unplugin-icons/resolver'

 plugins: [
 ...
   // element plus按需导入
  AutoImport({
    resolvers: [
      //自动导入element plus相关函数
      ElementPlusResolver(),
      IcosResolver({
        prefix: 'Icon'
      })
    ]
  }),
  Components({
    resolvers: [
      //自动导入element plus组件
      ElementPlusResolver(),
      IcosResolver({
        enabledCollections: ['ep']
      })
    ]
  }),
  Icons({
    autoInstall: true
  })

 ]

以上完成之后去element-puls 组件中复制一个组件看看效果，就说明成功了

第七步

使用最近新出的pinia 的状态管理器，pinia官网点击进去后是对pinia 的介绍

首先还是下载依赖 pnpm install pinia

下载完成之后在min.ts 中进行挂载文件内容如下

<span style="background-color:#f8f8f8">import './style.css'
import App from './App.vue'
import { createApp } from 'vue'
import router from './router/index'
// import 'element-plus/dist/index.css'
// import * as ElIcons from '@element-plus/icons-vue' //element plus图标
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)

// // 全局注册element-plus图标
// for (const name in ElIcons) {
//   app.component(name, (ElIcons as any)[name]);
// }


app.use(router).use(pinia).mount('#app')</span>

载src 的目录下 src/store/index.ts

src/store/index.ts 的文件配置如下的内容

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
  state: () => {
    return {
      why: 'Hello World'
    }
  },
  getters: {},
  actions: {}
})

使用的方法

<template>
  <div>
    <div v-on:click="divClick">{{ store.why }}</div>
  </div>
</template>
<script setup lang="ts">
import { mainStore } from "../../store/index";
const store = mainStore();
const divClick = () => {};
</script>

<style scoped></style>

使用es6 的方法

当store中的多个参数需要被使用到的时候，为了更简洁的使用这些变量，我们通常采用结构的方式一次性获取所有的变量名
ES6传统方式解构(能获取到值，但是不具有响应性)

<template>
  <div v-on:click="divClick">
      <h2>ES 传统方式解构 store , count不会响应式更新</h2>
      <h3>Count now is :{{ Why }}</h3>
    </div>
  </div>
</template>
<script>
import { mainStore } from "../../store/index";
import { storeToRefs } from "pinia";
const store = mainStore();
const { Why } = store;
const divClick = () => {};
</script>

8.可以使用Pinia解构方法：storeToRefs

<template>
 <div v-on:click="divClick">
      <h2>{{ store.why }}</h2>
      <h3>Count now is : {{ store.Why }}</h3>
      <h2>ES 传统方式解构 store , count不会响应式更新</h2>
      <h3>Count now is :{{ Why }}</h3>
    </div>
  </div>
</template>
<script setup lang="ts">
    import { mainStore } from "../../store/index";
    import { storeToRefs } from "pinia";
    const store = mainStore();
    const { Why } = storeToRefs(store);
    const divClick = () => {};
</script>

9.Pinia修改数据状态

简单数据修改
简单数据直接通过在方法中操作 store.属性名 来修改

多条数据修改

通过基础数据修改方式去修改多条数据也是可行的，但是在 pinia 官网中，已经明确表示$patch 的方式是经过优化的，会加快修改速度，对性能有很大好处，所以在进行多条数据修改的时候，更推荐使用 $patch

$patch 方法可以接受两个类型的参数，函数和对象

$patch + 对象
$patch + 函数： 通过函数方式去使用的时候，函数接受一个 state 的参数，state 就是 store 仓库中的 state

通过action修改

Store.actions中添加 changeState 方法

组件方法调用 store.方法名

Pinia中的Getters

Pinia 中的 getter 和 Vue 中的计算属性几乎一样，在获取 State值之前做一些逻辑处理

getter 中的值有缓存特性，如果值没有改变，多次使用也只会调用一次
- 添加 getter方法

组件内多次调用

getter 中不仅可以传递 state 直接改变数据状态，还可以使用 this 来改变数据

store之间的相互调用

在 Pinia 中，可以在一个 store 中 import 另外一个 store ，然后通过调用引入 store 方法的形式，获取引入 store 的状态

新建 store
在原 store 中引入 allanStore，并获取 moveList

组件中使用 mainStore.getAllanStoreList，
到这一步就完成了还少了一个axios 的网络请求后期的话给大家补上

对pinia 的总结

总得来说，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2，Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation，只保留了 state, getter和action。Pinia拥有更简洁的语法，扁平化的代码编排，符合Vue3 的 Composition api

总结

这套框架可以说是是用了最新的技术搭建，启动快，打包体积小，更轻量级。

LZQ <=小氣鬼=>

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vite+v3+ts+pinia 项目

使用npm /yarn / pnpm下载相关的依赖这面有一点官方的版本是4 如果我们把@后面的去下拉直接下载就是最新的这边我们使用官方的写方法一般官方的是最稳定的。当store中的多个参数需要被使用到的时候，为了更简洁的使用这些变量，我们通常采用结构的方式一次性获取所有的变量名。通过函数方式去使用的时候，函数接受一个 state 的参数，state 就是 store 仓库中的 state。的方式是经过优化的，会加快修改速度，对性能有很大好处，所以在进行多条数据修改的时候，更推荐使用。
复制链接

扫一扫