使用 Vue 官方脚手架初始化 Vue3 项目

Vite 官网:https://cn.vitejs.dev/

Vue 官网:https://vuejs.org/

Vue 官方文档:https://cn.vuejs.org/guide/introduction.html

Element Plus 官网:https://element-plus.org/

Tailwind CSS 官网:https://tailwindcss.com/

Tailwind CSS 中文文档 (73zls.com):https://tailwind.docs.73zls.com/docs/responsive-design
NPM 官网:https://www.npmjs.com/
Vite 官方中文文档:https://cn.vitejs.dev/

安装 Node 环境

首先,确保已经安装了 Node.js,可以在命令行中运行 node -vnpm -v 来检查它们是否已经正确安装:

image-20231210121140490

安装 Node.js 通常会自动附带安装 npm,所以你不需要单独安装 npm。只需确保 Node.js 版本符合要求即可。

切换 NPM 镜像源

使用 nrm 来管理 npm 镜像源可以帮助加速 npm 包的下载速度。

  1. 执行命令通过 npm 全局安装 nrm

    npm install -g nrm
    
  2. 使用 nrm ls 命令列出当前可用的镜像源,以及它们的地址和当前使用的镜像源:

    nrm ls
    
  3. 使用 nrm use 命令来切换想要使用的镜像源,例如,切换到淘宝镜像源:

    nrm use taobao
    
  4. 使用以下命令来验证切换是否成功:

    npm config get registry
    

安装 Pnpm 包管理工具

  1. 在命令行中执行以下命令全局安装 pnpm:

    npm install -g pnpm
    
  2. 安装完成后,可以使用 pnpm 来代替 npm 进行包管理。例如,使用以下命令来安装项目依赖:

    pnpm install
    

    这将使用 pnpm 来安装项目所需的包,而不是使用默认的 npm。

使用 Vue 官方脚手架初始化项目

  1. 切换到打算创建项目的目录,输入 cmd 打开命令行,之后在命令行中运行以下命令:

    pnpm create vue@latest
    
  2. 运行命令后使用方向键和回车键选择【否/是】开启或关闭某个功能:

    test

  3. 创建完项目之后,在命令行中继续输入以下命令运行项目:

    cd <your-project-name>
    pnpm i
    pnpm run dev --open
    

    test-1

认识 Vue 项目目录结构

Vue 3 项目的典型目录结构如下:

project-name/
├── public/                # 静态资源目录
│   └── favicon.ico        # 网站图标
├── src/                   # 源代码目录
│   ├── assets/            # 资源文件目录(图片、样式等)
│   ├── components/        # 组件目录
│   │   └── HelloWorld.vue # 示例组件
│   ├── router/            # 路由配置目录
│   │   └── index.ts       # 路由配置文件
│   ├── store/             # 状态管理目录
│   │   └── index.ts       # 状态管理配置文件(Pinia)
│   ├── views/             # 视图目录
│   │   └── Home.vue       # 示例视图组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 项目入口文件(使用 TypeScript)
├── .eslintrc.js           # ESLint 配置文件
├── .gitignore             # Git 忽略文件配置
├── .prettierrc.json       # Prettier 配置文件
├── env.d.ts       		   # 声明文件,用于声明全局环境变量的类型
├── index.html       	   # 入口 HTML 文件
├── package.json           # 项目配置文件
├── README.md              # 项目说明文件
├── tsconfig.json          # TypeScript 配置文件
└── vite.config.js         # Vite 配置文件

统一包管理器工具下载依赖

  1. 创建scripts\preinstall.js文件,添加:

    if (!/pnpm/.test(process.env.npm_execpath || '')) {console.warn(`\u001b[33mThis repository must using pnpm as the package manager` +`for scripts to work properly.\u001b[39m\n`)process.exit(1)
    }
    
  2. 在 package.json 中配置命令:

    "scripts": {"preinstall":"node ./scripts/preinstall.js"
    }
    

    preinstall是 npm 提供的生命周期钩子,当我们使用 yarn 或 npm 来安装依赖的时候就会触发 preinstall

项目环境变量配置

