Vue学习

2025-08-12 80 条评论

全文共 9192 字，阅读约 37 分钟

Vue

1.创建应用

简单开发，导入vue.global.js在目录下，head中加入

<script src="vue.global.js"></script>

模块化开发，导入vue.esm-browser.js在目录下，在js中导入

<script type="module">
        import {createApp,reactive,ref} from './vue.esm-browser.js'
</script>

"渐进式"是指可以按需引入Vue.js的部分功能, 而不必全量引入整个框架

<div id="app">
    {{ msg }}

    <h2>{{ web.title }}</h2>
    <h3>{{ web.url }}</h3>
</div>

<div id="app"></div> 指定一个 id 为 app 的 div 元素

/*
{{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染
    如: Vue 实例中定义一个 msg 变量, 值为 "Hello world", 在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world"

    响应式数据是指当数据发生变化时, 模板中依赖于该数据的部分会自动更新
*/

    //创建一个 Vue 应用程序
    Vue.createApp({
        //Composition API(组合式 API) 的 setup选项 用于设置响应式数据和方法等
        setup() {
            //Composition API 的 reactive()函数 用于创建响应式数据
            const web = Vue.reactive({ //Vue.reactive 创建一个响应式数据对象 web, 其中包含 title 和 url 属性
                title: "邓瑞编程",
                url: "dengruicode.com"
            })

            //返回数据
            return {
                msg: "success",
                web
            }
        }
    }).mount("#app") //将 Vue 应用程序挂载(mount) 到 app 元素上


//将 Vue 对象中的 createApp、reactive 属性赋值给 createApp、reactive 变量，解构后不用使用Vue.来调用
const { createApp, reactive } = Vue //解构赋值语法

createApp({
    setup() {
        const web = reactive({
            title: "邓瑞编程",
            url: "dengruicode.com"
        })

        return {
            msg: "success",
            web
        }
    }
}).mount("#app")

完整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    
    <div id="app">
        {{ msg }}

        <h2>{{ number }}</h2>
    </div>

    <script type="module">
        import {createApp,reactive,ref} from './vue.esm-browser.js'

        createApp({
            setup() {
                const number = ref(10)

                const web = reactive({
                    title:"wsy",
                    url:"wsy.com",
                    show: true
                })

                return{
                    msg:"success",
                    number,
                    web                    
                }

            }
        }).mount("#app")
    </script>

</body>
</html>

2.ref和reactive（响应式对象数据）

const number = ref(10) //ref用于存储单个基本类型的数据, 如:数字、字符串等，但是也可以用于数组，例如const number = ref([1，2，3])

number.value = 20 //使用ref创建的响应式对象, 需要通过.value属性来访问和修改其值

const web = reactive({ //用于存储复杂数据类型, 如:对象或数组等
    title: "邓瑞编程",
    url: "dengruicode.com"
})
web.url = "www.dengruicode.com" //使用reactive创建的响应式对象, 可以直接通过属性名来访问和修改值

注意，在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包 (有一些注意事项)。

import { ref } from 'vue'

const count = ref(0)

与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型 (如 Map) 中的元素被访问时，它不会被解包：

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

3.v-on（监听事件，绑定方法）

v-on:事件="方法" 用来监听事件，也可以简写为 @事件="方法"

<!-- v-on:click 表示在 button 元素上监听 click 事件 -->
<button v-on:click="edit">修改</button> <br>

<!-- @click 简写形式 -->
<button @click="add(20, 30)">加法</button> <br>

<!-- 
enter space tab 按键修饰符
keyup是在用户松开按键时才触发
keydown是在用户按下按键时立即触发
-->
回车 <input type="text" @keyup.enter="add(40, 60)"> <br>
空格 <input type="text" @keyup.space="add(20, 30)"> <br>
Tab <input type="text" @keydown.tab="add(10, 20)"> <br>
w <input type="text" @keyup.w="add(5, 10)"> <br>

<!-- 组合快捷键 -->
Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>
Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)">

createApp({
    setup() {
        const web = reactive({
            title: "邓瑞编程",
            url: "dengruicode.com",
            user: 0
        })

        const edit = () => {
            web.url = "www.dengruicode.com"
            //msg = "邓瑞编程" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据
        }

        const add = (a, b) => {
            web.user += a + b
        }

        const sub = (a, b) => {
            return a - b
        }

        return {
            msg: "success", //普通变量, 非响应式数据, 在模板中普通变量不会自动更新
            web, //响应式数据
            edit, //方法
            add,
            sub,
        }
    }
}).mount("#app")

4.v-show（显示隐藏）

当v-show="对象"，这个对象为true时就渲染显示该部分，为false就不显示

<div id="app">
    <h3>{{ web.show }}</h3>
    <p v-show="web.show">邓瑞编程 dengruicode.com</p>

    <button @click="toggle">点击切换显示状态</button>
</div>

/*
v-show 通过 css display属性 来控制元素的显示或隐藏
v-show 适用于频繁切换元素的显示状态, 因为只改变 display 属性, 不需要重新渲染整个组件
*/

createApp({
    setup() {
        const web = reactive({
            show: true
        })

        const toggle = () => {
            web.show = !web.show
        }

        return {
            web,
            toggle
        }
    }
}).mount("#app")

5.v-if、v-else、v-else-if（条件渲染）

<div id="app">
    <h3>{{ web.show }}</h3>
    <p v-show="web.show">邓瑞编程</p>
    <p v-if="web.show">dengruicode.com</p>

    <button @click="toggle">点击切换显示状态</button>

    <p v-if="web.user < 1000">新网站</p>
    <p v-else-if="web.user >= 1000 && web.user < 10000">优秀网站</p>
    <p v-else-if="web.user >= 10000 && web.user < 100000">资深网站</p>
    <p v-else>超级网站</p>
</div>

/*
        v-if 用于对元素进行条件渲染. 当条件为 true 时, 渲染该元素, 为 false 时, 则不渲染
        v-if 适用于较少改变的场景, 因为频繁从 dom 中删除或添加元素, 会导致性能下降
    */
createApp({
    setup() {
        const web = reactive({
            show: true,
            user: 500
        })

        const toggle = () => {
            web.show = !web.show
        }

        return {
            web,
            toggle
        }
    }
}).mount("#app")

6.v-bind（动态绑定）

v-bind:value(或者src、class等等)="对象"，绑定数据对象后，当数据对象改变，绑定的内容也会进行改变渲染
单向绑定只是绑定对象数据，当修改对象后，不会对其他绑定了该对象的数据进行修改渲染

<div id="app">
    <!--静态值-->
    <h3>value="dengruicode.com"</h3>
    <input type="text" value="dengruicode.com">

    <!--单向绑定:value-->
    <h3>v-bind:value="web.url"</h3>
    <input type="text" v-bind:value="web.url">

    <h3>简写 :value="web.url"</h3>
    <input type="text" :value="web.url">

    <!-- :src -->
    <h3>src="windows.jpg"</h3>
    <img src="windows.jpg">

    <h3>:src="web.img"</h3>
    <img :src="web.img">

    <!-- :class -->
    <h3>class="textColor"</h3>
    <b class="textColor">邓瑞编程</b>

    <!-- :class="{ 类名: 条件表达式 }" 当条件表达式
    为真，<b class="textColor">dengruicode.com</b> 
    为假，<b>dengruicode.com</b>-->
    <h3>:class="{textColor:web.fontStatus}"</h3>
    <b :class="{textColor:web.fontStatus}">dengruicode.com</b>
