<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="Justin"> <meta name="Keywords" content="canvas"> <meta name="Description" content="canvas study"> <title>canvas_study</title> </head> <body> <div> <canvas id="test" width="600" height="600" style="border:1px solid #000000;margin-left:300px"></canvas> </div> </body> </html> <script> //用于保存鼠标移动前的坐标 var x=-100; var y=-100; //获取鼠标当前位置 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; var c=document.getElementById("test"); var ctx=c.getContext("2d"); //线 ctx.moveTo(0,0); ctx.lineTo(600,600); ctx.moveTo(0,600); ctx.lineTo(600,0); ctx.stroke(); //鼠标移动时执行 function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); //清除上一个圆 clear(); var c=document.getElementById("test"); var ctx=c.getContext("2d"); //线 ctx.moveTo(0,0); ctx.lineTo(600,600); ctx.moveTo(0,600); ctx.lineTo(600,0); ctx.stroke(); //圆 ctx.beginPath(); ctx.arc(mousePos.x-300,mousePos.y,40,0,2*Math.PI); ctx.stroke(); x=mousePos.x; y=mousePos.y; } function clear(){ var c=document.getElementById("test"); var ctx=c.getContext("2d"); ctx.clearRect(0,0,600,600); } </script>
标签: web
vue启动报错:Module build failed: Error: No parser and no file path given, couldn’t infer a parser.
报错信息: Module build failed: Error: No parser and no file path given, couldn't infer a parser. 解决方案: npm i prettier@~1.12.0 之后重新运行即可
Vue组件之间的引用
以下介绍的引用方式只是多个引用方式中的一种 A引用B
<!-- A --> <template> <test></test> </template> <script> import test from './Eu' export default { name: 'index', components: { test } } </script> <!-- B --> <template> <h2> 引用内容 </h2> </template> <script> export default ({ //此处name是否设置作用不大 name: 'eu' }) </script>
Vue项目中引入ElementUI
前提: 1.该项目为idea中vue项目 2.已安装node和npm 步骤: 1.打开idea的Terminal(cmd或其它也可以) 2.移动到vue项目下 3.执行:npm install element-ui -S 打印日志为:
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + element-ui@2.3.9 added 67 packages and updated 1 package in 28.606s
4.可以到项目下的node_modules查看是否有element-ui文件夹 5.在main.js中添加
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
6.在创建的组件中使用element-ui
<template> <div> <i class="el-icon-edit"></i> </div> </template>
搭建idea下的vue工程
1.在本机安装nodejs和npm
2.打开idea新建module选择static web:demo
修改CSS样式或JS之后F12发现资源没有改变
原因:浏览器已缓存过文件,之后浏览器只获取本地文件,不再远程下载 解决办法: 1.修改浏览器缓存设置 2.不知道怎么设置就手动清楚浏览器缓存 3.如清除浏览器缓存无效,则为引用添加版本号 例如: <link rel="stylesheet" type="text/css" href="CSS/main.css?v2"> 注意: 1.问号后可随意编写,但不要重复 2.使用Idea热部署更新会出现错误
4.执行Ctrl+F5重新从服务器端获取资源(作者认为是最简便的方式)