没有基础的同学可以先去阅读下环境变量的文章:认识和使用 Vite 环境变量配置

  1. 在项目根目录(index.html 文件所在的位置)下创建对应环境的.env文件,然后在文件中定义对应环境下的变量,默认情况下只有以 VITE_ 为前缀的变量才会暴露给 Vite:

    • .env【默认配置】:

      # 项目标题
      VITE_APP_TITLE = OCTOPUS# 运行端口号
      VITE_PORT = 8080
      
    • .env.development【开发环境】:

      # 开发环境
      VITE_USER_NODE_ENV = development# 项目基本 URL
      VITE_BASE_URL = /dev/# 启动时自动打开浏览器
      VITE_OPEN = true
      
    • .env.production【生产环境】:

      # 生产环境
      VITE_USER_NODE_ENV = production# 项目基本 URL
      VITE_BASE_URL = /
      
    • .env.test【测试环境】:

      # 测试环境
      VITE_USER_NODE_ENV = test# 项目基本 URL
      VITE_BASE_URL = /test/
      
  2. 创建src\types\global.d.ts文件声明环境变量类型:

    // 定义泛型 Recordable,键类型为字符串、值类型为 T
    declare type Recordable<T = any> = Record<string, T>// 定义接口 ViteEnv,描述项目的环境变量结构
    declare interface ViteEnv {VITE_USER_NODE_ENV: 'development' | 'production' | 'test' // 当前运行环境,可选值为 'development', 'production' 或 'test'VITE_GLOB_APP_TITLE: string // 应用标题VITE_PORT: number // Vite 端口号VITE_OPEN: boolean // 是否自动在浏览器打开应用VITE_REPORT: boolean // 是否开启 report 功能VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'gzip,brotli' | 'none' // 可选值为 'gzip', 'brotli', 'gzip,brotli' 或 'none'VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean // 是否删除原始文件VITE_DROP_CONSOLE: boolean // 是否删除控制台VITE_BASE_URL: string // 基本 URLVITE_API_URL: string // API 地址VITE_PROXY: [string, string][] // 表示代理配置VITE_USE_IMAGEMIN: boolean // 是否使用图像压缩
    }
    
  3. 创建build\getEnv.ts文件用于完成环境变量类型转换:

    /*** 从 Vite 的环境变量对象中读取值并进行类型转换* @param envConf 原始环境变量配置对象* @returns ViteEnv 适用于 Vite 的环境变量对象*/
    export function wrapperEnv(envConf: Recordable): ViteEnv {// 创建一个空对象,用于存储处理后的环境变量const ret: any = {}// 遍历环境变量对象的键for (const envName of Object.keys(envConf)) {// 将环境变量值中的 '\n' 替换为换行符 '\n'let realName = envConf[envName].replace(/\\n/g, '\n')realName = realName === 'true' ? true : realName === 'false' ? false : realNameif (envName === 'VITE_PORT') realName = Number(realName)if (envName === 'VITE_PROXY') {try {realName = JSON.parse(realName)} catch (error) {// ignore}}ret[envName] = realName}return ret
    }
    
  4. tsconfig.json中添加 TypeScript 编译器配置:

    {"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","build/**/*.ts","build/**/*.d.ts","vite.config.ts"],"exclude": ["node_modules", "dist", "**/*.js"]
    }
    
  5. vite.config.ts中获取环境变量,并修改 Vite 启动配置:

    import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
    import { wrapperEnv } from './build/getEnv'// https://vitejs.dev/config/
    export default defineConfig(({ mode }: ConfigEnv): UserConfig => {const root = process.cwd()// 获取.env文件中的内容const env = loadEnv(mode, root)const viteEnv = wrapperEnv(env)return {root, //项目根目录base: viteEnv.VITE_BASE_URL, //基础 URLserver: {host: '0.0.0.0', //指定服务器主机地址port: viteEnv.VITE_PORT, //指定开发服务器端口strictPort: true, //若端口已被占用则会直接退出open: viteEnv.VITE_OPEN //服务器启动时,自动在浏览器中打开应用程序}}
    })
    
  6. 在项目中使用 Vite 提供的import.meta.env对象获取这些环境变量:

    <script setup lang="ts">
    const title = import.meta.env.VITE_APP_TITLE
    </script><template><h1>{{ title }}</h1>
    </template>
    

