前端开发 - JavaScript.net.cn 「线球实验室」

前端开发前端

代码： p 啦啦啦啦啦啦啦啦啦 div 呱呱呱 /div /p 在浏览器中渲染成了： p 啦啦啦啦啦啦啦啦啦 /p div 呱呱呱 /div p /p 原因是 p 标签里面不能嵌套 ul、div 等块级元素，只能嵌套行内元素。h1~h6之间也不能相互嵌套。

admin  2022-11-05  1091

前端开发前端

Vue3 挂载全局方法

方法一：挂载在原型链上import { createApp } from 'vue' import App from './App.vue' import router from './router' import Axios from 'axios'; const golBalTest = () = { console.log('测试全局挂载'); return '测试全局挂载'; } const app = createApp(App) // 挂载到vue原型上(方法1) app.config.globalProperties.$axios = Axios; app.con

admin  2022-06-23  Vue.js  675

JavaScript 前端开发

Rollup 教程

简介Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用ESM。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。Webpack 的理念是“万物皆是模块”，rollup.js 从一开始，就没有那样宏大的愿景，它描述自己是：“一个 JavaScript 模块打包器”。致力于“将小块的代码编译成大的复杂的代码”。快速使用Rollup 可以通过命令行接口(command line interface)配合可选配置文件(optional configuration fil

admin  2022-03-03  rollup  576

前端开发

Vue 3.0 快速教程

本文为我的学习笔记，适合有 Vue.js 2.0 基础的人阅读。1，下载基础设置克隆Vue-next-Webpack-preview项目，它将为我们提供包括Vue 3在内的最小的Webpack设置。$ git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment $ cd vue3-experiment $ npm install 2，添加sass 支持npm install --save-dev style-loader node-sass sass-loader 在webpack.co

admin  2020-09-09  Vue.js  811

前端开发

Webpack 多页面应用（多 HTML 页面 html-webpack-plugin ）

Webpack 4.0 开始，为了应对 Parcel 等的挑战，配置越来越简单，甚至可以“零配置”。一个简单的 Webpack.config.js 配置文件：const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }; 添加上常用 loader 后的配置文件:const HtmlWebpackPlugin = r

admin  2020-05-21  webpack  1074

前端开发

Webpack 概念理解 module、chunk 和 bundle 的区别

Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.Bundle: bundle通常是由多个不同的模块产生，它是已经加载完毕和被编译后的源代码的最终版本。Bundle Splitting: This process offers one way of optimizing a build, allowing webp

admin  2020-05-21  webpack  1675

前端开发

Webpack file-loader 升级后 src= "[object Module]" 的解决方法