</div>

createApp({
    setup() {
        const web = reactive({
            url: "www.dengruicode.com",
            img: "windows.jpg",
            fontStatus: true
        })

        return {
            web
        }
    }
}).mount("#app")

7.v-for（遍历数组对象）

v-for="参数" in 对象数据

<div id="app">
    <ul>
        <li v-for="(value, index) in data.number">
            index=> {{ index }} : value=> {{ value }}
        </li>
    </ul>

    <ul>
        <li v-for="value in data.user">
            value=> {{ value }}
        </li>
    </ul>

    <ul>
        <li v-for="(value, key) in data.user">
            key=> {{ key }} : value=> {{ value }}
        </li>
    </ul>

    <ul>
        <li v-for="(value, key, index) in data.user">
            index=> {{ index }} : key=> {{ key }} : value=> {{ value }}
        </li>
    </ul>

    <ul>
        <!-- <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染  -->
        <template v-for="(value, key, index) in data.user">
            <li v-if="index == 1">
                index=> {{ index }} : key=> {{ key }} : value=> {{ value }}
            </li>
        </template>
    </ul>

    <ul>
        <!-- :key="value.id" 为 每个 li 元素设置一个唯一的 key 值 -->
        <li v-for="(value, index) in data.teacher" :title="value.name" :key="value.id">
            index=> {{ index }} : value.id=>{{ value.id }} value.name=>{{ value.name }} value.web=>{{ value.web }}
        </li>
    </ul>
</div>

createApp({
    setup() {
        const data = reactive({
            number: ["十", "十一", "十二"], //数组
            user: { //对象
                name: "Luna",
                gender: "女"
            },
            teacher: [ //包含两个对象的数组
                { id: 100, name: "邓瑞", web: "dengruicode.com" },
                { id: 101, name: "David", web: "www.dengruicode.com" }
            ]
        })

        return {
            data
        }
    }
}).mount("#app")

8.v-model（双向绑定）

双向绑定既对当前使用了v-model的对象数据进行修改，也会对其他绑定了该对象的部分也进行修改渲染

<div id="app">
    <h3>文本框 {{ data.text }}</h3>
    <h3>单选框 {{ data.radio }}</h3>
    <h3>复选框 {{ data.checkbox }}</h3>
    <h3>记住密码 {{ data.remember }}</h3>
    <h3>下拉框 {{ data.select }}</h3>

    <!-- 单向数据绑定 当数据发生改变时, 视图会自动更新. 但用户手动更改 input 的值, 数据不会自动更新 -->
    单向数据绑定 <input type="text" :value="data.text">

    <hr>
    <!-- 
        双向数据绑定 当数据发生改变时, 视图会自动更新. 当用户手动更改 input 的值, 数据也会自动更新
        对于 <input type="text">, v-model 绑定的是 input 元素的 value 属性
     -->
    双向数据绑定 <input type="text" v-model="data.text">

    <hr>
    <!-- 
        单选框
        对于 <input type="radio">, v-model 绑定的是 input 元素的选中状态
     -->
    <input type="radio" v-model="data.radio" value="1">写作
    <input type="radio" v-model="data.radio" value="2">画画

    <hr>
    <!-- 
        复选框
        对于 <input type="checkbox">, v-model 绑定的是 input 元素的选中状态
     -->
    <input type="checkbox" v-model="data.checkbox" value="a">写作
    <input type="checkbox" v-model="data.checkbox" value="b">画画
    <input type="checkbox" v-model="data.checkbox" value="c">运动

    <hr>
    <!-- 记住密码 -->
    <input type="checkbox" v-model="data.remember">记住密码

    <hr>
    <!-- 
        下拉框
        对于 <select>, v-model 绑定的是 select 元素的选中状态
     -->
    <select v-model="data.select">
        <option value="">请选择</option>
        <option value="A">写作</option>
        <option value="B">画画</option>
        <option value="C">运动</option>
    </select>
</div>

createApp({
    setup() {
        const data = reactive({
            text: "dengruicode.com", //文本框
            radio: "", //单选框
            checkbox: [], //复选框
            remember: false, //单个复选框-记住密码
            select: "" //下拉框
        })

        return {
            data
        }
    }
}).mount("#app")

9.v-model修饰符

<div id="app">
    <h3>url: {{ web.url }}</h3>
    <h3>user: {{ web.user }}</h3>

    实时渲染 <input type="text" v-model="web.url"> <br>

    在失去焦点或按下回车键之后渲染 <input type="text" v-model.lazy="web.url"> <br>

    <!-- 输入 100人, web.user 的值仍为 100 -->
    输入框的值转换为数字类型 <input type="text" v-model.number="web.user"> <br>

    去除首尾空格 <input type="text" v-model.trim="web.url">
</div>

createApp({
    setup() {
        const web = reactive({
            url: "dengruicode.com",
            user: 10
        })

        return {
            web
        }
    }
}).mount("#app")

10.v-text、v-html（渲染数据）

<div id="app">
    <h3>{{ web.title }}</h3>

    <!-- v-text 将数据解析为纯文本格式 -->
    <h3 v-text="web.title"></h3>

    <!-- v-html 将数据解析为 html 格式 -->
    <h3 v-html="web.url"></h3>
</div>

createApp({
    setup() {
        const web = reactive({
            title: "邓瑞编程",
            url:"<i style='color:blue;'>www.dengruicode.com</i>"
        })

        return {
            web
        }
    }
}).mount("#app")

11.computed（计算属性）

computed的计算是有缓存的，当有执行过一次后，再次计算，会调用之前的缓存

<div id="app">
    <h3>add: {{ add() }}</h3>
    <h3>add: {{ add() }}</h3>

    <h3>sum: {{ sum }}</h3>
    <h3>sum: {{ sum }}</h3>

    x <input type="text" v-model.number="data.x"> <br>
    y <input type="text" v-model.number="data.y">
</div>

import { computed } from './vue.esm-browser.js'
createApp({
    setup() {
        const data = reactive({
            x: 10,
            y: 20
        })

        //方法-无缓存
        let add = () => {
            console.log("add") //打印两次
            return data.x + data.y
        }

        //计算属性-有缓存 [计算属性根据其依赖的响应式数据变化而重新计算]
        const sum = computed(() => {
            console.log("sum") //打印一次
            return data.x + data.y
        })

        return {
            data,
            sum,
            add
        }
    }
}).mount("#app")

12.监听器watch

<div id="app">
    爱好
    <select v-model="hobby">
        <option value="">请选择</option>
        <option value="1">写作</option>
        <option value="2">画画</option>
        <option value="3">运动</option>
    </select>

    <hr>

    年
    <select v-model="date.year">
        <option value="">请选择</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
    </select>

    月
    <select v-model="date.month">
        <option value="">请选择</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
</div>

