随笔分类 - vue
前端框架
摘要：vue-devtool是使用vue必不可少的一个工具，他可以让你在开发vue项目的时候，实时展示页面上的变量。 1、下载 到github下载：https://github.com/vuejs/devtools 可使用git或者直接下载zip包 安装依赖，最好使用yarn，因为该项目使用yarn 这一
阅读全文
摘要：封装成组件 <script setup > import Editor from '@tinymce/tinymce-vue' //引入tinymce开启本地模式 import 'tinymce/tinymce' //引入图标和主题等 import 'tinymce/themes/silver/th
阅读全文
摘要：第一种方法：通过使用key云端调用 安装@tinymce/tinymce-vue npm i @tinymce/tinymce-vue 去官网注册一个账号获取key，然后去https://www.tiny.cloud/get-tiny/language-packages/下载语言包，放在目录下的pu
阅读全文
摘要：1、问题： 在vue2中axios通常是经过封装的后挂载使用的，来处理token及报错处理，比如 //main.js import ajax from '@/axios.js' Vue.prototype.ajax = ajax 在项目中使用也很方便this.ajax就行了，那vue3中是如何简单、
阅读全文
摘要：前置条件：服务器、域名、备案、项目 首先进入宝塔点击左侧的网站，然后点击添加站点 填入域名，点击提交，宝塔会自动帮忙创建一个根目录 到该根目录，把打包后的vue项目放上去 点击左侧网站，点击在新创建的站点右侧的设置 点击网站目录，设置运行目录为/dist，然后点击保存 再点击左侧列表的配置文件去设置
阅读全文
摘要：1、问题： element-plus中icon跟element中的icon完全不同，使用也很多变化，最重要的一点就是按需动态加载了，主要用到unplugin-icons这个库 根据按需加载icon的使用方法，是无法满足动态加载的 <template> <IEpPlus /> </template>
阅读全文
摘要：Iconify是什么？ Iconify是一个基于svg跟图标相关的开源项目，收录了一百多个开源图标合集，跟阿里的iconfont类似。 如果说阿里的iconfont像逛超市一样，挑好了（收藏成一个项目）去前台买单（下载），然后回家收拾（解压），吃掉（使用）。 那么Iconify的就像点外卖（选择图标
阅读全文
摘要：这里使用vite-plugin-svg-icons插件 yarn add vite-plugin-svg-icons -D # or npm i vite-plugin-svg-icons -D # or pnpm install vite-plugin-svg-icons -D 在vite.con
阅读全文
摘要：1、问题：在项目中引用通常是相对路径，在复用代码模块的时候，没注意就很容易路径出错 2、方案：通过vite设置resolve.alias来配置文件系统路径，在文件中就可以使用配置的路径，移动的时候就不会出现路径出错的问题 3、解决：在vite.config.js里配置resolve.alias im
阅读全文
摘要：包管理器安装 yarn add pinia # 或者使用 npm npm install pinia 在目录下创建store文件夹，并创建index.js文件 import { createPinia } from 'pinia' const pinia = createPinia() export
阅读全文
摘要：1、问题：vue3使用setup的api，每次都要引入就很麻烦，有没有自动引入的方法，这样就不用那么麻烦 2、方案：通过使用unplugin-auto-import/vite插件来自动引入vue的api 3、实操： 在vite.config.js中使用，在传入AutoImport的对象里添加impo
阅读全文
摘要：1、问题：ts的vue3中require动态引入图片会报错 2、原因：因为typescript不支持require，所以会报错，在typescript中引入需要import，还要注意这引入是异步的，需要async、await转同步 /* 加载图片 */ let img = new Image() l
阅读全文
摘要：1、需求：console.log一般都是在开发环境下使用的，在生产环境下需要去除 2、思路：vite构建时默认使用Esbuild，打包速度是其他打包工具的十几倍，但是缺点也很明显，不具备操作AST的能力，vite也补充了terser来解决这个问题，通过terser的api可以轻松去除console.
阅读全文
摘要：需求：开发过程中往往不是一个人开发，都是团队开发，每个人的风格都不一样，写的代码就很难维护，这就需要工程化ESLint+Prettier 来统一风格，方便维护 安装ESLint npm i eslint -D eslint安装成功后初始化 npx eslint --init 按照提示进行配置 然后在
阅读全文
摘要：1、问题：从vue2的obj写法转向vue3的setup写法，要如何在某个组件中监听路由变化呢 2、解决： <script setup lang='ts'>import {useRouter} from 'vue-router'import {watch} from 'vue' //监听路由变化，判
阅读全文
摘要：1、问题：写vue的SFC时，新建的页面往往要去ctrl+c，ctrl+v去复制，复制来的往往又要修改，手打又慢没效率 2、思路：通过vsCode的代码片段来自定义自己需要的代码，方便快捷 3、实操： 3-1、点击左上角的文件=>首选项=>配置用户代码片段 3-2、会弹出一个选项，选择新建全局代码片
阅读全文
摘要：1、问题：当element表单里面只有一个input的时候回车会刷新页面 2、原因：当el-form表单里面只有一个input时，回车会触发表单提交的默认事件 3、解决：阻止表单提交的默认事件 在表单处加上@submit.native.prevent <el-form class="main_hea
阅读全文
摘要：1、介绍：vue3+ts项目引入ElementPlus的方式有几种，一个是完整引入，一个是官方推荐的自动导入，最后一个是手动导入 2、实操：这里展示前面两种，最后的手动导入不是很推荐，这里就不介绍了 2-1、完整引入，官方案例：element-plus-vite-starter 引入ElementP
阅读全文
摘要：命令 npm install sass node-sass sass-loader -D 直接就可以在.vue里用了 <style lang="scss" scoped ></style>
阅读全文
摘要：官方文档：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project # npm 6.x npm create vite@latest my-vue-app --template vue # npm 7+, extra doubl
阅读全文
