前言
项目的地址
搭建前的准备
知识点
- 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 启动项目。成功后,如图所示,如果是这个界面恭喜您成功了
第三步
-
配置路由
-
在vue-router官网使用npm /yarn / pnpm下载相关的依赖 这面有一点 官方的版本是4 如果我们把@后面的去下拉直接下载就是最新的 这边我们使用 官方的写方法 一般官方的是最稳定的
-
下好之后可以在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
总结
这套框架可以说是是用了最新的技术搭建,启动快,打包体积小,更轻量级。