学习Vue及项目工程化

最新推荐文章于 2024-05-19 20:18:26 发布
最新推荐文章于 2024-05-19 20:18:26 发布
阅读量1.2k 收藏 22
点赞数 25
分类专栏： Vue 文章标签： vue.js 学习 javascript 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61689418/article/details/135335442
版权

学习Vue及项目工程化

Vue

构建用户界面的渐进式框架
在这里插入图片描述

快速上手

创建一个Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Document</title>
</head>
<body>

    <div class="box2">
        {{msg}}
    </div>

    <div class="box">
        {{count}}
    </div>

    <div id="app">
        <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
        <h1>{{msg}}</h1>
        <a href="#">{{count}}</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <script>
        //一旦引入VueJS核心包，在全局环境，就依赖Vue构造函数
        const app = new Vue({
            // 通过el配置选择器，指定Vue管理的是哪个盒子
            el: '#app',
            // 通过data提供数据
            data: {
                msg: 'Hello World',
                count: 666
            }
        })

    </script>

</body> 
</html>

插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Document</title>
</head>
<body>

    <div id="app">
        <p>{{nickname}}</p>
        <p>{{nickname.toUpperCase()}}</p>
        <p>{{nickname + '你好'}}</p>
        <p>{{age >= 18 ? '成年' : '未成年'}}</p>
        <p>{{friend.name}}</p>
        <p>{{friend.desc}}</p>

        //不能使用
        <!-- <p title="{{nickname}}">我是p标签</p> -->

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'jepson',
                    desc:'热爱学习Vue'
                }
            }
        })

    </script>





</body> 
</html>

Vue基本命令

v-html

在这里插入图片描述

v-show

v-show和v-if都可以做隐藏：
v-show主要用于频繁切换的地方，如购物车显示
v-if主要用于不频繁切换，如弹窗提示
在这里插入图片描述

v-if 和 v-else 和 v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Document</title>
</head>
<body>

    <!-- 
        v-show底层原理：切换css的display：one 来控制显示隐藏
        v-if底层原理：根据判断条件控制元素创建和移除（条件渲染）
    -->

    <div id="app">
        <div v-html="msg"></div>  <!-- v-html解析特殊标签 -->

        <div v-show="flag" class="box">v-show控制</div>
        <div v-if="flag" class="box">v-if控制</div>


        <p v-if="gender === 1">性别：男</p>
        <p v-else>性别：女</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 
                   '<a href="https://www.baidu.com" target="_blank">百度一下</a>',
                flag: false,
                gender: 2
            }
        })

    </script>
</body> 
</html>

v-on和@click函数调用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Document</title>
</head>
<body>

    <div id="app">
        <button v-on:click="count--">-</button>
        <span>{{ count }}</span>
        <button v-on:click="count++">+</button>

        <br>
        <br>
        <button @click="fn">切换显示隐形</button>
        <h1 v-show="isShow">程序员</h1>

        <div class="box">
            <h3>小王自动贩卖机</h3>
            <button @click="buy(5)">可乐5元</button>
            <button @click="buy(10)">咖啡10元</button>
        </div>
        <p>银行卡余额：{{ money }}元</p>  

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 100,
                isShow: true,
                money: 1000
            },
            methods: {
                fn() {
                    console.log('切换显示')
                    app.isShow = !app.isShow
                },
                buy (price) {
                    console.log('扣费')
                    this.money -= price
                }
            }
        })

    </script>

</body> 
</html>

v-bind

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Document</title>
</head>
<body>

    <div id="app">
        <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
        <img :src="imgUrl" :title="msg" alt=""> <!-- 简写 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgUrl: './imgs/maven.jpg',
                msg: 'Maven Logo'
            }
        })
    </script>

</body> 
</html>

v-for

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h3>小王水果店</h3>
        <ul>
            <li v-for="(item, index) in list">
                {{ item }} - {{ index }}
            </li>
        </ul>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: ['西瓜','苹果','鸭梨','榴莲']
            }
        })
    </script>

