mustache模板引擎
mustache 基本语法mustache是胡子的意思，他的标记{{}}非常像胡子 所以就叫这个名字，这个语法也被vue沿用，但是他不能和vue一样在里边写表达式。下边使用的都是简化版的mustache也就是最后写出来的样子。原版直达链接->https://github.com/janl/mustache.js 渲染变量123456const data = { name:'Joker', age:18}const templateStr = `我叫{{name}}，今年{{age}}岁`;document.body.innerHTML = Mustache.render(templateStr,data); 渲染简单数组1234567891011const data = { user:['Joker','Pink','xyooio']& ...
Pinia学习记录
安装项目是vite搭建的vue3项目。 1npm install pinia 修改main.ts文件 1234567import { createApp } from 'vue';import { createPinia } from 'pinia';import App from "./App.vue";const pinia = createPinia()const app = createApp(App);app.use(pinia);app.mount('#app') 使用创建store使用defineStore来创建一个Store，他需要两个参数 store的名字，这个名字会被用作id，所以他需要时独一无二的。 第二个参数可以接受一个option对象或者setup函数 option对象属性 state 数据 getters 计算属性 actions 方法 他相当于vuex的mutations和actions结合 可以进行同步和异步的操作 setup函数 ...
js复制粘贴的操作
Clipboard APIClipboard API提供了响应剪贴板的功能（复制、粘贴、剪贴）和操作的功能，必须使用Permissions API获取权限后才能访问剪贴板，没有授权则是不允许读取剪贴板内容的。 Permissions API这个api提供了权限的一些操作，但是浏览器只支持查询Permissions.query()和撤销的支持，现在撤销也被废弃，所以只能能使用的方法只有查询权限的方法使用navigator.permissions来使用Permissions API 1234const checkAuth = async ()=>{ const res = await navigator.permissions.query({name: 'clipboard-read'}); return res.state === 'granted';} 使用上边的代码可以查看是不是拥有剪贴板的权限navigator.permissions.query会返回一个对象其中包含state属性，来 ...
vue目录结构生成router
在开发vue项目时候，需要手动创建路由指向到目录，如果是小项目，路由不多的情况手动配置没有问题，如果遇到中大项目呢，增加一个路由，未免会显得格外枯燥，后期路由的维护成本也会很高，那么可以自动生成路由就很有必要了。 搭建vue项目vite+vue3+ts创建一个vue3项目 约定为了避免将一个不必要的文件夹配置为路由，我们约定目录下拥有page.ts文件为路由，且入口文件均为index.vuepage.ts文件会暴露出一个对象，这个对象会添加设置为路由的meta属性根据上边的约定一个路由最少会有如图文件 123456// page.tsimport {RouteMeta} from "vue-router";const meta:RouteMeta = { name:"test",}export default meta; 1234567891011<!--index.vue--><template> <div class="test">te ...
ts+vue封装axios
安装axios1npm install axios 配置环境变量12# .env.developmentVITE_BASE_URL=/api 12# .env.productionVITE_BASE_URL=https://xxxx.xxx 修改vite配置如果不跨域自动忽略这一步在vite.config.ts文件中添加如下代码 123456789server:{ proxy:{ '/api':{ target: 'https://xxxx.xxx',// 后端接口地址 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } }} 封装axios创建文件/src/server/index.ts，这个文件主要是用来封装axios的配置，请求拦截、响应拦截、错误处理、 ...
vite+vue3+ts创建一个vue3项目
文章所用技术栈：vite + vue3 + typescript + sass + vue-router + pinia + axios + ant Design Vue 创建vue3项目1npm create vite@latest 输入项目名称 选择框架，按上下键选择vue 选择ts 执行提示的三条命令 ok 框架已经搭建好了 安装sass使用的vite，它对sass、less、scss等文件都内置支持，所以我们只需要安装预处理器依赖就行 安装 1npm install scss -D 安装vue-router1npm install vue-router 创建/src/router/index.ts并编写如下内容 不要忘记创建路由对应文件 12345678910111213141516171819import { createRouter,createWebHashHistory } from "vue-router";let routes= [ { path: &# ...
CSS-自定义属性（css变量）
自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。 变量的声明声明一个自定义属性，属性名需要以两个减号（–）开始，因为常用的$，@等定义变量的前缀已经被less、sass预处理使用了，为了保证两者不冲突，所以选择使用--，早期也有采用var-为前缀 123:root{ --primary-color: green; } 这样就定义了一个自定义属性--primary-color，他和color什么的属性没什么不同，只是没有特殊含义而已。任何值都是可以放进css变量当中例如颜色，尺寸，定位，角度，字符串，数字、甚至是一段js代码，也可以在任何地方定义 1234567891011121314151617181920:root{ --primary-color: green; --success-color: #87ceeb; --warning-color: rgb(255,165,0); --default-height: 20px; ...
CSS inline、block和inline-block的区别
类型 常见元素 inline <span> <a> <em> <i> <strong> … block <div> <ul> <li> <p> <h1> <table> … inline-block <img> <button> <input> … 行内元素 inline行内元素特点： 不会独占一行，相邻的行内元素会同行排列，直到一行排不下才会换行，宽度随元素的内容而变化； 设置宽高无效 设置外边距（margin）内边距（padding）仅左右有效 上下无效（设置背景颜色可以看到有效但是是不占空间的） 可以设置行高（line-height） 行内元素只能容纳文本或则其他行内元素1234567891011121314151617181920212223<!DOCTYPE html><html lang="en"><head> <m ...
CSS Flex布局
Flex布局是什么? Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。采用Flex布局的容器叫做Flex容器他所有的子元素被称为Flex项目 flex默认有两个轴，水平的叫做主轴main axis，垂直的是交叉轴cross axis单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size 1234567891011121314151617181920212223242526272829303132<style> .one{background: aqua;} .two{background: aquamarine;} .three{background: chartreuse;} .four{background: darkorange} .five{background: olivedrab; ...
CSS Grid网格布局
网格布局是什么 CSS网格布局是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行， 不像flexbox那样主要是一维系统。 你可以通过将CSS规则应用于父元素（网格容器） 和该元素的子元素（网格元素）来使用网格布局。 利用`grid`布局可以轻松做出下边的布局 Grid 的一些基础概念容器和项目采用网格布局的元素叫做容器，容器元素的子集叫项目 1234567891011<div class="wrapper"> <div class="item one">one</div> <div class="item two">two</div> <div class="item three">three</div> <div class="item four">four</div> <div class="ite ...