Vue
vue
milijiangjun
这个作者很懒,什么都没留下…
展开
-
Nodejs中使用Request通过请求远程url的文件并下载到本地
需要循环去下载远程文件,然后自己写了一个demo,可以直接运行,如下:本次只显示核心的代码部分。这个可以写在html5 的js部分和vue 的部分//文件下载 所需要的基本类var fs = require("fs");var path = require("path");var request = require("request");//创建文件夹目录 判断文件是否创建var dirPath = path.join(__dirname, "file");if (!fs.existsS原创 2021-06-01 19:34:59 · 2670 阅读 · 0 评论 -
vue错误vuethisdependencywasnotfound
错误信息如图:错误发生分析:当前项目吧 这个vue 页面删除了。但是在路由中没有取消引用去掉从新编译一下原创 2020-11-18 09:52:14 · 642 阅读 · 0 评论 -
安装vue-cli时-4058报错的解决方法
vue错误如图:解决办法1.终端运行以下命令 --registry https://registry.npm.taobao.org info underscore而后运行下面的指令,从新添加vue-clicnpm install --global vue-cli3.终端运行下面的指令查看vue版本vue -V4.表示安装成功了...原创 2020-11-18 09:32:56 · 478 阅读 · 0 评论 -
vue路由案例使用
1.首先在src 下面防止views 放路由组件创建About和Home 2个vue 页面<template> <div> <h2>About</h2> <!-- <p>{{msg}}</p> --> <!-- <input type="text"> --> </div></template><script> expor原创 2020-11-18 07:57:24 · 306 阅读 · 0 评论 -
vue项目开发环境搭建配置
我们知道要想编程入门,第一步必须有配置好的环境才可以。就像樵夫如果想砍柴就需要准备好斧子和绳子一样。所以我们如果想开发vue也必须有相关的开发环境。我们需要配置的环境为nodejsnpmcnpmvscode(Visual Studio Code)我们先说nodejs官网网址https://nodejs.org/我们可以看到现在有推荐和最新的版本,我们一般下载推荐版本。但是有些特殊情况我们需要下载以前的历史版本,例如我们的电脑不是win10 的。有些新的版本 用不了。需要用以前的版本原创 2020-11-17 14:21:41 · 555 阅读 · 0 评论 -
js点击按钮划出菜单容器第一版
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js重温</title> <style type="text/css"> .father { height:100px; width:100px; ..原创 2020-11-13 00:20:08 · 257 阅读 · 0 评论 -
vue获取当前时间
js 方式实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实现一个简单动态的当前时间</title> </head><body onload="time()"> <script type="text/javascript"> var t = null;原创 2020-11-12 18:13:22 · 4731 阅读 · 0 评论 -
vue实现天气预报功能
获取的请求参数:{"data":{"yesterday":{"date":"11日星期三","high":"高温 14℃","fx":"东北风","low":"低温 4℃","fl":"<![CDATA[1级]]>","type":"霾"},"city":"北京","forecast":[{"date":"12日星期四","high":"高温 20℃","fengli":"<![CDATA[2级]]>","low":"低温 3℃","fengxiang":"北风","type":"原创 2020-11-12 18:08:46 · 5936 阅读 · 0 评论 -
vscode打开终端
为什么要打开终端 在vscode因为需要在vscode 中 直接执行cmd 命令在vscode 上面点击查看终端 ,会打开终端,在这里就可以直接输入cmd 命令原创 2020-11-12 13:46:21 · 2624 阅读 · 0 评论 -
vue项目中安装element-ui框架
1.首先打开项目切换到项目的根目录下面2.打开终端进行输入命令:F:\vue\map>cd vuemapF:\vue\map\vuemap>cnpm install element-ui -S进入项目开始安装element-ui框架安装提示√ Installed 1 packages√ Linked 10 latest versions[1/1] scripts.postinstall element-ui@2.14.0 › async-validator@1.8.5 ›原创 2020-11-11 18:30:09 · 1594 阅读 · 1 评论 -
vue 项目运行错误npmerr!f:xxxx\package.json‘
错误提示信息:```bash0 info it worked if it ends with ok1 verbose cli [1 verbose cli 'D:\\PublicSaveWork\\Node\\node.exe',1 verbose cli 'C:\\Users\\Show\\AppData\\Roaming\\npm\\node_modules\\cnpm\\node_modules\\npm\\bin\\npm-cli.js',1 verbose cli '-.原创 2020-11-11 13:37:07 · 2847 阅读 · 0 评论 -
vue项目创建之后运行错误
代码:查看node npm cnpm vue 版本 然后创建项目F:\vue\map>vue init --webpack mapserror: unknown option `--webpack'F:\vue\map>node -vv12.13.0F:\vue\map>npm -v6.12.0F:\vue\map>cnpm -vcnpm@6.1.1 (C:\Users\Show\AppData\Roaming\npm\node_modules\cnpm\l原创 2020-11-11 13:15:37 · 1491 阅读 · 2 评论 -
gulp打包3
返回steamvar print = require('gulp-print'); gulp.task('server', () => { return gulp.src('package.json') .pipe(print(function() { return 'HTTP Server Started'; }));});返回一个Promisegulp.task('server', () => { return new Promise(function(res原创 2020-09-25 16:29:40 · 131 阅读 · 0 评论 -
gulp打包2
gulp 打包后出现了问题错误代码The following tasks did not complete: default, Did you forget to signal async completion?var gulp = require('gulp');//注册任务gulp.task("js",function( ){ return gulp.src('src/js/video/*.js') .pipe(gulp.dest('dist/js/')) }) //原创 2020-09-25 16:15:08 · 105 阅读 · 0 评论 -
gulp打包1
步骤1 首先查看本地电脑有没有nodejs环境打开cmd输入查看命令 node -v步骤2 创建应用创建本地应用 例如:在f盘创建文件夹Gbuild 然后创建目录结构然后我们在我们的项目中package.json 中输入版本信息{ "name": "Gbuild", "version": "1.0.0" }步骤3 安装gulpgulp先全局 后局部为什么需要安装局部的是应为不同的gulp 的版本可能不同 命令也是不一样的,避免不同版本造成的问题全局 npm原创 2020-09-25 15:38:36 · 126 阅读 · 0 评论 -
viduojs播放vue中打包路径错误问题
我们在引入的时候吧js 文件放到了src 文件下和view相同的目录下 src/assets/video/ src/utils/video-js.css src/utils/video.js src/utils/video.min.js src/views/modules/pick/oldpick.vue src/views/modules/pick/pubpick.vue本地测试运行正常,但是发布后就不正常原创 2020-09-23 10:27:50 · 276 阅读 · 0 评论 -
Vue引入第三方js库
es5的引入方式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-test</title> //新增,直接script标签引入,全局皆可用 <script type="t原创 2021-01-28 23:33:45 · 392 阅读 · 0 评论 -
超级简单的Vue中引入Video.js播放2
需要引入的文件templay<div v-show='!isError'> <video id="videobox" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" webkit-playsinline="true" playsinline="true" type="application/x-mpegURL" allowsInlineMediaP.原创 2020-09-22 19:14:48 · 1743 阅读 · 0 评论 -
超级简单的Vue中引入Video.js播放1
1.安装 依赖 $ npm install video.js注册main.jsimport Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video界面使用<template> <div class="test_two_box"> <video id="myVideo" class="vide原创 2020-09-22 19:11:11 · 859 阅读 · 0 评论 -
Echarts实现雷达图
示意图:在vue 中首先进行安装npm i echarts --save然后引入import echarts from 'echarts'Vue.prototype.$echarts = echartstemplate 界面代码如下:<div id="radar_canvas" class="echart" style="width: 300px;height: 240px;"></div>methods: { initRadar() {原创 2020-09-22 19:08:41 · 2076 阅读 · 0 评论 -
video设置播放时间点及常用属性和方法
<!-- top video log --> <div class="topshow" > <div class="topl"></div> <div class="topr"></div> <div class="topc" > <div class="topcl" > <div style=...原创 2020-09-22 19:06:27 · 4805 阅读 · 0 评论 -
videojscurrenttime无效
//添加视频准备完成后的回调函数player.on('loadedmetadata', function() { player.play(); //自动播放 player.currentTime(100); //跳转});我们 在更换视频地址后需要让视频跳转到某个位置,按理说使用currentTime()就可以解决,但是在player.src()函数执行后再执行player.currentTime()就会无效。这原创 2020-09-22 19:00:47 · 2769 阅读 · 0 评论 -
videojs自动播放
player = videojs("video", { autoplay: true, });这个是其内置的方法,通过设置属性进行实现 其功能原创 2020-09-22 18:56:19 · 8024 阅读 · 0 评论 -
videojs设置播放时间为正数
video.js 默认播放时负数如图:我们显示要显示正数达到我们的效果如图:我们怎么解决的,通过css 解决 .video-js .vjs-tech {position: relative !important;} .video-js .vjs-time-control{display:block;}.video-js .vjs-remaining-time{display: none;}这样我们就把 问题解决了。有的时候添加后并没有解决问题。这个是界面加载后导致的优先级被覆盖掉了。解决原创 2020-09-22 18:54:41 · 2430 阅读 · 4 评论 -
vue引用当前项目的文件
<img :src="require('../assets/images/'+imgsrc+'.png')"/>通过这样的require 引用 可以避免 直接应用找不到404错误原创 2020-09-22 18:49:41 · 210 阅读 · 0 评论 -
vue动态绑定设置图片 src 路径
template 中的 内容: <!-- <img :src="imgURL" style="width: 100px;height: 100px; "/> --> <img src="https://www.cugb.edu.cn/website/images/cugb_badge.png" alt="">在data 中我们需要什么出来data() { return {原创 2020-09-22 18:47:27 · 3764 阅读 · 3 评论 -
vuea到z分类
<template> <div class="dev"> 双重结构数组对象 <div v-for = "(item,i) in no_check_items" :class = "no_check_sindex == i ? 'addclass_no' : '' " @mouseover='dowm(i,item.name)' :key="i"> {{item.name}} =============== {{i}}=====原创 2020-09-21 19:29:04 · 191 阅读 · 0 评论 -
vue点击元素添加颜色
<template> <div class="dev"> <div v-for = "(item,i) in items" :class = "active == i ? 'addclass' : '' " @mouseover='dowm(i)' :key="i"> {{item.name}} =============== {{i}} </div> </div></template>原创 2020-09-21 19:28:26 · 1774 阅读 · 0 评论 -
vue初始化模板
<template> <div class="dev"> </div></template> <script>export default { name: 'dev', data () { return { } }, created() { // this init loading function this.g(); },原创 2020-09-21 19:27:03 · 684 阅读 · 0 评论 -
vue点击按钮添加元素到页面
<h1>{{ msg }}</h1><ul> {{item.content}}原创 2020-09-21 19:25:54 · 4003 阅读 · 0 评论 -
element-table后端排序
排序是个很纠结的事情elementui-table 为我们提供了排序的方法 <!-- 列表展示区域 222 ascending--> <div> <el-table :data="tableData" border v-loading="dataListLoading" style="width: 100%"原创 2020-09-17 19:28:45 · 1435 阅读 · 0 评论 -
vue-element-table列内容显示过多隐藏
需求场景:我们用vue 和element 组件进行项目开发的时候如图,如果当前列的内容显示过多,就会换行我们想显示一行,不让他们拐弯 特别难看变成类似这样的咋地办呢?我们需要增加这样的属性 show-overflow-tooltip <el-table-column prop="author" label="作者" :span="3" show-overflow-tooltip></el-table-column>在这里插入代码片达到后的效果为:...原创 2020-09-17 09:53:46 · 11433 阅读 · 4 评论 -
010基于vuecli创建项目后的初步使用
创建项目后,就需要正式使用了。在这里首先要创建项目:https://blog.csdn.net/milijiangjun/article/details/108005729本人的极简快速指定版本按照步骤然后呢 我们把项目创建后就是需要开始使用了。项目如图:这里,就是我们创建的项目了。现在我们第一步是需要运行项目后不是一直看8080 的首页现在我们就一 一解读。src 下面的文件是我们的项目文件下面的 我们一般在src 下面建立文件夹 View把自己的文件写在这里面然后我们首先上个案例原创 2020-09-16 19:38:01 · 375 阅读 · 0 评论 -
Vue系列001vscode配置vue的安装环境
第一步:安装 vscode 官网下载版本第二步:在磁盘新建文件夹项目,并用vscode 打开F:\VSCode\VueDemo1m第三部:打开code 命令 进行安装在界面打开: 查看-》调试控制台-》选择终端第四步: 在终端输入命令npm init -f 初始化然后输入引入 vue 命令 npm install vue我们可以看到已经成功了,在左侧的界面...原创 2020-03-16 10:59:08 · 449 阅读 · 0 评论 -
0008node安装配置vue
上接 https://blog.csdn.net/milijiangjun/article/details/1041142130007windows搭建vue上接https://blog.csdn.net/milijiangjun/article/details/1040172890001-框架的搭建现在我们要接着开始配置我们想要的vue 环境输入现有的命令npm inst...原创 2020-02-01 20:40:16 · 764 阅读 · 0 评论 -
0007windows搭建vue
上接安装程序:https://blog.csdn.net/milijiangjun/article/details/104017289安装完毕后我们可以查看我们的版本node -v npm -v效果如下这个时候表示我们的node 安装成功 npm 也正常现在我们要在此基础上进行安装vue我们把nodejs 安装在了F:\AddRuanJoms\NodeJs...原创 2020-01-30 16:24:16 · 543 阅读 · 0 评论 -
0006-通过Webpack编译项目进行版本文件更新
1.接上篇创建第二个 JS 文件接下来我们创建另外一个 js 文件 2.js,代码如下所示:module.exports = "It works from runoob2.js.";更新runoob1.js 文件,代码如下:document.write(require("./runoob2.js"));然后我们进行更新操作C:\Users\wufengfeng&g...原创 2020-01-17 16:52:19 · 611 阅读 · 0 评论 -
0005-通过Webpack创建并编译项目
1.接下来我们创建一个目录 app:mkdir app22.在 app 目录下添加 runoob1.js 文件,代码如下:document.write("It Works");3.创建Index文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2020-01-17 16:32:03 · 314 阅读 · 0 评论 -
0004-创建Webpack的错误
安装后查看webpack版本webpack -v出现提示:C:\Users\wufengfeng\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:90 let notify = ^^^SyntaxError: Block-scoped declarations (let, con...原创 2020-01-17 13:47:52 · 557 阅读 · 0 评论 -
0003-进行创建Webpack项目
创建项目:打开node js 命令行输入创建项目的语句mkdir app就会在当前的用户下面创建项目,文件地址如图在 app 目录下添加 runoob1.js 文件,代码如下:document.write("It Works");在 app 目录下添加 index.html 文件,代码如下:<!DOCTYPE html><htm...原创 2020-01-17 13:08:40 · 569 阅读 · 0 评论