</body> 
</html>

案例–书架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h3>小王的书架</h3>
        <ul>
            <!-- key给列表项添加唯一标识。便于Vue进行正确排序复用 -->
            <li v-for="(item, index) in booksList" ::key="item.id">
                <span>{{ item.name }}</span>
                <span>{{ item.author }}</span>
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                booksList: [
                    {id: 1, name: '《红楼梦》', author: '曹雪芹'},
                    {id: 2, name: '《西游记》', author: '吴承恩'},
                    {id: 3, name: '《三国演义》', author: '罗贯中'},
                    {id: 4, name: '《水浒传》', author: '施耐庵'}
                ]
            },
            methods: {
                del (id) {
                    //fillter不会删除原数组会把结果保存在新数组里，所以我们要把原数组重新赋值
                    this.booksList = this.booksList.filter(item => item.id !== id)
                }
            },
        })
    </script>

</body> 
</html>

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- v-model 数据和视图双向数据绑定 -->
        账号：<input type="text" v-model="username"> <br><br>
        密码：<input type="password" v-model="password"> <br><br>
        <button @click="login">登录</button>
        <button @click="reset">重置</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: ''
            },
            methods: {
                login () {
                    console.log('登录');
                    console.log(this.username);
                    console.log(this.password);
                },
                reset () {
                    console.log('重置');
                    this.username = '';
                    this.password = '';
            }
        }
        })
    </script>

</body> 
</html>

功能总结

在这里插入图片描述

综合案例-小黑记事本

列表渲染

删除功能

添加功能

底部统计

清空

项目工程化

更换npm镜像

设置镜像源：npm config set registry https://registry.npmmirror.com

查看当前使用的镜像地址：npm config get registry

方式一：在网页是去创建

在命令行中，执行如下指令：

vue ui

方式二：在命令行里创建

在命令行中，执行如下指令：

npm init vue@latest

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

案例：文章搜索

在这里插入图片描述

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

Api.vue

<!-- <script>
export default {
    data() {
        return {
            message: 'Hello, Vue 3!'
        }
    }
  }
</script> -->

<script setup>
  import { ref } from 'vue'
  //导入 Api.vue文件
  import ApiVue from './Api.vue'
  //导入 Article.vue文件
  import ArticleVue from './Article.vue'
  import ArticleVue1 from './Article1.vue'

  //调用ref函数，定义响应式数据
  const message = ref('Hello, Vue 3!')



</script>


<template>
  <h1>{{ message }}</h1>
  <!-- 导入并使用 Api.vue组件 -->
  <ApiVue />

  <!-- 导入并使用 Article.vue组件 -->
  <!-- <ArticleVue /> -->

  <!-- 导入并使用 Article1.vue组件 -->
  <ArticleVue1 />


</template>

<style>
  h1 {
    color: blue;
  }
</style>

Article.vue

<script setup>
import { ref } from 'vue'
import axios from 'axios'

//定义响应式数据 ref
const articleList = ref([]);

//发送异步请求，获取所有文章数据
axios.get('http://localhost:8080/product/findByCate?cate_id=1')
  .then(result => {
    // console.log(result.data);
    //把服务器响应的数据保存起来
    articleList.value = result.data.data;
  }).catch(err => {
    console.log(err);
  })

//定义响应式数据 searchConditions
const searchConditions = ref({
  name: ''
})

//定义search函数
const search = () => {
  //发送异步请求，根据条件查询文章数据
  axios.get('http://localhost:8080/product/findName', {
    params: {...searchConditions.value}}).then(result => {
    console.log(result.data);
    //把服务器响应的数据保存起来
    articleList.value = result.data.data;
  }).catch(err => {
    console.log(err);
  })
}

</script>


