- 博客(22)
- 收藏
- 关注
RSS订阅原创 Element-UI基本使用
Element-UI基本使用 npm i element-ui -S 安装element-ui 导入element-ui相关资源 //导入组件库 import ElementUI from 'element-ui'; //导入组件相关样式 import 'element-ui/lib/theme-chalk/index.js'; //配置vue插件 Vue.use(ElementUI) ...
2020-03-30 22:58:17
256
原创 vue脚手架自定义配置
vue脚手架自定义配置 package.json文件中添加vue节点 "vue":{ //项目服务器配置 "devServer:{ "port":8888, //默认打开浏览器 "open":true } } 新建单独的vue配置文件vue.config.js module.exports = { "devServer":{ "port":5154, "ope...
2020-03-30 22:44:20
628
原创 webpack打包发布
webpack打包发布 通过pack.json文件中配置打包命令 "scripts":{ //该命令默认加载项目根目录的webpack.config.js配置文件，当前项目中如果有dist目录，先删除，运行该命令会自动生成dist目录，此时的dist就是成品的项目 "build":"webpack -p" } ...
2020-03-30 21:50:37
220
原创 webpack配置vue组件加载器
webpack配置vue组件加载器 npm i -D vue-loader vue-template-compiler webpack.config.js文件添加vue-loader配置 const VueLoderPlugin = require('vue-loader/lib/plugin'); module.exports = { modules:{ rules:[ {tes...
2020-03-30 21:32:33
326
原创 vue单文件组件
vue单文件组件 组成结构 1.template 组件的模板区域 2.script 组件的业务逻辑区 3.style 组件的样式区 <template></template> <script> export default{ data(){ //存私有数据 return{} }, methods:{ //处理函数 } } </scr...
2020-03-30 21:27:53
156
原创 webpack打包处理jjs文件中的高级语法
webpack打包处理jjs文件中的高级语法 npm i babel-loader @babel/core @babel/runtime -D 安装babel转换器相关的包 npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D 安装babel语法插件相关...
2020-03-30 21:06:57
378
原创 webpack打包处理原始表中的图片和字体文件
webpack打包处理原始表中的图片和字体文件 npm i url-loader file-loader -D webpack.config.js中添加规则 {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'} 备注： ？之后时loader的参数项 limit用来指定图片大小，单位为字...
2020-03-30 20:42:52
259
原创 webpack配置postcss自动添加css的兼容前缀
webpack配置postcss自动添加css的兼容前缀 npm i - D postcss-loader autoprefixer 项目根目录创建pastcss.config.css配置文件 const autoprefixer = require('autoprefixer); module.exports = { plugins:[autoprefixer]; } eg ::pla...
2020-03-30 20:29:48
349
原创 webpack打包处理scss文件
webpack打包处理scss文件 npm i -D sass-loader node-sass webpack.config.js添加规则 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']} 3.导入sass文件，npm run dev运行项目 ...
2020-03-30 20:12:29
482
原创 webpack打包处理css文件
webpack打包处理css文件 npm i -D style-loader css-loader安装css依赖的加载器 webpack.config.js添加module节点，节点下添加rules属性，rules属性中添加规则 module:{ rules:[ {test:/\.css$/,use:['style-loader','css-loade...
2020-03-30 20:03:27
203
原创 webpack打包处理less文件
webpack打包处理less文件 npm i -D style-loader css-loader less-loader安装less依赖的加载器 webpack.config.js文件中添加规则 {test:/\.less$/,use:['style-loader','css-loader','less-loader']} 直接导入less文件，npm run dev运行项目 ...
2020-03-30 19:59:43
431
原创 webpack配置html-webpack-plugin生成预览页面
webpack配置html-webpack-plugin生成预览页面 npm i html-webpack-plugin -D安装生成预览页面的插件 修改webpack.config.js文件的头部区域，添加如下配置 const HtmlWebpackPlugin = require('html-webpack-plugin); const htmlplugin = new HtmlWebp...
2020-03-30 14:33:54
454
原创 webpack配置自动打包功能
webpack配置自动打包功能 步骤 npm install webpack-dev-server -D,安装支持项目自动打包的工具 修改package.json -> srcipts中的dev命令 “script”:{ "dev":"webpack-dev-server" } 把src的index.html 文件中src的脚本引用路径改为“/bundle.js” 运行npm ru...
2020-03-30 14:19:47
239
原创 webpack配置打包的入口和出口
webpack配置打包的入口和出口 webpack的4.x版本中默认约定 打包的入口文件是src ->index.js 打包的出口文件是dist ->main.js 如果要修改打包的入口和出口，可以在webpack.config.js新增如下配置 //node中专门操作路径的模块 const path = require('path); module.exports = { //...
2020-03-30 14:03:37
828
原创 ES6模块化基本语法
1.默认导出与默认导入 默认导出：export default 默认导出的成员 默认导入：import 接收名称 from ‘模块标识符’ 如： （1）m1.js let a=10; let b=20; function c(){ console.log('这是c的内容'); } export default { a, b, c } (2)m2.js import m1 from ...
2020-03-30 13:46:49
1006
原创 node中使用babel
node中使用babel实现模块化 npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel.node安装babel相关的依赖包 npm install --save @babel/polyfill安装第三方插件 项目根目录下创建文件babel.config.js babel.config.js文件内容如下 c...
2020-03-30 13:31:20
367
原创 webpack 基本使用
**## webpack 基本使用 步骤： 运行npm install webpack weback-cli -D，安装webpack相关的包 在项目根目录创建名为webpack.config.js的webpack配置文件 在webpack的配置文本中，初始化如下配置 module.exports = { //mode用来指定s构建模式 mode:'development } package.j...
2020-03-30 13:19:55
408
原创 弄懂art-template前后端混合使用之后，使用mongodb数据库，Node.js，AJAX,art-template实现省市区三级联动
弄懂art-template前后端混合使用之后，完成的这个案例 首先，页面用服务器端渲染，拿到省份信息，渲染到页面 其次，客户端省份信息选择之后调用城市接口，获取数据，渲染到页面，注意，（1）在客户端没有选中时让城市的下拉框清空，避免省份还在提示请选择省份时，城市诓就有信息（2）省份框选中时，让县城框清空，同样，避免还未选城市呢，县城信息就出来 然后，选择了城市之后，调接口用数据渲染县城框 服务器...
2020-03-16 01:32:23
599
原创 js实现免登陆效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 用户名：<input type="text"><br/> 密&am...
2019-05-21 01:15:26
1885
原创 css实现图片悬浮效果
css实现图片悬浮效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> &l...
2019-05-20 22:44:16
13502
原创 js实现鼠标拖拽移动元素位置
在移动的元素触发鼠标按下事件，给document绑定鼠标移动事件（给document绑定事件让元素可以随着鼠标在整个页面上进行移动，如果是给元素直接绑定鼠标移动事件那么元素只能一直是跟着鼠标下移，局限性太大，可以自己试试），鼠移动时让元素跟着鼠标移动，当鼠标抬起时元素停止到该位置。 //注意：使用style给元素设置位置等样式时必须在html元素上设置相应的行内样式。eg:box。style.top = 100+"px"，则必须要再box1上添加 style = “left ：0px;”
2019-05-20 18:10:47
4810
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人