顺德手机网站设计咨询,做网站平台公司,wordpress添加海报分享功能,php电子商务网站开发实例利用 pnpm 创建 vue3 项目 pnpm 包管理器 - 创建项目 Eslint 配置代码风格(Eslint用于规范纠错#xff0c;prettier用于美观#xff09; 在 设置 中配置保存时自动修复 提交前做代码检查 husky是一个 git hooks工具#xff08;git的钩子工具#xff0c;可以在特定实际执行特… 利用 pnpm 创建 vue3 项目 pnpm 包管理器 - 创建项目 Eslint 配置代码风格(Eslint用于规范纠错prettier用于美观 在 设置 中配置保存时自动修复 提交前做代码检查 husky是一个 git hooks工具git的钩子工具可以在特定实际执行特定的命令 打开 bash终端 当前项目没有使用 git进行管理用 git init 进行初始化 然后进行 husky 工具配置将会在当前目录中新建 一个 .husky 文件夹其中一个叫 pre-commit这就是真正在代码提交之前要做的事情。 提交代码之前可以让其执行 package.json中配置的全局命令 lint 该命令基于 eslint 校验 vue文件js文件等一系列文件, 手动调用校验 因为 eslint 是全面检查。耗时所以解决办法 暂存区 eslint 校验 安装 lint-staged 包 package.json中配置 lint-staged命令如果要执行该命令还要配置 scripts也就是lint-staged一旦触发该命令就去执行 lint-staged 将内容存放到暂存区并提交 如果代码中有错不能提交可以先在eslint.cjs中设置关闭不用管报错先提交 目录调整 将assetscomponentsstores,views文件夹里的文件删除掉 新增 api 请求文件夹utils工具文件夹 拷贝全局样式安装预处理器进行支持 将图片素材拷贝到 assets 中 在main.js中导入验证是否生效但是该scss文件在当前项目不支持还要安装预处理器 安装 sass预处理器然后再 pnpm dev 启动 vue-router4路由代码解析 与 vue2 不同vue2直接导出 VueRouter ,但是vue3是按需导入 createRouter 创建路由(创建实例的方法)history有两种模式 createWebHistory 和 createWebHashHistory 参数是基础路径base在 vite.config.js中配置在vue3中创建实例用 createApp创建 路由用 createRouter)如果要在 Vue3 compositionAPI中获取路由对象要通过路由中导入 useRoute获取路由参数useRouter获取路由对象 按需引入 Element Plus组件库因为是 pc 端所以该组件更合适 先安装 element-plus 因为按需导入需要两个插件所以安装两个插件 配置 vite.config.js 配置完成再启动。 可以在项目任意位置使用组件 element-plus组件中还能直接使用其他组件而不用引入 pinia多组件共享数据的需求通过pinia构建仓库和持久化 在 main.js中引入 createPinia函数createPinia会创建一个pinia实例然后添加到 vue应用中 在 store文件夹中新建 user.js 模块defineStore新建 仓库setToken存储内容removeToken移除内容token中显示内容 在组件上使用 持久化处理 首先安装插件 将插件应用到 pinia实例中然后 pinia 实例应用到 vue中 如果希望 某个仓库进行持久化那么就为其添加第三个参数 persist 关于状态管理 pinia import {createPinia} from pinia 从 pinia库中导入 createPinia 方法(在 main.js中)app.use(createPinia()) 在 vue应用中注册 Pinia 实例 。app.use()这是 Vue 3 中的全局插件注册方法。(在 main.js中)承上启下在使用 pinia 时必须先将pinia实例注册到 vue 应用中然后才能在仓库 store文件中创建和使用 pinia 的 storeimport {defineStore} from pinia 从 pinia库中导入 defineStore函数在store文件夹下的user.js模块export const useUserStore defineStore( export 是将 useUserStore这个store进行导出使它能够被外部使用。return 是将 store 中的具体数据和方法tokensetToken,removeToken暴露出去让外部能操作这些数据。defineStore中有三个参数第一个是该仓库唯一标识第二个是个匿名函数箭头函数第三个是进行持久化的参数要想刷新已有的数据不变即进行持久化处理需要安装插件pinia-plugin-persistedstategit 终端, 在main.js中将其导出然后应用到 pinia 实例中而pinia实例用应用到 vue中。然后是 user.js仓库要进行持久化处理所以为其添加参数 persist:true Pinia仓库统一管理两个优化 pinia独立维护原来的 pinia 是堆砌在 main.js中的仓库统一导出原来的 导出要找到对应的 pinia中的 store,路径很可能找错 pinia独立维护需要将main.js中与 pinia相关的进行提取到 store文件夹下的 index.js文件中 选中剪切 main.js中与 pinia 有关的代码 放入到 stores的index.js中然后将 pinia 实例导入到 main.js中 仓库统一导出 stores文件夹下已经有了个 user.js仓库模块将来需要处理增加更多的模块处理更多业务那么会需要一个文件夹modules在stores文件夹下接纳其他仓库文件。在 app.vue中要使用 各个模块下面的数据方法必须要在app.vue中进行导入然后获取该各个对象再然后渲染。 而统一导出就在于 在 app.vue中进行导出各个模块时必须要写一长串的路径例如导出user模块导出路径是 import {useUserStore} from /stores/modules/user每要使用任何一个模块就必须要导入这么一长串所以解决办法是将所有模块在 stores文件夹下的 index.js文件中进行导入然后再进行导出也就是将index.js作为核心出口那么在app.vue中进行导入的话就直接从 stores文件夹下的 index.js中进行导出了。