<template>
  <!-- <div>{{ articleList }}</div> -->
  <div>
    文章标题: <input type="text" v-model="searchConditions.name">
    文章分类: <input type="text" v-model="searchConditions.category">
    发布状态: <input type="text" v-model="searchConditions.state">
    <button v-on:click="search">搜索</button>
    <br />
    <br />
    <table border="1 solid" colspa="0" cellspacing="0">
      <tr>
        <th>文章标题</th>
        <th>分类</th>
        <th>发表时间</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="(article, index) in articleList" :key="index">
        <td>{{ article.name }}</td>
        <td>{{ article.cate_id }}</td>
        <td>{{ article.create_time }}</td>
        <td>{{ article.sales_volume }}</td>
        <td>
          <button>编辑</button>
          <button>删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

优化

接口调用的js代码一般封装在.js文件中，并以函数的形式暴露给外部
article.js
import axios from 'axios'

//获取所有文章数据函数
export async function articleGetAllService() {
    //发送异步请求，获取所有文章数据
    //同步等待服务器响应的结果，并返回，async  await
    return await axios.get('http://localhost:8080/product/findByCate?cate_id=1')
        .then(result => {
            return result.data.data;
        }).catch(err => {
            console.log(err);
        })
}

//获取单个文章数据函数
export async function articleSearchService(conditions) {
    //发送异步请求，根据条件查询文章数据
    return await axios.get('http://localhost:8080/product/findName', {
        params: conditions
    }).then(result => {
        return result.data.data;
    }).catch(err => {
        console.log(err);
    })
}
Article1.vue
<script setup>
import { ref } from 'vue'
import { articleGetAllService, articleSearchService } from '@/api/article.js'; // 导入函数

//定义响应式数据 ref
const articleList = ref([]);

//获取所有文章数据
// let data = articleGetAllService();
// articleList.value = data;
//同步获取articleGetAllService的返回结果  async await
const getAllArticle = async function () {
    let data = await articleGetAllService();
    articleList.value = data;
}
getAllArticle();


//定义响应式数据 searchConditions
const searchConditions = ref({
    name: ''
})

//定义search函数
const search = async function() {
    //文章搜索
    let data = await articleSearchService({...searchConditions.value})
    articleList.value = data;
}


</script>


<template>
    <!-- <div>{{ articleList }}</div> -->
    <div>
        文章标题: <input type="text" v-model="searchConditions.name">
        文章分类: <input type="text" v-model="searchConditions.category">
        发布状态: <input type="text" v-model="searchConditions.state">
        <button v-on:click="search">搜索</button>
        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article, index) in articleList" :key="index">
                <td>{{ article.name }}</td>
                <td>{{ article.cate_id }}</td>
                <td>{{ article.create_time }}</td>
                <td>{{ article.sales_volume }}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
</template>
定义一个变量，记录公共的前缀，baseURL

const baseURL = ‘http://localhost:8080’;
const instance = axios.create({baseURL})

instance.get(‘/product/findByCate?cate_id=1’)

拦截器 request.js

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

request.js
//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL})


//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;
article1.js
/* //导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL}) */

import request from '@/util/request.js'

export async function articleGetAllService() {
    return request.get('/product/findByCate?cate_id=1');

}

export async function articleSearchService(conditions) {
    return request.get('/product/findName', { params: conditions });
}

element

安装

首先查看自己安装vue的版本，输入vue -V

如果自己的vue版本是3.0以上说明需要引入的是element-ui plus而不是element-ui

Vue3

npm install element-plus --save
如果下载的时候还会报错，执行这条指令：npm install element-plus --save --legacy-peer-deps

Vue2

npm install --save element-ui
如果下载的时候还会报错，执行这条指令：npm install element-ui --save --legacy-peer-deps

快速上手

在这里插入图片描述

完整引入

main.js

import Vue from ‘vue’;
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;

Vue.use(ElementUI);

new Vue({
el: ‘#app’,
render: h => h(App)
});

Button.vue
<template>
<el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>
  
  <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
  </el-row>
  
  <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
  </el-row>
  
  <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
  </el-row>
