Vue 安装依赖的集合和小知识

Vue项目

typescript 复制代码

npm create vite@latest

typescript 复制代码

pnpm create vite

typescript 复制代码

pnpm add scss -D

.d.ts文件中添加vue的类型声明

typescript 复制代码

declare module "*.vue"{
    import type {DefineComponent} from 'vue'
    const component:DefineComponent<{},{},any>
    export default component
}

javascript 复制代码

yarn add axios

Element-plus

安装element

typescript 复制代码

npm install element-plus --save

typescript 复制代码

pnpm add element-plus

按需引入

javascript 复制代码

npm install -D unplugin-vue-components unplugin-auto-import

javascript 复制代码

pnpm add -D unplugin-vue-components unplugin-auto-import

修改vite.config.ts

javascript 复制代码

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],

插件会在根目录自动生成两个文件
在tsconfig.app.json文件中引入这两个文件
- 添加"./*.d.ts"：不知道这么做合适不，懒得写两个文件的文件名

javascript 复制代码

"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./*.d.ts"],

设置.d.ts文件后，把鼠标悬停在element的标签上就能有提示了，感觉看到提示也没有啥用

分页

分页器的html部分

javascript 复制代码

<!-- 国际化后显示汉字-->
<el-pagination
     style="margin-top: 10px"
     v-model:current-page="currentPage"
     v-model:page-size="pageSize"
     :page-sizes="[10, 20, 30, 40]"
     layout=" prev, pager, next, jumper,->,total, sizes"
     :total="totalPage"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     >
   </el-pagination>

上面各参数的解释

js 复制代码

	 style="margin-top: 10px" // 设置与上面表格部分的间隔
	 v-model:current-page="currentPage" // 当前页页码，发生改变时触发@current-change的回调函数
	 v-model:page-size="pageSize"	// 每页显示条目个数
	 :page-sizes="[10, 20, 30, 40]"	// 每页显示个数选择器的选项设置，发生改变时page-size发生变化，触发@size-change的回调函数
	 layout=" prev, pager, next, jumper,->,total, sizes" // 设置分页器的布局
	 :total="totalPage"	// 总条目数
	 @size-change="handleSizeChange" // 每页显示的条目数有变化时触发该方法
	 @current-change="handleCurrentChange" // 当前页有变化时触发

分页器代码部分

javascript 复制代码

<script setup lang="ts">
import { ref } from 'vue'
/**分页器相关 */
const currentPage = ref(1) // 当前页
const pageSize = ref(10) // 每页显示条目个数
const totalPage = ref(0) // 总条数
/**
 * @function  页码发生改变时调用该方法，默认跳转到第一页
 * @param {number} current 传入跳转到第几页,默认第一页。如要保持页面不变，传入currentPage.value
 */
async function requestPage(current: number = 1) {
    // 参数的页码数大于总页数时，跳转到最后一页
    if (current > Math.ceil(totalPage.value / pageSize.value)) {
        currentPage.value = Math.ceil(totalPage.value / pageSize.value)
    } else {
        currentPage.value = current
    }
    // 根据当前页和每页显示多少条，请求数据
    const result = await request()//发送请求
    if (result.code === 200) {
        pageSize.value = result.data.size
        totalPage.value = result.data.total
    }
}
// 加载该组件时，运行该方法
requestPage()
/**
 * @callback sizeChange 每页显示条目个数发生改变时调用该方法
 */
function handleSizeChange() {
    requestPage(currentPage.value)
}
/**
 * @callback currentChange 页码发生改变时调用该方法
 */
function handleCurrentChange() {
    requestPage(currentPage.value)
}
</script>

nestjs

typescript 复制代码

npm i -g @nestjs/cli

typescript 复制代码

nest new [项目名称]

跨域的设置proxy

json 复制代码

  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

名称	简写	描述	翻译
application	application	Generate a new application workspace	生成新的应用程序工作区
class	cl	Generate a new class	生成新类
configuration	config	Generate a CLI configuration file	生成新类
controller	co	Generate a controller declaration	生成控制器
decorator	d	Generate a custom decorator	生成自定义装饰器
filter	f	Generate a filter declaration	生成筛选器
gateway	ga	Generate a gateway declaration	生成网关
guard	gu	Generate a guard declaration	生成守卫
interceptor	itc	Generate an interceptor declaration	生成拦截器
interface	itf	Generate an interface	生成接口
library	lib	Generate a new library within a monorepo	在monorepo中生成新库
middleware	mi	Generate a middleware declaration	生成中间件
module	mo	Generate a module declaration	生成模块
pipe	pi	Generate a pipe declaration	生成管道
provider	pr	Generate a provider declaration	生成提供者
resolver	r	Generate a GraphQL resolver declaration	生成GraphQL解析器
resource	res	Generate a new CRUD resource	生成新的CRUD资源
service	s	Generate a service declaration	生成服务
sub-app	app	Generate a new application within a monorepo	在monorepo中生成新应用程序

初始化一个响应式数据

typescript 复制代码

// 数据的初始值
const data = ref<dataType>({
  name: "",
  desc: "",
});
// 用于初始化data数据
const resetData = {...data.value};
// 用resetData初始化data的值
Object.assign(data.value, resetData);

typescript 复制代码

// 数据的初始值
const data = reactive<dataType>({
  name: "",
  desc: "",
});
// 用于初始化data数据
const resetData = {...data};
// 用resetData初始化data的值
Object.assign(data, resetData);