![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 76
Vue
不大好不大好
这个作者很懒,什么都没留下…
展开
-
【网站】Vue3+ThinkJS搭建个人博客网站
花费了一个多星期,终于把自己的小破站搭建好了。下面是网站首页的截图。网站的前端用的是:Vue3 + Ts + Naive网站的后端用的是:ThinkJS + MySQL网站的在线预览地址是: 非常厉害噻 登录账号:test 登录密码:123前端页面登录页面登录页面做的比较简陋,因为实在是想不出怎么做才好,简简单单才是真。因为算是第一版吧,而且主要是个人和女朋友在用,所以并没有对密码做加密处理,都是明文密码,登录模块也是今天匆忙原创 2022-05-21 19:38:41 · 548 阅读 · 0 评论 -
【Vue】手写一个轮播图组件
先上效果图完整代码<script setup lang="ts">import {ref, defineProps} from "vue";// 定义组件属性const props = defineProps({ list: { // 要轮播的图片的数组 type: Array as () => Array<Object>, required: true, default: () => { return [] }原创 2022-05-15 00:45:21 · 1322 阅读 · 0 评论 -
【Vue】动动小手就能让你拥有属于自己的“平板“
效果预览图第一步 新建项目先创建一个新项目 web-phone,然后安装 vue-router,路由是一定要安装的,因为我们要通过路由来实现应用切换。第二步 配置路由首先我们要新建一个路由组件 PhoneContainer 然后在这个组件的页面,有个 Box 组件,这个 Box 组件里面呢则装着一个 Phone 组件。根据上面的描述,我们需要创建3个 .vue 文件,然后路由组件放在 pages 目录,非路由组件放在 components 目录,然后,我们在 router 目录下的 index原创 2022-05-07 15:49:40 · 315 阅读 · 0 评论 -
【Vue】引入Echarts出错
使用下面的命令安装Echartsnpm install echarts --save在 main.js 中引入,并将其挂载到Vue原型上import echarts from 'echarts'Vue.prototype.$echarts = echarts然后编译时出现如下警告解决方法在 main.js 中引入,并将其挂载到Vue原型上import * as echarts from 'echarts'...原创 2021-11-23 09:14:30 · 1244 阅读 · 0 评论 -
【Vue】前端跨域解决方法
情景Vue项目的url:http://localhost:8080/本地后台所在: http://localhost:8081/这样就导致了跨域问题,解决方法林林总总,特开一遍文章来持续记录。前端跨域vue.config.js找到项目的根目录下的 vue.config.js 文件(没有就新建),然后在里面输入以下代码://在根目录下创建vue.config.js,如下配置:module.exports = { devServer: { //跨域 pro原创 2021-11-15 15:57:07 · 4090 阅读 · 0 评论 -
【Vue】模拟抽奖广告的Vue组件
情景双11快到了,一打开某宝某多多就是各种奇奇怪怪的广告,最多的就是抽奖的,被弄的不胜其烦,正好最近没什么动力学习,荒废时间又不合适,就干脆模仿一下这些抽奖广告,做个Vue组件。实现效果如下图:实现涉及到的知识点Vue动态绑定classJavaScriptsetInterval()、clearInterval()Math对象中的random()、round()CSSflex布局代码<template> <div> <div原创 2021-11-08 15:48:24 · 545 阅读 · 0 评论 -
【Vue】父子组件之间的通信
情景父组件有一个 btnList 数组,里面存放着按钮的名称和按钮的id,现在要把这个数组传入到子组件中进行渲染。子组件渲染出按钮后,点击按钮,父组件的 h1 标签中会显示出当前点击的按钮是哪一个。实现父组件传值给子组件可以使用 props 的方式,但是这种方式只能单向数据传递,即 只能父组件传,子组件接收。子组件传值给父组件使用 自定义事件 $emit() 。HTML版代码<div id="app"> <father></father><原创 2021-10-19 19:03:46 · 184 阅读 · 0 评论 -
【Vue】组件化基本使用、全局组件和局部组件、父子组件
<div id="app"> <!-- 3.使用组件 --> <cpc/></div><script src="../vue.js"></script><script> // 导入的Vue.js里面存在一个Vue对象。 //1.创建组件(组件构造器) const componentContructor = Vue.extend({ //extend接收一个对象参数 //te.原创 2021-10-18 10:27:53 · 162 阅读 · 0 评论 -
【Vue】项目导入
情景我在A电脑创建的Vue项目,上传到码云,到B电脑把代码拉下来了,使用脚手架的 vue ui 图形化界面进行项目导入,结果显示 找不到依赖,显示如下图。解决过程错误提示说缺少’node_module‘,这是一个文件夹,用来放依赖包的,可通过 npm install 命令进行安装。第一步,先进入到项目的根目录。第二步,在窗口的路径栏中输入cmd,点击回车。第三步,输入 npm install,回车。等安装好后,再进行导入就可以了。基础不牢,很多常识性的东西不了解,还需积累。...原创 2021-10-14 13:48:13 · 2658 阅读 · 0 评论 -
【教程】Windows如何搭建一个Vue项目
参考链接:https://www.cnblogs.com/yanxulan/p/8978732.html如何搭建一个Vue项目先看上面的这篇文章,然后文章的第一步是“安装node环境”,它里面讲的不够通俗易懂,小白看了会迷糊,所以第一步安装node环境建议参考下面的这篇文章参考链接:https://blog.csdn.net/antma/article/details/86104068node.js 安装详细步骤教程然后第二部,搭建Vue项目环境就可以继续跟着第一篇文章来走了。有.原创 2021-05-08 08:34:13 · 113 阅读 · 0 评论 -
【Vue】基于脚手架创建Vue项目+Vue组件基本使用
第一步:安装Node.jsnode.js 安装详细步骤教程第二步:全局安装vue-clinpm install @vue/cli -g第三步:创建一个基于 webpack 模板的新项目(一)下载webpack离线模板下载地址:https://github.com/vuejs-templates/webpack下载好之后,将其解压到本地用户目录下的.vue-templates目录下(二) 创建项目进入你的项目目录,创建一个基于 webpack 模板的新项目。比如说你想在E盘的Web原创 2021-05-25 16:02:07 · 424 阅读 · 0 评论 -
【Vue】Vue路由的基本使用--简单侧边栏的实现
项目搭建vue-router的安装一、用脚手架vue-cli基于webpack模板搭建vue项目的时候,在项目配置中选择使用vue-router,即 Install vue-router? Yes (推荐使用)二、进入到项目根目录,运行命令 npm install vue-router 回车路由使用实例路由组件和非路由组件组件可以分为两类,路由组件和非路由组件。上面图片中的侧边栏就是3个路由组件,而右边的则是非路由组件。以使用第一种方法安装的vue-router为例,安装好项目文件夹的目录原创 2021-05-27 18:55:40 · 2243 阅读 · 2 评论 -
【Vue】天气预报功能--axios的使用实例
axios的教程使用起来挺简单的,看文档再加上实例就能明白了。文档链接点击这里axios的安装进入到项目文件夹下,运行终端,输入npm install axios --save,点击回车。axios的使用在哪里使用,在哪里引入。比如我需要在App.vue页面使用axios,那么就在App.vue页面引入:需求做一个天气预报的页面,显示未来十五天的天气。默认显示地区为广州,支持搜索功能。静态页面将页面的标题抽取出来做成组件CardTitle将页面中的表格抽取出来做成组件Weat原创 2021-05-26 16:02:18 · 1503 阅读 · 2 评论