</template>

案例

环境准备

在这里插入图片描述

跨域

在这里插入图片描述

配置代理来解决跨域

在这里插入图片描述

在这里插入图片描述

优化axios响应拦截器

在这里插入图片描述

路由

在这里插入图片描述
在这里插入图片描述

子路由

在这里插入图片描述

Bug：前端没有接收token

Pinia状态管理库

在这里插入图片描述

优化：Axios请求拦截器

在这里插入图片描述

在这里插入图片描述

Bug：刷新时，Pinia数据丢失

persist-Pinia持久化插件

在这里插入图片描述
在这里插入图片描述

未登录处理

在这里插入图片描述

不会写算法的小王
关注
  • 25
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目架构设计与工程化实践
02-24
一套很实用的架构设计通过cli工具生成新项目通过cli工具初始化配置文件编译源码与自动上传CDNMock数据反向检测serverapi接口是否符合预期前段时间我们导航在开发一款新的产品，名叫快言，是一个主题词社区，具体这个...
Vue3工程化项目搭建
这魏先森-forguo
07-16 1910
Vue3工程化项目搭建，从工程化的角度带你来搭建一个vite+vue3+ts的前端项目
Vue项目工程化+路由
PHPer修炼之路
05-13 1586
20220513录屏 3 Vue项目工程化 什么是Vue项目工程化开发？ Vue HTML项目—中小型项目，比如单页、留言板、访客预约、简单的企业网站。 HTML开发的痛点： ​ 在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。 全局定义 (Global ...
【Vue基础】前端工程化Vue项目
qq_42294095的博客
04-16 1000
前端工程化Vue项目、NPM脚本
Vue工程化项目创建-VueCli与Vite
CharliePuthJJ的博客
03-07 1374
在完成了node.js的安装之后，我们就可以正式来创建我们的Vue工程化项目了，我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite，其中VueCli可用于创建vue2与vue3的项目，而Vite是比较新的，它只能创建vue3的工程化项目。以下为大家演示是用VueCli创建vue2还有Vite创建vue3，这也是我学习时所用到的。
前端学习--Vue(3)初始化vue项目
Michelle209的博客
05-19 1895
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
Vue项目组件化工程开发实践方案
11-27
每个组件都有一个单独的组件文件夹，组件文件夹下都至少包含”index.vue”，”example.vue”，”readme.md”这三个文件，这几个文件都是通过创建组件传递的参数加指定的模板生成，创建组件的命令如下： npm run ...
VUE进阶 笔记贰章 前端工程化
12-30
VUE进阶 笔记贰章 前端工程化
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 352
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 836
基于Vue3 + js-tool-big-box的3个随机数字
VueScan Pro中文
最新发布
CSDN专家-微编程的博客
05-19 242
VueScan Pro中文是一款VueScan图像扫描软件,提供色彩平衡和颜色校正功能,适用于6500多台扫描仪,VueScan破解版内置驱动,可以对扫描仪软件反向工程,支持200种以上的底片类型,复杂的白色平衡算法,用于检查物体表面暇疵的红外线底片扫描,成批扫描,自动剪取图像等等,提高扫描仪的扫描速度和工作效率.
vue 使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超一秒时自动切换到对应分区
weixin_45956838的博客
05-17 561
使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超过一秒自动切换到对应分区
javascript-Vue：防抖 (Debouncing)、节流 (Throttling)
阿牛哥的博客
05-16 338
javascript-Vue：防抖 (Debouncing)、节流 (Throttling)
【VueRouter 的基本使用】
2302_76611599的博客
05-17 172
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
Vue工程化,如何启动项目
04-07
要启动Vue工程化项目，您需要执行以下步骤： 1. 打开终端并进入项目目录。 2. 输入以下命令安装依赖项： ``` npm install ``` 3. 安装完成后，输入以下命令启动项目： ``` npm run serve ``` 4. 项目...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值