import { watch } from './vue.esm-browser.js'
createApp({
    setup() {
        const hobby = ref("") //爱好
        const date = reactive({ //日期
            year: "2023",
            month: "10"
        })

        //监听 hobby
        watch(hobby, (newValue, oldValue) => {
            console.log("oldValue", oldValue, "newValue", newValue)

            if (newValue == "2") {
                console.log("画画")
            }
        })

        //监听 date
        watch(date, (newValue, oldValue) => {
            /*
                    JS中对象和数组是通过引用传递的, 而不是通过值传递
                    当修改对象或数组的值时, 实际上修改的是对象或数组的引用, 而不是创建一个新的对象或数组
                    所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值
                */
            console.log("oldValue", oldValue, "newValue", newValue)

            if (newValue.year == "2025") {
                console.log("2025")
            }

            if (newValue.month == "11") {
                console.log("11")
            }
        })

        //监听 date 中的某个属性 year
        watch(() => date.year, (newValue, oldValue) => {
            console.log("oldValue", oldValue, "newValue", newValue)

            if (date.year == "2024") {
                console.log("2024")
            }
        })

        return {
            hobby,
            date
        }
    }
}).mount("#app")

13.自动监听器watchEffect

<div id="app">
    爱好
    <select v-model="hobby">
        <option value="">请选择</option>
        <option value="1">写作</option>
        <option value="2">画画</option>
        <option value="3">运动</option>
    </select>

    <hr>

    年
    <select v-model="date.year">
        <option value="">请选择</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
    </select>

    月
    <select v-model="date.month">
        <option value="">请选择</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
</div>

/*
        watch需要显式指定要监听的属性, 并且只有当监听的属性发生变化时才会执行
        若需要更精细地控制或需要获取到原值, 需要使用watch
    */
import { watchEffect } from './vue.esm-browser.js'

createApp({
    setup() {
        const hobby = ref("") //爱好
        const date = reactive({ //日期
            year: "2023",
            month: "10"
        })

        //自动监听
        watchEffect(() => {
            console.log("------ 监听开始")

            if (hobby.value == "2") {
                console.log("画画")
            }

            if (date.year == "2025") {
                console.log("2025")
            }

            if (date.month == "11") {
                console.log("11")
            }

            console.log("------ 监听结束")
        })

        return {
            hobby,
            date
        }
    }
}).mount("#app")

14.axios使用

导入：axios.min.js，例如：

<script src="js/axios.min.js"></script>

//get请求
axios.get(`http://127.0.0.1/article/get/id/${id}`).then(response => {
    console.log("get.data:", response.data)

    if(response.data.status == "success"){
        if(response.data.data){
            data.list.push(response.data.data) //push 向数组末尾添加一个或多个元素
        }
    }
}).catch(error => {
    console.log("get.error:", error)
})

//post请求 [axios post的默认请求头是 application/json]
axios.post('http://127.0.0.1/article/postJson/search', param).then(response => {
    console.log("postJson.data:", response.data)

    if(response.data.status == "success"){
        for(let i=0; i<response.data.data.length; i++){
            data.list.push(response.data.data[i]) //push 向数组末尾添加一个或多个元素
        }
    }
}).catch(error => {
    console.log("postJson.error:", error)
})

15.使用Vite创建vue3项目

（1）npm create vite@latest

（2）选择y

（3）project name：要创建的项目名

（4）选择vue

（5） Done. Now run:

cd demo
npm install
npm run dev

删除文件

src\style.css

src\components\HelloWorld.vue

删除代码

main.js

import './style.css'

16.使用vue（官方）创建vue3项目

下面把 create-vue 交互里每一个「Yes/No」选项拆开讲：

选了 Yes 之后到底会额外给你什么文件 / 依赖 / 配置；
这些配置在真实开发里到底解决什么问题。

你可以把它当成一份「勾选清单说明书」。

npm create vue@latest

──────────────────────────

Project name
• 作用：仅决定文件夹名，与 npm 包名一致（package.json 里的 "name" 字段）。
• 额外产物：一个同名目录，无其他配置差异。

──────────────────────────

Add TypeScript → Yes
额外给你：
• 文件后缀改成 .ts/.vue 里 <script setup lang="ts">
• tsconfig.json、tsconfig.node.json（TypeScript 编译选项）
• env.d.ts（让 TS 识别 *.vue、vite/client 类型）
• 依赖：typescript、vue-tsc（build 时做类型检查）

开发收益：
静态类型检查、IDE 自动补全、重构更安心。

──────────────────────────

JSX Support → Yes
额外给你：
• vite.config.ts 里自动加 jsx 插件：
import vueJsx from '@vitejs/plugin-vue-jsx'
plugins: [vue(), vueJsx()]

• 示例文件：src/components/HelloWorld.jsx / tsx
• 依赖：@vitejs/plugin-vue-jsx

开发收益：
可在 .jsx/.tsx 或 <script setup lang="tsx"> 里写 render 函数 / 高阶组件。

──────────────────────────

Vue Router → Yes
额外给你：
• src/router/index.ts（路由表、history 模式）
• src/views/ 目录 + HomeView.vue / AboutView.vue 示例
• main.ts 里 app.use(router)
• 依赖：vue-router@4

开发收益：
SPA 多页面切换、路由守卫、动态路由。

──────────────────────────

Pinia → Yes
额外给你：
• src/stores/ 目录 + counter.ts 示例（defineStore）
• main.ts 里 app.use(createPinia())
• 依赖：pinia

开发收益：
全局状态管理，替代 Vuex，DevTools 支持热更新。

──────────────────────────

Vitest → Yes（单元测试）
额外给你：
• vitest.config.ts（测试专用 Vite 配置）
• src/components/__tests__/HelloWorld.spec.ts 示例
• package.json script："test:unit": "vitest"
• 依赖：vitest、jsdom、@vue/test-utils

开发收益：
单文件组件也能跑 Jest-like 测试，速度比 Jest + vue-jest 快很多。

──────────────────────────

Cypress → Yes（端到端测试）
额外给你：
• cypress/ 目录
├─ e2e/
│ └─ example.cy.ts（访问首页断言标题存在）
├─ fixtures/
├─ support/
• package.json script："test:e2e": "cypress open"
• 依赖：cypress

开发收益：
在真实浏览器里跑完整用户流程（登录、跳转、交互），防止集成缺陷。

──────────────────────────

ESLint → Yes
额外给你：
• .eslintrc.cjs（extends: ["@vue/eslint-config-typescript/recommended", "@vue/eslint-config-prettier"]）
• package.json script："lint": "eslint . --ext .vue,.js,.ts"
• 依赖：eslint、@vue/eslint-config-* 系列

开发收益：
自动发现语法错误、风格违规；配合 IDE 红线提示 & 保存即修复。

──────────────────────────

Prettier → Yes
额外给你：
• .prettierrc.json（printWidth、semi、singleQuote 等）
• .vscode/extensions.json 推荐安装 Prettier 插件
• 依赖：prettier

开发收益：
一键统一缩进、换行、引号风格，避免团队因格式争吵。

──────────────────────────

DevTools / VS Code 建议
create-vue 还会根据你的选择自动生成：
• .vscode/extensions.json（推荐 Volar、ESLint、Prettier）
• .vscode/settings.json（保存时自动格式化、ESLint 自动修复）

这些不算 Yes/No 选项，但会在你选了 ESLint/Prettier/TS 后自动出现。

