摘要:一、文件类型 TS 中有两种文件类型: ⏰ .ts文件(代码实现文件) 1. 既包含类型信息又可执行代码 2. 可以被编译为 .js 文件,然后执行代码 3. 通常用于编写程序代码的地方 ⏰ .d.ts文件(类型声明文件) 1. 只包含类型信息的类型声明文件 2. 不会生成 .js 文件,仅用于提供
阅读全文
摘要:一、声明文件的作用 在ts文件中引入js文件,由于js代码中没有类型约束,所以ts无法获得js代码的类型信息,进而会隐式推断js中类型为any,失去了ts代码类型推断和约束的作用,声明文件就是将一个js模块中所有对外暴露的变量、函数、类使用ts语法进行类型声明,进而让ts编译器在检测到该声明文件之后
阅读全文
摘要:上一篇介绍 namespace 多文件拆分的内容时,用到了一个三斜杠指令 /// <reference path="xxx" />。 这组指令有多个,其作用分别有所不同。 一、前言 三斜杠指令是包含一个XML单标签的单行三斜杠注释,注释的内容可被编译器识别,用来指示编译器在编译的过程中包含其它文件,
阅读全文
摘要:一、前言 在js早起未出现“模块”这一概念以前,为了确保我们创建的变量不会泄露至全局变量中,我们以前曾采用过这种代码组织形式: (function(someObj){ someObj.age = 18; })(someObj || someObj = {}); 后来,js慢慢引入了文件模块的概念,通
阅读全文
摘要:上一篇我们了解vue-cli下,配置环境的方式。随着技术的更新,现在vue多数以vite构建,不再以vue-cli构建了,今天主要聊一下这个! 一、配置选项中的 环境目录 与 .env 文件 1. 环境目录 在 vite 中, 环境目录 是一个用于存放 vite 的 .env 文件的目录,其中这些文
阅读全文
摘要:由于我们的项目需要在不同环境下进行运行(开发,生产,测试等),这避免我们需要多次的去切换请求的地址以及相关的配置,vue-cli2是可以直接在config文件中进行配置的,但是vue-cli4和vue-cli3已经简化了,没有config文件怎么办? 一、建立.env系列文件 首先我们在根目录新建3
阅读全文
摘要:一、安装 axios ⏰ 使用npm安装 $ npm install axios ⏰ 使用yarn安装 $ yarn add axios qs 🔊 qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。qs.parse()和qs.stringify()相反,是将序列化的内容解析成对象的形
阅读全文
摘要:一、创建文件 js ts 二、封装 JS ⏰ localStorage:提供了一种方式来存储键值对,数据会永久保存,直到主动删除或用户清除浏览器缓存。 /** *【window.localStorage 浏览器永久缓存】 **/ export class LocalUtil { // 设置永久缓存
阅读全文
摘要:Store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。它有三个概念,state、getter 和 action,我们可以假设这些概念相当于组件中的 data、 computed 和
阅读全文
摘要:一、安装 ⏰ Vue2安装Vue-router3.0的版本 npm install vue-router@3 ⏰ Vue3安装Vue-router4.0的版本 npm npm install vue-router@4 yarn yarn add vue-router@4 pnpm pnpm add
阅读全文
摘要:Pinia是一个专门为Vue.js设计的状态管理库,它提供了一种简单和直观的方式来管理应用程序的状态。在使用Pinia时,可以轻松地创建定义状态的存储,然后将其与Vue组件绑定,使它们能够使用该状态。 在Vue.js的官网中,我们可以看到Pinia目前已经取代Vuex,成为Vue生态系统的一部分。
阅读全文
摘要:1、安装scss npm install --save-dev sass sass-loader 2、创建文件 /assets/style/mixin.scss var.scss页面 $default-color: #666666; 3、在vite.config.js里配置 css: { // cs
阅读全文
摘要:1、 安装 // 安装less npm i less-loader less --save-dev 2、创建文件 src/assets/styles/base.less var.scss页面 @default-color: #666666; 3、在vite.config.js里配置 ⏰ 方式一 im
阅读全文
摘要:import { fileURLToPath, URL } from 'node:url' import vue from '@vitejs/plugin-vue' import { defineConfig } from 'vite' // https://vitejs.dev/config/ e
阅读全文
摘要:module.exports = { devServer: { host: '', hot: true, port: 8086, disableHostCheck: true,//新版的webpack-dev-server出于安全考虑,默认检查hostname, //如果hostname不是配置内的
阅读全文
摘要:vite.config.js 是 Vite 构建工具的配置文件,用于自定义和扩展 Vite 的默认构建行为。Vite 是一个现代化的前端构建工具,专注于快速启动时间和高效的开发体验。vite.config.js 文件允许你配置项目的构建、打包、开发服务器以及其他相关设置。 想象一下,vite.con
阅读全文
摘要:vue.config.js 是 Vue CLI 项目的配置文件,用于配置项目的构建、打包和开发环境等。它主要适用于使用 Vue CLI 创建的项目。由于vue2项目主要使用Vue CLI 创建项目,所以将此文章,放到vue2.x下面。 1、介绍 之前,我有提到过,当然大家肯定也都知道,Vue3.0不
阅读全文
摘要:😠官方的解释:import.meta 元属性将特定上下文的元数据暴露给 JavaScript 模块。它包含了这个模块的信息,例如这个模块的 URL。 😊通俗的解释:想象你正在编写一个JavaScript模块,这个模块就像是一个装满工具的工具箱。当你需要了解这个工具箱的一些基本信息时,比如它来自哪
阅读全文
摘要:import import xx from '...' 是一种导入方式,是es6模块化的新语法,必须要写到js文件的最上面; 可以用来导入 静态资源(图片、文档)的路径,也可以导入 js、vue文件。 import() import('...') 是 import() 函数,主要作用是实现动态加载模
阅读全文
摘要:Style.css html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, em, img, ol, ul, li, fieldset, form, label, legend, table,
阅读全文