Webpack file-loader 升级后 src= "[object Module]" 的解决方法，当 file-loader 的版本是 4.3.0 及以上，则需要在 webpack.config.js 中手动配置属性 esModule 。{ test: /\.(jpg|jpeg|png|gif|svg)$/, loader: "file-loader", options: { esModule: false, // 默认值是 true，需要手动改成 false } } esModuleType: Boolean Default: trueBy de

admin  2020-03-18  webpack  1201

前端开发

Webpack使用polyfill打包兼容低版本浏览器

使用webpack项目打包以后的项目在Chrome、Safari 下运行正常，但是在IE11下运行失败！提示 vuex requires a Promise polyfill in this browser。一脸迷惑，原来是这样的。babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill。例如，默认情况下babel可以将箭头函数，class等语法转换为ES5兼容的形式，但是却不能转换Map，Set，Promise等新的全局对象，这时候就需要使用polyfill去模拟这些新特性 babel-polyfill 原理是当运行环境中并没

admin  2018-09-10  webpack  1339

前端开发

babel-preset-env 一个就够了

Babel 的官网上在2017年9月宣布 ES2015 / ES2016/ ES2017 等等 ES20xx 时代的 presets 通通被废弃（deprecated），取而代之的是 babel-preset-env，并且承诺它将成为“未来不会过时的（future-proof）”解决方案。 babel-preset-env 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。目前我们写 javascript 代码时，需要使用 N 个 preset，比如：babel-preset-es2015、ba

admin  2018-09-10  769

前端开发

Webpack 使用 HtmlWebpackPlugin 简化了HTML文件的创建

为什么使用 HtmlWebpackPlugin 使用webpack命令打包，默认是不能生成html文件的，我以前的解决方法，就是在webpack output的目录中，添加一个index.html文件，index.html文件的内容如下： !DOCTYPE html html lang="zh-cn" head title 首页 /title meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"

admin  2018-09-08  webpack  915

前端开发

vue-router 页面跳转后如何记录返回后的位置

前两种方法需要设置路由history模式，后两种方法貌似更合适。方法一： 1.在router.js里面（即路由文件中），此时模式为 history const router = new VueRouter({ mode: 'history', routes, scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (from.meta.keepAlive) {

admin  2018-06-22  Vue.js  1922

前端开发

vue-router 切换页面时设置过渡动画

实现难点如何判断切换路由时是前进还是后退每次向左向右切换动画如何实现解决方案我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import VueRouter from 'vue-router' import Home from '../components/home/home' import User from '../components/user/user' var router = new VueRouter({ routes

admin  2018-06-15  Vue.js  1109

前端开发

vue.js 怎么给v-html指令绑定的数据添加样式

在Vue组件中，使用.foo img{max-width:100%}不会生效，解决方法如下： template div class="foo" div v-html="myHtml" /div /div /template style scoped .foo { height: 300px; } /style 而如果在组件中使用了v-html，要为myHtml中的标签添加CSS样式，我们需要在写样式的时候添加： .foo img { max-width: 100%; } 这样，编译

admin  2018-06-02  Vue.js  847

前端开发

Vuex中的信息，刷新页面后，数据没有了的解决方案

解决方案一，检查Vuex中的数据，没有的话，重新从服务器获取，该方案可以满足存储的简单信息。该方法的好处是比较干净。 mounted: function(){ var that = this; //如果登录后，刷新了，vuex里的登录数据会清空，这里重新从服务器获取数据 if(tools.getCookie('token') && !this.$store.state.user.user_type){ // 判断不需要重新获取信息的页面 var noNeed = ['/login','/register','/reset'];

admin  2018-05-15  Vue.js  999

前端开发

Webpack的项目中，如何import导入绝对路径

在写vue或者react中，有时候目录过深。使用相对路径引入模块，有点容易出错。比如下面这样： import {tools} from "../../../../../tools"; 在webpack.config.js 中，配置如下： resolve: { alias: { '@': require('path').resolve(__dirname, 'src') } }, 然后就可以在项目中使用绝对路径了。 import {tools} from "@/tools";

admin  2018-05-15  webpack  985

前端开发

Vue2.5中，父组件created钩子异步获取数据，子组件没有更新绑定的参数

问题描述：父组件传如lesser和larger两个参数，并且是ajax从服务器获取的。子组件定义created阶段输出lesser和larger。但larger为空。改成延迟输出则正确。问题来源：https://segmentfault.com/q/1010000008912491 提问者的主要问题是没有搞清楚，vue实例的生命周期，created函数只会执行一次。父组件： template my-editor :lesser="lesser" :larger="larger" /my-editor /template script

admin  2018-04-23  Vue.js  2056

前端开发

mint-ui中的cell无法绑定原生事件

mt-cell is-link title="测试" v-on:click.native="test" img slot="icon" src="../../assets/images/icon/credit-card.svg" width="24" height="24" /mt-cell 这样才能正常绑定事件test，去掉is-link也可以绑定，如下： mt-cell title="测试" v-on:click.native="test" img slot="icon" src="../../assets/images/icon/credi

admin  2018-03-13  Vue.js  2806

前端开发

vue+webpack 升级后在原有项目上的适配问题

本人的项目是 vue + webpack，vue单文件中使用了 Jade 模板与 less 预编译器起因是因为谈论到 Jade 模板问题，Jade 早已改名为 Pug，并且发布了2.0版本，想着不如升级了吧，顺便把 webpack 与 vue 也一并升级了，事实证明，升级需谨慎 = = 首先之前的版本如下： "vue": "2.4.2" "webpack": "2.7.0" 升级后的版本为： "vue": "2.5.7" &

admin  2017-12-20  webpack  795

前端开发

为什么Axios ajax每次patch都会有两次网络请求？

OPTIONS请求是信使请求，在跨域请求之前，浏览器会先发送OPTIONS请求去获取服务器请求访问头，如果OPTIONS请求被拒绝，则不会继续后续的GET/POST/PUT/PATCH等操作。前面请求，由于只是去探路的，只请求数据头部，所以返回空是正常的。如果前面的OPTIONS访问的头部信息被服务器拒绝，那么后面一次请求就不会被发起。这个是HTTP自身的特性，不用特意去处理，如果是自己的服务器的话，只需要在后台给所有的OPTIONS类型请求返回空就可以了（这只是以防万一，因为OPTIONS只请求数据头部，总是会返回空）。网上找到这个说法：https://segmentfault.com/q/

admin  2017-12-11  Vue.js  996

前端开发

vue.js国际化 vue-i18n插件

安装方法1.使用CDN直接引用 script src="https://unpkg.com/vue/dist/vue.js" /script script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js" /script 2.NPM$ npm install vue-i18n3.Yarn$ yarn add vue-i18n使用方法在这里只介绍vue的使用方法 script /* 国际化使用规则 */ import Vue from 'vue' import Vu

admin  2017-11-19  Vue.js  772