──────────────────────────
一句话速记
TS / JSX 决定语言特性；Router / Pinia 决定架构；Vitest / Cypress 决定测试策略；ESLint / Prettier 决定代码质量。
全部选 Yes 你就拿到一个「可直接上线」的现代化 Vue3 工程模板；全部选 No 就是最小可运行示例。

17.区别

一句话区别
npm create vue@latest 是「官方 Vue 团队做的、只给 Vue3 用的『应用级』脚手架」；
npm create vite@latest 是「Vite 官方做的、面向所有框架的『通用』脚手架」。

下面把两条命令在 6 个维度拆开对比，你就能知道什么时候该用哪一个。

────────────────────────────

作者 & 维护者
• create-vue：Vue 核心团队（Evan You、三咲智子等人）维护，发布节奏跟 Vue 版本走。
• create-vite：Vite 核心团队（patak 等人）维护，发布节奏跟 Vite 版本走。

────────────────────────────

适用范围
• create-vue：只生成 Vue3 项目。
• create-vite：可选 Vanilla、Vue、React、Preact、Svelte、Solid、Lit、Qwik、Alpine……
也就是说，用 create-vite 也可以选 Vue，但它不会给你 Pinia、Router、ESLint、Prettier 等「Vue 全家桶」预设。

────────────────────────────

交互式提问
• create-vue：
‑ Project name
‑ TypeScript?
‑ JSX?
‑ Vue Router?
‑ Pinia?
‑ Vitest?
‑ Cypress?
‑ ESLint?
‑ Prettier?
一口气帮你把“一个真实业务项目”需要的配置都问完。

• create-vite：

      ‑ Project name  
      ‑ Framework?  
      ‑ Variant?（如 vue-ts、vue、react-ts、react-swc-ts …）  
      只问框架和语言变体，不会问 Router、状态管理、测试、Lint。

────────────────────────────

生成的目录/文件差异
• create-vue 会额外给你：
src/router/、src/stores/、.eslintrc.cjs、.prettierrc.json、cypress/、vitest.config.ts、.vscode/extensions.json、README.md（带 VueLogo）。

• create-vite（选 vue-ts）只会给你最简的：

      src/main.ts、src/App.vue、src/style.css、vite.config.ts、index.html、tsconfig.json —— 没有 Router、没有         Pinia、没有测试、没有 ESLint。

────────────────────────────

默认依赖
• create-vue：
"dependencies": { vue, vue-router?, pinia? }
"devDependencies": { vite, @vitejs/plugin-vue, eslint, prettier, vitest, cypress }

• create-vite：
"dependencies": { vue }

      "devDependencies": { vite, @vitejs/plugin-vue }

────────────────────────────

适用场景
• 想一步到位得到「可直接写业务」的 Vue3 SPA → 用 npm create vue@latest。
• 想从零开始、自己决定要不要 Router / Pinia / ESLint，或想搭非 Vue 项目 → 用 npm create vite@latest。
• 想学习 Vite 配置、做最小复现 Demo → 用 create-vite 选 Vanilla 或对应框架最简模板最快。

────────────────────────────
一句话总结
create-vue = create-vite 的「Vue 全家桶特供版」。
前者给你「拎包入住」的 Vue3 应用，后者给你「毛坯房」让你自由装修。

cd demo
进入刚生成的项目目录（你之前把项目起名叫 demo）。
npm install
安装 package.json 里列出的所有依赖（vite、vue、router、pinia、eslint…）。这一步会把 node_modules 拉下来，项目才能真正跑起来。
npm run format
运行 Prettier 一键格式化所有代码（src、tests、config 等）。脚手架默认把 Prettier 规则配好了，执行后代码风格立刻统一。
npm run dev
启动 Vite 开发服务器，默认打开 http://localhost:5173，热更新实时预览页面。
git init && git add -A && git commit -m "initial commit"（可选）
在项目里初始化 Git 仓库 → 把所有文件加入暂存区 → 提交第一条提交记录。完成后你就可以正常用 git 做版本管理了。

18.组件

<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

defineProps

defineProps是Vue3的编译时宏函数,用于接收父组件向子组件传递的属性(props) 注：当使用Vue编译器编译包含defineProps的组件时,编译器会将这些宏替换为相应的运行时代码

例如：子组件

const props = defineProps(["propsName","propsUrl"])

父组件：

<!-- 父传子 - 方式1 -->
<Header propsName="邓瑞编程" propsUrl="dengruicode.com" />

子组件：

//接收方式2 - 对象
    /*
    const props = defineProps({
        user: Number,
        ip: String
    })
    */
    const props = defineProps({
        user: Number,
        ip: {
            type: String,
            required: true, //true表示必传属性,若未传则会提示警告信息
            default: 'localhost' //未传默认值
        }
    })

父组件：

//响应式数据
  const propsWeb = reactive({
    user: 10,
    ip: '127.0.0.1'
  })

<!-- 父传子 - 方式2 -->
<!-- <Footer v-bind="propsWeb" /> -->
<Footer :="propsWeb" />

defineEmits

defineEmits是Vue3的编译时宏函数,用于子组件向父组件发送自定义事件
例如：

子组件：

<script setup>
//子传父
    //定义一个名为 emits 的对象, 用于存储自定义事件
    const emits = defineEmits(["web","user"])
    //发送名为 web的自定义事件
    emits("web", {name:"邓瑞",url:"www.dengruicode.com"})
    
    //添加用户
    const userAdd = () => {
        //发送名为 user 的自定义事件
        emits("user", 10)
    }
</script>

<template>
    <h3>Header</h3>

    <button @click="userAdd">添加用户</button>
</template>

父组件：

<script setup>
//响应式数据
  const web = reactive({
    name: "邓瑞编程",
    url: 'dengruicode.com'
  })

  const user = ref(0)

  //子传父
  const emitsWeb = (data) => {
    console.log("emitsWeb:",data)
    web.url = data.url
  }

  const emitsUser = (data) => {
    console.log("emitsUser:",data)
    user.value += data
  }
</script>

<template>
  <!-- 子传父 -->
  <Header @web="emitsWeb" @user="emitsUser" />

  {{ web.url }} - {{ user }}
</template>

slot

插槽

<template>
  <div class="alert-box">
    <strong>Error!</strong>
    <br/>
    <slot />
  </div>
</template>

<AlertBox>
  Something bad happened.
</AlertBox>

使用 <slot> 作为一个占位符，父组件传递进来的内容就会渲染在这里

19.axios

下面给出一份「axios 在 2025 年 Vue 项目中的常用套路清单」——从安装、全局配置到各种业务场景，全部带可复制代码块。直接按场景 Ctrl + C / Ctrl + V 即可。

────────────────────

安装 & 全局挂载
────────────────────

npm i axios

Vue3 官方不再推荐把 axios 挂到 app.config.globalProperties，而是独立文件导出实例，方便 Tree-Shaking 和类型推导。

────────────────────

创建统一实例（src/utils/request.js）
────────────────────

import axios from 'axios'
import { ElMessage } from 'element-plus'   // UI 提示库示例

const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE,  // 读取 .env 里的域名
  timeout: 10000,                          // 10 秒超时
  headers: { 'Content-Type': 'application/json' }
})

// 请求拦截器：统一携带 token
request.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  error => Promise.reject(error)
)