安装 Element Plus

  1. 使用包管理器 pnpm 安装 Element Plus:

    pnpm install element-plus
    
  2. main.ts 文件中引入 Element Plus:

    import { createApp } from 'vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
    app.mount('#app')
    
  3. 设置 Element Plus 默认语言为中文:

    import ElementPlus from 'element-plus'
    import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, {locale: zhCn,
    })
    
  4. tsconfig.json 中通过 compilerOptions.type 指定全局组件类型:

    {"compilerOptions": {// ..."types": ["element-plus/global"]}
    }
    
  5. App.vue 中添加 Element Plus 按钮组件:

    <template><div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div>
    </template>
    
  6. 执行命令启动项目:

    pnpm run dev
    

    image-20240609193421586

集成 sass 配置全局变量

  1. 通过以下命令安装 sass

    pnpm add sass
    
  2. 创建src\assets\styles\variable.scss全局变量文件:

    //全局scss变量
    $color:red
    
  3. vite.config.ts中使用 additionalData 引入全局的 Sass 变量文件:

    export default defineConfig({css: {preprocessorOptions: {scss: {javaScriptEnabled: true,// 向全局 scss 文件内容注入变量additionalData: `@import "@/assets/styles/variable.scss";`}}}
    })
    
  4. 在 Vue 组件中使用变量:

    <script setup lang="ts">
    // This starter template is using Vue 3 <script setup> SFCs
    </script><template><div><h1>Hello world!</h1></div>
    </template><style scoped lang="scss">
    /* SCSS */
    div {font: 2em sans-serif;h1 {color: $color;}
    }
    </style>
    
  5. 执行命令启动项目:

    pnpm run dev
    

    image-20240610130819150

清除浏览器默认样式

通常,浏览器会对一些 HTML 元素应用一些默认的样式,但这些默认样式在不同浏览器之间可能存在差异,导致页面在不同浏览器中呈现不一致。

清除默认样式可以将所有元素的样式重置为统一的基础样式,然后再根据需要逐个重新定义。这样可以确保在编写样式时,不会受到浏览器默认样式的影响,从而更容易实现跨浏览器的一致性。

  1. 进入 NPM 官网:https://www.npmjs.com/,搜索 reset.scss,复制即可:

    image-20240610125420052

  2. 创建 src\assets\styles\reset.scss 文件,添加样式:

    *,
    *:after,
    *:before {box-sizing: border-box;outline: none;
    }html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {font: inherit;font-size: 100%;margin: 0;padding: 0;vertical-align: baseline;border: 0;
    }article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {display: block;
    }body {line-height: 1;
    }ol,
    ul {list-style: none;
    }blockquote,
    q {quotes: none;&:before,&:after {content: '';content: none;}
    }sub,
    sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
    }sup {top: -.5em;
    }sub {bottom: -.25em;
    }table {border-spacing: 0;border-collapse: collapse;
    }input,
    textarea,
    button {font-family: inhert;font-size: inherit;color: inherit;
    }select {text-indent: .01px;text-overflow: '';border: 0;border-radius: 0;-webkit-appearance: none;-moz-appearance: none;
    }select::-ms-expand {display: none;
    }code,
    pre {font-family: monospace, monospace;font-size: 1em;
    }
    
  3. 创建 src\assets\styles\index.scss 文件,用于统一管理和维护项目的样式文件:

    @import './reset.scss';
    
  4. main.ts 文件中引入index.scss样式文件:

    import './assets/styles/index.scss'
    

安装 Tailwind CSS

  1. 打开 Tailwind CSS 官网【https://tailwindcss.com/】,点击【Docs】查看文档:

    image-20240609113814168

  2. 点击【Framework Guides】查看框架指南,我们的项目是使用 Vite 构建,所以点击【Vite】:

    image-20240609114049866

  3. 点击【Using Vue】查看安装步骤:

    image-20240609115121127

  4. 执行命令安装 Tailwind CSS:

    pnpm i -D tailwindcss postcss autoprefixer
    

    image-20240609115408956

  5. 运行命令生成 Tailwind CSS 配置文件:tailwind.config.js、postcss.config.js

    npx tailwindcss init -p
    

    image-20240609115511670

  6. tailwind.config.js配置文件中添加模板文件路径:

    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
    
  7. 创建src\assets\styles\tailwind.scss文件, 添加 Tailwind CSS 提供的用于导入基础样式、组件和实用工具的特殊指令:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
  8. src\assets\styles\index.scss 文件引入tailwind.scss,或者在main.ts文件中直接引入:

    @import './tailwind.scss';
    
  9. 在项目中使用 Tailwind.css 设置内容样式:

    <template><h1 class="text-3xl font-bold underline">Hello world!</h1>
    </template>
    
  10. 执行命令启动项目:

    pnpm run dev
    

    image-20240609190157155

封装 SvgIcon 组件

  1. 安装 SVG 插件:

    pnpm install vite-plugin-svg-icons -D
    
  2. vite.config.ts中配置图标插件:

    // vite.config.ts
    import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
    import path from 'path'export default () => {return {plugins: [// SVG 图标插件配置createSvgIconsPlugin({// 指定图标目录 src/assets/iconsiconDirs: [resolve(process.cwd(), 'src/assets/icons')],// 指定生成的 symbol-id 的格式symbolId: 'icon-[dir]-[name]'})],}
    }
    

    这样配置之后,如果在 src/assets/icons/ui 目录中有一个名为 heart.svg 的 SVG 文件,其 symbolId 将就会是 icon-ui-heart

  3. 在入口文件(main.ts)中导入:

    // main.ts
    import 'virtual:svg-icons-register'
    
  4. 创建文件src/components/SvgIcon/index.vue,封装 SvgIcon 组件:

    <template><!-- SVG 图标组件 --><svg :class="iconClass" :width="width" :height="height" :fill="color" aria-hidden="true"><!-- 使用外部定义的图标符号 --><use :xlink:href="symbolId" /></svg>
    </template><script setup lang="ts">
    import { computed } from 'vue'// 定义 SvgIcon 组件的属性接口
    interface SvgProps {name: string // 图标的名称 (必传)prefix?: string // 图标前缀 (可选)width?: string // 图标的宽度 (可选)height?: string // 图标的高度 (可选)color?: string // 图标的填充颜色 (可选)iconClass?: string // 图标的类名 (可选)
    }// 设置属性的默认值
    const props = withDefaults(defineProps<SvgProps>(), {prefix: 'icon', // 默认前缀width: '20px', // 默认宽度height: '20px', // 默认高度color: 'currentColor', // 继承父元素的 color 属性,允许图标颜色随父元素的文本颜色自动变化iconClass: '' // 默认类名为空
    })// 计算图标的符号 ID,用于 <use> 标签的 xlink:href 属性
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    </script><style scoped lang="scss">
    /* 在这里添加样式 */
    </style>
    
  5. 注册组件(三选一)

    • 局部注册:使用时在 Vue 组件中直接导入。

      import svgIcon from '@/components/SvgIcon.vue'
      
    • 全局注册:在入口文件(main.ts)通过 app.component() 方法将 SvgIcon 组件在全局范围内注册到 Vue 应用。

      // main.ts
      import SvgIcon from '@/components/SvgIcon.vue'app.component('SvgIcon', SvgIcon)
      
    • 使用插件注册全局组件:

      1. src/components/index.ts中统一注册组件,并导出插件对象:

        //全局注册组件
        import SvgIcon from './SvgIcon/index.vue'//全局组件
        const globalComponents = {SvgIcon
        }//对外暴露插件对象
        export default {//install 注册组件install(app: any) {Object.keys(globalComponents).forEach((key) => {app.component(key, globalComponents[key])})}
        }
        
      2. 在入口文件(main.ts)安装全局组件插件:

        import GlobalComponents from '@/components/index'app.use(GlobalComponents)
        
  6. 结合iconfont-阿里巴巴矢量图标库使用组件:

    <!-- 搜索按钮 -->
    <svg-icon class="cursor-pointer" name="Search" />
    

安装 Piana 持久化插件

官网文档:https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

pinia-plugin-persistedstate 是一个用于 Pinia 状态管理库的插件,作用如下:

  1. 状态持久化: 将 Pinia 中的状态数据保存到浏览器的本地存储中,使得在页面刷新或用户重新访问应用时,状态数据可以得以恢复,从而保持用户的操作和数据状态。

  2. 数据恢复: 在用户重新打开应用或者刷新页面时,可以通过读取本地存储中的数据,将之前保存的状态数据重新加载到 Pinia 的状态管理中,确保用户体验的连贯性和持久化存储的功能。

  3. 配置灵活: 可以通过插件的配置选项来指定存储数据的方式(如 localStorage、sessionStorage 或者自定义的存储引擎),以及对状态数据进行序列化和反序列化的方法。

  4. 安装pinia-plugin-persistedstate依赖:

    pnpm add pinia-plugin-persistedstate
    
  5. src/stores/index.ts中将插件添加到 pinia 实例上:

    import { createPinia } from 'pinia'
    import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'// 添加 persisted state 插件,并指定可选的选项
    const pinia = createPinia()
    pinia.use(piniaPluginPersistedstate)export default pinia
    
  6. main.ts入口文件注册 Pinia:

    import { createApp } from 'vue'
    import pinia from '@/stores'import App from './App.vue'const app = createApp(App)app.use(pinia)
    app.mount('#app')
    
  7. 在创建仓库时通过persist: true参数使 Pinia 对状态数据进行持久化存储:

    • 组合式 API:

      import { defineStore } from 'pinia'
      import { ref } from 'vue'export const useStore = defineStore('main',() => {const someState = ref('你好 pinia')return { someState }},{persist: true,},
      )
      
    • 选项式 API:

      import { defineStore } from 'pinia'export const useStore = defineStore('main', {state: () => {return {someState: '你好 pinia',}},persist: true,
      })
      

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/397839.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Xilinx课程,就这么水灵灵地上线了~

如果你想了解&#xff1a; 如何利用精通流水线&#xff08;Pipeline&#xff09;技术&#xff0c;让电路设计效率倍增&#xff1f; 如何掌握利用性能基线指导设计流程的方法&#xff1f; 如何理解集成电路设计中的UltraFast Design Methodology Implementation设计方法学中的…

100 Exercises To Learn Rust 挑战!准备篇

公司内部的学习会非常活跃&#xff01;我也参与了Rust学习会&#xff0c;并且一直在研究rustlings。最近&#xff0c;我发现了一个类似于rustlings的新教程网站&#xff1a;Welcome - 100 Exercises To Learn Rust。 rustlings是基于Rust的权威官方文档《The Rust Programming…

docker技术中docker-compose与harbor技术

docker-composeharbor docker网络概念 当大规模使用docker时&#xff0c;容器间通信就成了一个问题。 docker支持的四种网络模式在run时指定 host模式 --nethost 容器和宿主机共享一个网络命名空间 container模式 --net{容器id} 多个容器共享一个网络 none模式 --netnone …

【深度学习】TTS,CosyVoice,推理部署的代码原理讲解分享

文章目录 demo代码加载配置文件speech_tokenizer_v1.onnx(只在zero_shot的时候使用)campplus.onnx(只为了提取说话人音色embedding)`campplus_model` 的作用代码解析具体过程解析总结示意图CosyVoiceFrontEndCosyVoiceModel推理过程总体推理过程推理速度很慢: https://git…

基于Python爬虫+机器学习的长沙市租房价格预测研究

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

数据库(三):DML

DML&#xff0c;全称Data Manipulation Language&#xff08;数据操作语言&#xff09;&#xff0c;用来对数据库中表的数据记录进行增、删、改、查。 一、添加数据&#xff08;INSERT&#xff09; 注意事项&#xff1a; ①插入数据时&#xff0c;指定的字段顺序需要与值的顺序…

手机在网时长查询接口如何对接?(二)

一、什么是手机在网时长查询接口&#xff1f; 传入手机号码&#xff0c;查询该手机号的在网时长&#xff0c;返回时间区间&#xff0c;支持携号转网号码查询。 二、手机在网时长查询接口适用于哪些场景&#xff1f; 比如&#xff1a;信用评估辅助 &#xff08;1&#xff09…

二叉树建堆全过程(数组实现)

定义 typedef int HPDataType;typedef struct Heap {HPDataType* a;//用数组存数据int size;//当前数组存放数据的数量int capacity;//数组容量}HP; 即将要实现的功能 void HPInit(HP* php);//初始化 void HPPush(HP* php, HPDataType x);//堆尾插入数据&#xff08;数组尾部…

论文阅读:Efficient Core Maintenance in Large Bipartite Graphs | SIGMOD 2024

还记得我们昨天讨论的《Querying Historical Cohesive Subgraphs over Temporal Bipartite Graphs》这篇论文吗? https://blog.csdn.net/m0_62361730/article/details/141003301 这篇(还没看的快去看) 这篇论文主要研究如何在时间双向图上查询历史凝聚子图&#xff0c;而《E…

深度学习入门指南(1) - 从chatgpt入手

2012年&#xff0c;加拿大多伦多大学的Hinton教授带领他的两个学生Alex和Ilya一起用AlexNet撞开了深度学习的大门&#xff0c;从此人类走入了深度学习时代。 2015年&#xff0c;这个第二作者80后Ilya Sutskever参与创建了openai公司。现在Ilya是openai的首席科学家&#xff0c;…

手机误操作导致永久删除照片的恢复方法有哪些?

随着手机功能的不断增强和应用程序的不断丰富&#xff0c;人们越来越依赖手机&#xff0c;离不开手机。但有时因为我们自己的失误操作&#xff0c;导致我们手机上重要的照片素材被永久删除&#xff0c;这时我们需要怎么做&#xff0c;才能找回我们被永久删除的照片素材呢&#…

Langchain框架深度剖析:解锁大模型-RAG技术的无限潜能,引领AI应用新纪元

文章目录 前言一、Langchain 框架概述二、大模型-RAG技术原理三、应用示例1.RAG案例一&#xff08;私有文档直接读取-问答&#xff09;2.RAG案例二&#xff08;Vue上传文件结合文件内容回答问题&#xff09;3.RAG案例三&#xff08;Vue秒传文件结合文件内容回答问题&#xff09…

无字母数字webshell命令执行

<?php if(isset($_GET[code])){$code $_GET[code];if(strlen($code)>35){die("Long.");}if(preg_match("/[A-Za-z0-9_$]/",$code)){die("NO.");}eval($code); }else{highlight_file(__FILE__); }限制&#xff1a; 1.webshell长度不超过…

【海思SS626 | 内存管理】海思芯片的OS内存、MMZ内存设置

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

基于jsp的宠物领养与服务管理系统(源码+论文+部署讲解等)

博主介绍&#xff1a;✌全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术栈介绍&#xff1a;我是程序员阿龙&#xff…

【SpringBoot】自定义注解<约定式i18n国际化>终极升级版方案源码Copy

零、前言 在后端对于 SpringBoot 的 数据库数据&#xff0c;需要国际化的字段和主要显示字段是分离的&#xff0c;为了避免大耦合性&#xff0c;与用户端的国际化字段处理问题&#xff0c;统一采用主要显示数据的实体字段。为此&#xff0c;我设计了一套解决方案&#xff0c;通…

el-form-item,label在上方显示,输入框在下方展示

本来是两排展示去写&#xff0c;设计要求一排展示&#xff0c;label再上方&#xff0c;输入框、勾选框在下方&#xff1b;只能调整样式去修改&#xff1b;参考label-position这个属性 代码如下&#xff1a; <el-form ref"form" :model"formData" clas…

React应用(基于react脚手架)

react脚手架 1.xxx脚手架&#xff1a;用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置&#xff08;语法检查&#xff0c;jsx编译&#xff0c;devServer&#xff09;下载好了所有相关的依赖可以直接运行一个简单结果 2.react提供了一个用于创建react项目…

AWVS——Web 应用漏洞扫描的强大工具

一、引言 在网络安全日益重要的今天&#xff0c;Web 应用的安全性备受关注。Acunetix Web Vulnerability Scanner&#xff08;简称 AWVS&#xff09;作为一款知名的 Web 应用漏洞扫描工具&#xff0c;为保障 Web 应用的安全发挥了重要作用。本文将详细介绍 AWVS 的功能、特点、…

【vulhub靶场之spring】——

简介&#xff1a; Spring是Java EE编程领域的一个轻量级开源框架&#xff0c;该框架由一个叫Rod Johnson的程序员在2002年最早提出并随后创建&#xff0c;是为了解决企业级编程开发中的复杂性&#xff0c;业务逻辑层和其他各层的松耦合问题&#xff0c;因此它将面向接口的编程思…