一文教你如何运行别人vue的项目 拿到别人开发的vue项目，如何运行呢？本文教大家如何运行别人项目1、前提条件，电脑已安装vue环境，没有的话请移步之环境安装Macbook安装vue开发环境，mac配置vue环境、脚手架Nodejs（npm）环境和vue环境安装教程2、删除package-lock.json文件package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。3、切换项目目录4、清除npm缓存npm clean cache -f5、重新安装依赖npm install6、运行项目npm run serve

yarn使用vite快速创建vue3项目及错误问题解决 一、为什么要用vite?当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。依赖 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS）。Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。二、安装vue3项目yarn create vite vue3-vite-element-plus-admin --template vue遇到问题：F:\study\vue>yarn create vite vue3-admin --template vueyarn create v1.22.22[1/4] Resolving packages...[2/4] Fetching packages...error create-vite@5.3.0: The engine "node" is incompatible with this module. Expected version "^18.0.0 || >=20.0.0". Got "16.20.2"error Found incompatible module.info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.info There appears to be trouble with your network connection. Retrying...info There appears to be trouble with your network connection. Retrying...info There appears to be trouble with your network connection. Retrying...info There appears to be trouble with your network connection. Retrying...可以看到是环境问题：兼容性注意，Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。解决问题：升级下nodejs环境，这里下载20的版本，下载链接如下：nodejs下载：https://nodejs.org/zh-cn/download/prebuilt-installer再次安装，可以到安装成功了三、安装node_modules模块yarn install四、启动项目yarn dev

关于MacBook电脑安装yarn报错errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn解决办法 yarn介绍：Yarn是facebook发布的一款取代npm的包管理工具yarn特点：速度超快：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。超级安全：在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。超级可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。然而在Mac下安装会遇到问题：报没权限安装问题，如下所示：npm install -g yarnnpm noticenpm notice New major version of npm available! 8.19.4 -> 10.8.1npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1npm notice Run npm install -g npm@10.8.1 to update!npm noticenpm ERR! code EACCESnpm ERR! syscall mkdirnpm ERR! path /usr/local/lib/node_modules/yarnnpm ERR! errno -13npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'] {npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'mkdir',npm ERR! path: '/usr/local/lib/node_modules/yarn'npm ERR! }npm ERR!npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR!npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:npm ERR! /Applications/MxSrvs/cache/nodejs/_logs/2024-07-04T13_28_15_750Z-debug-0.log出现这个问题，我们可以采用以下命令执行，也就是加速sudosudo npm install -g yarn

vue3+element plus使用vuex实现折叠导航菜单 vuex简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。一、安装vuexnpm install vuex -S二、创建vuex文件夹在src目录下创建store文件夹，并创建index.js文件，编写如下代码import { createStore } from "vuex"; export default createStore({ state: { isCollapse : true }, mutations: { updateIsCollapse(state, payload){ state.isCollapse = !state.isCollapse } } })三、引入vuex打开main.jsimport store from './store/index.js' const app = createApp(App) app.use(store)四、菜单页面使用1、菜单部分代码<template> <el-aside :width="$store.state.isCollapse ? '180px' : '64px'"> <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse="!$store.state.isCollapse" :collapse-transition = "false" > <el-sub-menu index="1"> <template #title> <el-icon><location /></el-icon> <span>文章</span> </template> <el-menu-item-group> <el-menu-item index="1-1">文章管理</el-menu-item> <el-menu-item index="1-2">文章分类</el-menu-item> </el-menu-item-group> <el-menu-item-group> <el-menu-item index="1-3">文章标签</el-menu-item> </el-menu-item-group> </el-sub-menu> </el-menu> </el-aside> </template>2、按钮页面<el-button :size="small" plain @click="handleCollapse"> <el-icon :size="size" :color="color"> <Menu /> </el-icon> </el-button> <script> import { defineComponent } from 'vue'; import { useStore } from 'vuex' export default defineComponent({ setup(){ let store = useStore() let handleCollapse = () =>{ // 调用vuex中的mutations store.commit('updateIsCollapse') } return { handleCollapse, }; } }) </script>五、效果展示折叠效果

Layui table表格数据接口返回更改 Layui数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为默认规定的数据格式layui.code{ "code": 0, "msg": "", "count": 1000, "data": [{}, {}] }很多时候，接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：{ "status": 0, "message": "", "total": 180, "data": { "item": [{}, {}] } }则可以借助 parseData 回调函数将其解析成 table 组件所规定的数据格式table.render({ elem: '#demp' ,url: '' ,parseData: function(res){ //res 即为原始返回的数据 return { "code": res.status, //解析接口状态 "msg": res.message, //解析提示文本 "count": res.total, //解析数据长度 "data": res.data.item //解析数据列表 }; } //,…… //其他参数 });还可以借助 response 参数来重新设定返回的数据格式，如：table.render({ elem: '#demp' ,url: '' ,response: { statusName: 'status' //规定数据状态的字段名称，默认：code ,statusCode: 200 //规定成功的状态码，默认：0 ,msgName: 'hint' //规定状态信息的字段名称，默认：msg ,countName: 'total' //规定数据总数的字段名称，默认：count ,dataName: 'rows' //规定数据列表的字段名称，默认：data } //,…… //其他参数 });