// 响应拦截器：统一错误提示 + 数据剥离
request.interceptors.response.use(
  response => response.data,               // 直接返回业务数据
  error => {
    const msg = error.response?.data?.message || '网络错误'
    ElMessage.error(msg)
    return Promise.reject(error)           // 继续抛出，让组件 catch
  }
)

export default request

────────────────────

在组件/Store 里四种常见调用
────────────────────
① 查询（GET）

import request from '@/utils/request'

// 无参数
const list = await request.get('/articles')

// 带查询参数 → ?page=1&size=10
const list2 = await request.get('/articles', { params: { page: 1, size: 10 } })

② 提交（POST）

await request.post('/login', { username, password })

③ 上传文件（POST + FormData）

const fd = new FormData()
fd.append('file', file.raw)
const { url } = await request.post('/upload', fd, {
  headers: { 'Content-Type': 'multipart/form-data' }
})

④ 并发请求（等待全部完成）

const [user, order] = await Promise.all([
  request.get('/user/1'),
  request.get('/order/100')
])

────────────────────

统一错误码处理（可选）
────────────────────
在响应拦截器里加 switch：

switch (error.response?.status) {
  case 401:
    router.push('/login')
    break
  case 403:
    ElMessage.warning('无权限')
    break
  case 500:
    ElMessage.error('服务器异常')
    break
}

────────────────────

TypeScript 类型提示（src/types/request.d.ts）
────────────────────

declare module '@/utils/request' {
  import { AxiosInstance } from 'axios'
  const request: AxiosInstance
  export default request
}

────────────────────

常见业务场景速查
────────────────────

场景	一行代码示例
下载文件	`await request({ url: '/download', method: 'get', responseType: 'blob' })`
带进度条上传	`onUploadProgress: e => setProgress(Math.round(e.loaded * 100 / e.total))`
取消请求	`const source = axios.CancelToken.source(); source.cancel()`
微前端子应用	把 `baseURL` 设成 `window.__POWERED_BY_QIANKUN__ ? '/child-api' : '/api'`

────────────────────

一句话总结

axios 负责「发请求 + 拦截器 + 错误处理」。
在 Vue 中写成「统一实例 + async/await」即可覆盖 99 % 场景。

Vue学习

https://yufornote.xyz/index.php/archives/9/

本文作者 yu

发布时间 2025-08-12

许可协议 CC BY-NC-SA 4.0

已有 80 条评论

寻找华纳圣淘沙公司开户代理（183-8890-9465薇-STS5099】
华纳圣淘沙官方合作开户渠道（183-8890-9465薇-STS5099】
华纳圣淘沙公司开户代理服务（183-8890-9465薇-STS5099】
华纳圣淘沙公司开户咨询热线（183-8890-9465薇-STS5099】
联系客服了解华纳圣淘沙开户
（183-8890-9465薇-STS5099】
华纳圣淘沙公司开户专属顾问
（183-8890-9465薇-STS5099】

鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 22nd, 2025 at 12:33 am 回复
In addition, a generous introductory bonus. new users to sign up and experience everything available. are significant for a successful start in the online gaming arena.
also stands out of this gaming site. Participants have the option to connect, electronic mail, or phone. The speed of their responses, ensuring players can address concerns without delay. a commitment to customer satisfaction.
Finally, focuses on. Using, players can feel safe while enjoying their gaming experience. provides in the entire game selection, building trust in the online casino industry.
888startz [url=https://888starz-bettings.com/fr/]888startz[/url]

888starz_blKi December 8th, 2025 at 05:23 am 回复
Для доступа к услугам букмекерской конторы или казино [url=https://melbetcomzerkalo.ru]бк мелбет[/url] можно воспользоваться официальным зеркалом, которое предлагает доступ к ставкам на спорт и широкому спектру казино-игр.
известный букмекерский сайт с широким выбором событий . Melbet предлагает широкий спектр вариантов для беттеров с разными интересами . Благодаря функциональному дизайну и интуитивно понятному меню , даже новые пользователи могут легко ориентироваться на сайте .
casino slot games [url=http://www.melbetcomzerkalo.ru/]https://melbetcomzerkalo.ru/[/url]

melbet_ltmt December 27th, 2025 at 02:34 am 回复
هناك الكثير من الناس يلعبون عليها اليوم، وهم يعتبرونها منصة رياضية جيدة جدًا، حيث يمكنهم اللعب بكل أمان. betfinal تعتبر منصة رياضية متطورة للغاية
تعتبر منصة رياضية متقدمة جدًا، حيث يمكن لللاعبين اللعب بكل يسر، حيث يتم توفير جميع الخدمات اللازمة لهم.
تعتبر منصة رياضية متعددة الخدمات، حيث يمكن لللاعبين اللعب بكل متعة، حيث يتم توفير جميع الإمكانيات اللازمة لهم.
betfinal sports [url=https://www.kulaistechnopower.com/]https://kulaistechnopower.com/[/url]

betfinal_wiKi December 29th, 2025 at 06:33 pm 回复
The 888starz platform provides an exciting experience for users, with its user-friendly interface and diverse gaming portfolio . The 888starz app can be found by searching for "888starz" in the App Store search bar, and then clicking on the "Get" button to initiate the download . Once the app is installed, users can create an account or log in to an existing one, and start exploring the various games and betting options available .
The 888starz app is designed to provide a seamless gaming experience, with its intuitive interface and fast loading times . To ensure a smooth gaming experience, the 888starz app is regularly updated with new features and improvements . The app's games are designed to be played on a variety of devices, including smartphones and tablets .
8888 starz [url=https://friendscables.com.pk/index.php/2025/12/11/stmt-blb-fy-str-888-lkzynw-llktrwny-mn-khll-lntrnt-fy-msr]https://friendscables.com.pk/index.php/2025/12/11/stmt-blb-fy-str-888-lkzynw-llktrwny-mn-khll-lntrnt-fy-msr/[/url]

888starz_zmpa January 1st, 2026 at 06:56 pm 回复
e un fenomeno che sta diventando sempre piu popolare tra i giovani di oggi. La vita moderna e segnata da una costante ricerca di equilibrio e di armonia. In questo contesto, il "crazy time" e considerato un periodo di relax e di divertimento .
La societa odierna e caratterizzata da una grande velocita e da una costante connessione . In questo scenario, il "crazy time" e un modo per sfuggire alla routine e alla monotonia . I giovani di oggi sono desiderosi di esplorare nuovi orizzonti e di scoprire se stessi.
crazy time prova [url=https://indianhandicraftitems.com/crazy-time-live-casino-online-italia-crazy-time-demo-gratis/]https://indianhandicraftitems.com/crazy-time-live-casino-online-italia-crazy-time-demo-gratis/[/url]

crazy_qmSa January 17th, 2026 at 10:13 pm 回复
Bahigo ist ein fuhrendes Online-Casino, das fur seine Fairness und Sicherheit bekannt ist. Das Casino bietet eine Vielzahl von Spielen, darunter Roulette, Blackjack und Poker . Die Spieler konnen ihre Lieblingsspiele spielen und dabei ihre Chancen auf einen Gewinn erhohen .
Bahigo bietet eine Vielzahl von Spielen, die auf verschiedene Plattformen wie Desktop und Mobile zuganglich sind. Die Spieler konnen sich auf eine unterhaltsame und spannende Erfahrung freuen, wenn sie bei Bahigo spielen. Das Casino bietet eine umfangreiche Auswahl an Zahlungsmethoden, die den Spielern helfen, ihre Einzahlungen und Auszahlungen zu verwalten.
bahigo 92 [url=https://zuluandthezulus.com/index.php/2025/12/11/bahigo-schweizer-online-sportwetten-und-casino-auf-einer-klar-strukturierten-seite/]https://zuluandthezulus.com/index.php/2025/12/11/bahigo-schweizer-online-sportwetten-und-casino-auf-einer-klar-strukturierten-seite/[/url]bahigo login [url=http://www.agrogradnjacompany.com/bahigo-sportwetten-schweiz-sichere-seite-mit-bonus-casino-spielen-und-ubersicht/]http://agrogradnjacompany.com/bahigo-sportwetten-schweiz-sichere-seite-mit-bonus-casino-spielen-und-ubersicht/[/url]

bahigo_gkma January 20th, 2026 at 11:04 pm 回复
1. нужна люстра деревянная люстра
  
  derevyannye lyustry 72 January 27th, 2026 at 09:47 pm 回复
2. мужские костюмы недорого купить мужские костюмы
  
  muzhskie kostyumy spb 22 January 27th, 2026 at 10:18 pm 回复
3. Украшения для пирсинга https://piercing-opt.ru купить оптом украшения для пирсинга. Напрямую от производителя, выгодные цены, доставка. Отличное качество.
  
  piercing-opt 15 January 28th, 2026 at 03:56 pm 回复
4. Ищешь сокращатель сылок? https://l1l.kz надежный сокращатель ссылок в Казахстане, рекомендуем заглянуть на сайт, где весь функционал доступен бесплатно и без регистрации
  
  Ronalddab January 28th, 2026 at 10:46 pm 回复
  1. Для доступа к кракен сайт используйте официальные onion ссылки из списка
    
    NelsonBep February 2nd, 2026 at 08:02 pm 回复
  2. дизайн прихожей в доме дизайн интерьеров домов коттеджей
    
    WilliamSealp February 4th, 2026 at 05:56 pm 回复
  3. дизайн квартир м дизайн двухкомнатной квартиры
    
    Carloscevox February 5th, 2026 at 10:32 am 回复
5. Противопожарные двери https://bastion52.ru купить для защиты помещений от огня и дыма. Большой выбор моделей, классы огнестойкости EI30, EI60, EI90, качественная фурнитура и соответствие действующим стандартам.
  
  bastion 75 January 29th, 2026 at 12:07 am 回复
  1. Чтобы зайти на кракен даркнет нужен Tor браузер с актуальной версией
    
    NelsonBep February 2nd, 2026 at 08:09 pm 回复
  2. дизайн ванны в квартире проект дизайна 2 комнатной
    
    Carloscevox February 5th, 2026 at 10:38 am 回复
6. Нужны цветы? купить цветы недорого закажите цветы с доставкой на дом или в офис. Большой выбор букетов, свежие цветы, стильное оформление и точная доставка. Подойдёт для праздников, сюрпризов и важных событий.
  
  buy-flowers January 29th, 2026 at 01:15 am 回复
  1. Нужна курсовая? купить курсовую Подготовка работ по заданию, методическим указаниям и теме преподавателя. Сроки, правки и сопровождение до сдачи включены.
    
    MarioClump February 1st, 2026 at 10:01 am 回复
  2. Для прибирання cleaninglviv.top окей
    
    Anthonyskync February 3rd, 2026 at 02:27 pm 回复
7. O'zbekiston uchun https://uzresearch.uz iqtisodiyot, moliya, ijtimoiy jarayonlar, bozorlar va mintaqaviy rivojlanish kabi asosiy sohalarda tadqiqotlar olib boradigan analitik platforma. Strukturaviy ma'lumotlar va professional tahlil.
  
  AgustinRig January 29th, 2026 at 01:29 am 回复
  1. заклепка вытяжная 2.4 заклепка вытяжная нержавейка
    
    vytyazhnye zaklepki 47 February 2nd, 2026 at 08:43 am 回复
  2. Месяц назад перешёл на кракен даркнет маркет после закрытия старой площадки
    
    NelsonBep February 2nd, 2026 at 07:59 pm 回复
  3. стили дизайна квартир дизайн двухкомнатной квартиры 50 кв м
    
    Carloscevox February 5th, 2026 at 10:29 am 回复
8. Savdo va biznes https://infinitytrade.uz uchun xalqaro platforma. Bozor tahlili, xalqaro savdo, eksport va import, logistika, moliya va biznes yangiliklari. Tadbirkorlar va kompaniyalar uchun foydali materiallar, sharhlar va ma'lumotlar.
  
  Williamtriar January 29th, 2026 at 02:39 am 回复
9. Ijtimoiy rivojlanish https://ijtimoiy.uz va jamoat hayoti uchun portal. Yangiliklar, tahlillar, tashabbuslar, loyihalar va ekspert fikrlari. Ijtimoiy jarayonlar, fuqarolik ishtiroki, ta'lim va jamiyatni rivojlantirish bo'yicha materiallar.
  
  Thomasloale January 29th, 2026 at 02:48 am 回复
  1. Нужна топливная карта? топливная карта для юридических лиц удобный контроль расходов на ГСМ, безналичная оплата топлива, отчетность для бухгалтерии и снижение затрат автопарка. Подключение по договору, выгодные условия для бизнеса.
    
    DavidTuddy January 31st, 2026 at 01:29 pm 回复
  2. Хочешь контролировать ГСМ топливная карта для юридических лиц экономия на топливе, контроль заправок, детальная аналитика и закрывающие документы. Решение для компаний с собственным или арендованным автопарком.
    
    RamiroMut January 31st, 2026 at 01:32 pm 回复
  3. Топливный контроль https://avtomateriali.ru эффективное решение для бизнеса с транспортом. Безналичная заправка, учет топлива, детальные отчеты и удобное управление расходами по каждому автомобилю.
    
    MosesBor January 31st, 2026 at 03:21 pm 回复
  4. Контроль топлива https://ztm74.ru удобный способ учета и оплаты топлива без наличных. Контроль заправок, лимиты по авто и водителям, отчетность для бухгалтерии и снижение затрат на содержание автопарка.
    
    Migueloberi January 31st, 2026 at 03:21 pm 回复
  5. Топливные карты для юр лиц https://mazdacenter.ru контроль топлива, прозрачная отчетность, удобство для бухгалтерии и безопасность расчетов. Экономия времени и средств при управлении корпоративным транспортом.
    
    Bernardwisse January 31st, 2026 at 05:00 pm 回复
  6. Онлайн-казино Mostbet — слоты, настольные игры и live-дилеры в одном аккаунте. Удобные депозиты, оперативный вывод средств, бонусные предложения и игра с любого устройства.
    
    Rogerder January 31st, 2026 at 05:01 pm 回复
  7. Only the best is here: https://hedge.fachschaft.informatik.uni-kl.de/s/y6zcap0ay
    
    RogerArilm January 31st, 2026 at 06:25 pm 回复
  8. Extended Review: check that
    
    Stephenshomi January 31st, 2026 at 06:28 pm 回复
  9. A sports portal https://sbs-sport.com.az with breaking news, statistics, and expert commentary. Match schedules, transfers, interviews, and competition results are available in real time.
    
    SilasNeisk January 31st, 2026 at 09:00 pm 回复
  10. Live match sporx com az results, the latest sports news, transfers, and today's TV schedule. Live updates, key events, and all sports information in one portal.
    
    Kelvintoult January 31st, 2026 at 09:01 pm 回复
  11. Учишься в МТИ? мти помощь студентам: консультации, разъяснение сложных тем, подготовка к тестированию и экзаменам. Удобный формат, быстрые ответы и поддержка на всех этапах обучения.
    
    akademprofi-15 January 31st, 2026 at 11:14 pm 回复
  12. Zinedine Zidane https://zidan.com.az biography, football career, achievements, and coaching successes. Details on his matches, titles, the French national team, and his time at the top clubs in world football.
    
    CalvinGussy February 1st, 2026 at 01:48 am 回复
  13. Авиабилеты по низким ценам https://tutvot.com посуточная аренда квартир, вакансии без опыта работы и займы онлайн. Актуальные предложения, простой поиск и удобный выбор решений для путешествий, работы и финансов.
    
    Edgarglita February 1st, 2026 at 01:48 pm 回复
  14. вытяжная заклепка м8 заклепка вытяжная алюминиевая купить
    
    vytyazhnye zaklepki 31 February 2nd, 2026 at 08:42 am 回复
  15. На странице размещён kraken официальный сайт с полным каталогом товаров
    
    NelsonBep February 2nd, 2026 at 07:58 pm 回复
  16. Нужна топлевная крата? https://oilguru.ru: заправка на сетевых АЗС, единый счет, прозрачный учет топлива и онлайн-контроль расходов. Удобное решение для компаний с собственным автопарком.
    
    Josephhip February 3rd, 2026 at 12:14 am 回复
  17. Русские подарки купить в интернет-магазине Москвы: сувениры, ремесленные изделия и подарочные наборы с национальным колоритом. Идеальные решения для праздников, гостей и корпоративных подарков.
    
    Ronaldbef February 3rd, 2026 at 02:00 am 回复
  18. Read more on the website: мульти-таймфреймная стратегия в крипте: как торговать системно
    
    Georgeapape February 3rd, 2026 at 03:38 am 回复
  19. Коли без часу https://cleaninglviv.top/ виручає
    
    Anthonyskync February 3rd, 2026 at 02:27 pm 回复
  20. ДВС и КПП https://vavtomotor.ru автозапчасти для автомобилей с гарантией и проверенным состоянием. В наличии двигатели и коробки передач для популярных марок, подбор по VIN, быстрая доставка и выгодные цены.
    
    Bryandon February 3rd, 2026 at 06:39 pm 回复
  21. Top Stories: https://www.design-sites.ru/utility/social-popularity.php?pageurl=http://selioftrust.com
    
    JasonAnype February 4th, 2026 at 04:42 am 回复
  22. дизайн окон дома дизайн коттеджа
    
    WilliamSealp February 4th, 2026 at 05:54 pm 回复
  23. Do you do music? note reading worksheets for children and aspiring musicians. Educational materials, activities, and creative coloring pages to develop ear training, rhythm, and an interest in music.
    
    Douglascup February 4th, 2026 at 09:58 pm 回复
  24. накрутка ботов тикток накрутка подписчиков телеграм
    
    Robertglype February 5th, 2026 at 02:45 am 回复
  25. дизайн проект квартиры дизайн двухкомнатной квартиры 52 кв
    
    Carloscevox February 5th, 2026 at 10:28 am 回复
10. Foydali maslahatlar https://grillades.uz va g'oyalar bilan panjara va barbekyu haqida loyiha. Retseptlar, panjara qilish texnikasi va jihozlar va aksessuarlarni tanlash. Mukammal ta'm va muvaffaqiyatli ochiq havoda uchrashuvlar uchun hamma narsa.
  
  KevinLen January 29th, 2026 at 04:01 am 回复
  1. Советую всем кракен анонимный маркетплейс для безопасных покупок с escrow защитой
    
    NelsonBep February 2nd, 2026 at 08:00 pm 回复
  2. дизайны комнат в квартире дизайн проект двухкомнатной квартиры
    
    Carloscevox February 5th, 2026 at 10:30 am 回复
11. Qurilish materiallari https://emtb.uz turar-joy va sanoat qurilishi uchun beton va temir-beton. Poydevorlar, pollar va inshootlar uchun ishonchli yechimlar, standartlarga muvofiqlik, izchil sifat va loyihaga xos yetkazib berish.
  
  Richardasype January 29th, 2026 at 04:03 am 回复
  1. заклепка вытяжная 4 8 заклепка вытяжная глухая
    
    vytyazhnye zaklepki 36 February 2nd, 2026 at 08:47 am 回复
  2. Для доступа к кракен сайт используйте официальные onion ссылки из списка
    
    NelsonBep February 2nd, 2026 at 08:05 pm 回复
  3. дизайн 3 квартиры дизайн квартиры 58 кв м двухкомнатной
    
    Carloscevox February 5th, 2026 at 10:34 am 回复
12. Ijtimoiy jarayonlar https://qqatx.uz va jamiyat taraqqiyoti bo'yicha onlayn axborot platformasi. Tegishli materiallar, tahliliy sharhlar, tadqiqotlar va murakkab mavzularning tushuntirishlari aniq va tuzilgan formatda.
  
  Douglasbek January 29th, 2026 at 05:25 am 回复
13. Любишь азарт? обзор казино kometa casino современные слоты, live-форматы, понятные правила и удобный доступ с ПК и смартфонов. Играйте онлайн в удобное время.
  
  kometa casino 83 January 29th, 2026 at 06:22 am 回复
  1. коттедж дизайн фасада современный дизайн коттеджей
    
    WilliamSealp February 4th, 2026 at 05:57 pm 回复
  2. дизайн 3 квартиры дизайн двухкомнатной квартиры
    
    Carloscevox February 5th, 2026 at 10:36 am 回复
14. Играешь в казино? upx Слоты, рулетка, покер и live-дилеры, простой интерфейс, стабильная работа сайта и возможность играть онлайн без сложных настроек.
  
  JamesGub January 29th, 2026 at 10:34 am 回复
15. Spiele Spa? Columbus Deluxe Slot Erfahrung in einer aufregenden Welt voller Chancen und Unterhaltung, wo Sie mit jedem Spin die Moglichkeit auf gro?e Gewinne haben. Online Casinos bieten eine abwechslungsreiche Auswahl an Spielen, die von klassischen Slots bis hin zu aufregenden Live-Dealer-Erlebnissen reichen. Tauchen Sie ein und genie?en Sie die Spannung!
  
  Russelsnurn January 30th, 2026 at 05:33 pm 回复
16. Русские подарки и сувениры купить в широком ассортименте. Классические и современные изделия, национальные символы, качественные материалы и оригинальные идеи для памятных и душевных подарков.
  
  Shanehoump January 30th, 2026 at 08:58 pm 回复
17. Нужно казино? up-x современные игры, простой вход, понятный интерфейс и стабильная работа платформы. Играйте с компьютера и мобильных устройств в любое время без лишних сложностей.
  
  up-x casino 89 January 31st, 2026 at 02:56 am 回复
18. магазин ремней ремни.рф оригинальные модели из натуральной кожи для мужчин и женщин. Классические и современные дизайны, высокое качество материалов, аккуратная фурнитура и удобный выбор для любого стиля.
  
  Jasonskery January 31st, 2026 at 04:55 am 回复
19. Самые качественные https://bliny-olimpiiskie.ru широкий выбор весов и форматов. Надёжные материалы, удобная посадка на гриф, долговечное покрытие. Подходят для фитнеса, пауэрлифтинга и регулярных тренировок.
  
  bliny olimpiiskie 63 January 31st, 2026 at 08:35 am 回复
20. заклепка вытяжная исо заклепка алюм вытяжная
  
  vytyazhnye zaklepki 21 February 2nd, 2026 at 10:32 am 回复
21. Сегодня проверил кракен зеркало и всё загрузилось за пару секунд
  
  NelsonBep February 2nd, 2026 at 09:56 pm 回复
22. дизайн комнат в доме современный дизайн коттеджей
  
  WilliamSealp February 4th, 2026 at 07:43 pm 回复
23. дизайн квартиры студии дизайн двухкомнатной квартиры 52 кв м
  
  Carloscevox February 5th, 2026 at 12:28 pm 回复
jest to znane kasyno internetowe z bogata oferta gier hazardowych . Gracze moga korzystac z roznorodnych opcji gier, od klasykow po nowe wydania . Vulkan Spiele Casino zapewnia graczom wygodne i bezpieczne srodowisko do gry .
Gra w Vulkan Spiele Casino umozliwia graczom wygrana prawdziwych nagrod i udzial w turniejach . Gracze moga grac w gry na urzadzeniach mobilnych, aby miec dostep do gier o kazdej porze. Vulkan Spiele Casino oferuje graczom dostep do szerokiej gamy gier od najlepszych dostawcow .
vulkan spiele 70 darmowych obrot?w [url=https://www.vulkanpoland.com/no-deposit-bonus]https://vulkanpoland.com/no-deposit-bonus/[/url]

vulkan_hsOt January 22nd, 2026 at 10:03 am 回复
Для качественного линкбилдинга важна база трастовых сайтов для xrumer https://www.olx.ua/d/uk/obyavlenie/progon-hrumerom-dr-50-po-ahrefs-uvelichu-reyting-domena-IDXnHrG.html, так как ссылки с таких ресурсов ценятся выше.

RobertSub January 23rd, 2026 at 03:14 am 回复
Il gioco Crazy Time e diventato molto popolare in Italia negli ultimi anni . Questo gioco e caratterizzato da una combinazione unica di elementi di gioco d'azzardo e di intrattenimento Il Crazy Time e un gioco che combina azione e divertimento. La sua popolarita e dovuta anche alla sua disponibilita online La sua popolarita e dovuta anche alla sua disponibilita online .
crazy time tracker [url=http://crazytimeit.com/]https://crazytimeit.com/[/url]

crazy_lmmr January 30th, 2026 at 07:55 am 回复
يُعد betfinal واحدًا من الأفضل المواقع الرياضية في العالم . يحتوي هذا الموقع على العديد من المزايا التي تجعله خيارًا مثاليًا للمستخدمين. يحتوي betfinal على تصميم حديث وشيك يسهل الملاحة . يمكن للمستخدمين الوصول إلى العديد من الألعاب والأنشطة الرياضية المختلفة .
يتميز betfinal بتقديم خدمات عالية الجودة وأداء ممتاز . يُقدم betfinal خدمات متنوعة لل رهان. تتميز الخدمات التي يقدمها betfinal بالدقة والإحترافية .
betfinal casino [url=betfinalll.com]https://betfinalll.com/[/url]

betfinal_rosr January 30th, 2026 at 10:43 am 回复
Vulkan Vegas NZ has become a household name in the online gaming industry with its extensive collection of games . The casino has a user-friendly interface that makes it easy for players to navigate and find their favorite games. The casino's game library includes slots, table games, and live dealer games, providing something for every type of player . Additionally, the casino offers a variety of payment options, making it convenient for players to deposit and withdraw funds.
vulkan vegas promo code free spins [url=https://vulkan-vegas-nz.com/no-deposit-bonus/]vulkan vegas promo code free spins[/url]

vulkan_lzpi January 30th, 2026 at 09:18 pm 回复
يُقدم موقع betfinal فرصًا عديدة لمراهنات الرياضة. يمكن للمستخدمين الاستمتاع بتجربة متنوعة من المراهنات على مختلف الألعاب الرياضية . حيث يمكنهم také الاستمتاع بتجربة لعب الكازينو.
يمكنهم أيضاً الوصول إلى مجموعة متنوعة من الخدمات. يتمتع موقع betfinal بسمعة طيبة في مجال المراهنات الرياضية . حيث يمكنهم أيضاً الوصول إلى خدمات دعم فني ممتازة.
يمكن للمستخدمين الاستفادة من عروض ومزايا خاصة . حيث يمكنهم الاستفادة من عروض ومزايا خاصة . حيث يقدم خدمات عالية الجودة .
يمكنهم أيضاً الاستفادة من مجموعة متنوعة من الخدمات . يُعتبر موقع betfinal خيارًا رائعًا لجميع عشاق المراهنات الرياضية . حيث يمكنهم أيضاً الوصول إلى خدمات دعم فني ممتازة.
يمكن للمستخدمين الاستمتاع بسهولة الوصول إلى موقع betfinal . يُعتبر موقع betfinal خيارًا رائعًا لجميع عشاق المراهنات الرياضية . موقع betfinal يُعتبر خيارًا مثاليًا للمراهنين الرياضيين .
كازينو بت فاينل [url=http://www.marsdbh.com/]https://marsdbh.com/[/url]

betfinal_fvol February 3rd, 2026 at 06:33 pm 回复
منصة 888starz معروفة بمنحها للجوائز الكبيرة . يمكن لل玩idores دفع أموالهم بسهولة وبدون أي مشاكل . يمكن لل玩idores Anastasia أن يلعبوا بألعاب البوكر على منصة 888starz.المنصة توفر نظام دفع آمن وسهل الاستخدام .
888starz مهكر [url=https://www.888starz-egypteg.com/apk/]https://888starz-egypteg.com/apk/[/url]

888starz_zzPr February 4th, 2026 at 06:21 pm 回复
kasyno, ktore oferuje najwiekszy wybor gier dla polskich graczy. Oferuje ono szeroki wybor gier kasynowych . Vulkan Spiele Casino PL to kasyno, ktore gwarantuje uczciwosc gier.
Vulkan Spiele Casino PL to kasyno, ktore dziala zgodnie z przepisami prawa . Oferuje ono wiele roznych metod platnosci . Vulkan Spiele Casino PL to kasyno, ktore gwarantuje profesjonalna obsluge.
vulkan spiele kod bez depozytu [url=https://vulkanpolska.com/no-deposit-bonus/]https://vulkanpolska.com/no-deposit-bonus/[/url]

vulkan_imka February 5th, 2026 at 03:58 pm 回复

取消回复

发表新评论