打包字体图标 字体图标中也用到了 url 用到了文件, 所以我们需要通过file-loader来处理字体图标文件。 修改 webpack 核心配置文件如下所示: const path = require("path"); module.exports = { module: { rules: [ /
原创
2020-12-30 23:24:00
362阅读
新建项目第三步: 进入图标库--官方图标库 开始选择图标第四步:选中图标-- 添加入库-- 添加至项目---选择刚刚创建的项目--确定下面举例我们选择了两个图标 购物车中的图标 添加至项目第五步: 下载至本地---- 点击下载至本地按钮 下载至本地第六步: 解压下载的压缩文件----整理放入vue中的static中(在static中新建文件夹 icon ),同时直接把iconfont.css放入
转载
2020-07-01 09:59:00
275阅读
2评论
Loaders cnpm install vue-loader@14 vue-template-compiler --save-dev webpack.config.js module: { rules: [{ test: /\.vue$/, use: ['vue-loader'] }], }, A
转载
2021-07-07 16:44:00
108阅读
Loaders cnpm install vue --save webpack.config.js resolve: { // 解决运行时报错 alias: { 'vue$': 'vue/dist/vue.esm.js' } } 使用 import Vue from "vue";
转载
2021-07-07 14:36:00
61阅读
Vue iconfont 编码转换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue iconfont 编码转换</title> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> body { margin: 0; p
原创
2022-01-10 10:38:12
340阅读
1.进入iconfont官网,详情2.选中你喜欢的icon并加入购物车,然后添加进你的Iconfont文件夹下,最后下载到本地,就会有如下的一个包:上图中,我红色标记的这六个文件是需要的,其他的不需要,将其复制到你vue项目的static的iconfont文件夹下面,其中在main.js全局引入下iconfont。然后我们只需要看后缀名为css的那个文件,注意下面的class名称就是你要使用的cl
原创
2022-10-28 08:51:26
506阅读
vue中iconfont的使用步骤1、进入iconfont官网(http://www.iconfont.cn),进入“官方图标”,选择你所需要的图标,加入购物车。2、进入“购物车”,将选择好的图标“添加至项目”,选择对应的项目,点击“确定”。3、在项目中,点击“下载至本地”,解压缩,文件目录如下:4、将字体文件及对应的iconfont.css文件复制到项目目录中,如...
原创
2021-08-27 12:37:37
346阅读
vue中iconfont的使用步骤1、进入iconfont官网(http://www.iconfont.cn),进入“官方图标”,选择你所需要的图标,加入购物车。2、进入“购物车”,将选择好的图标“添加至项目”,选择对应的项目,点击“确定”。3、在项目中,点击“下载至本地”,解压缩,文件目录如下:4、将字体文件及对应的iconfont.css文件复制到项目目录中,如...
原创
2022-01-11 13:59:36
299阅读
前言 如果我们想在webpack中使用vue,就需要在webpack中配置vue 配置vue 首先,我们需要在项目中安装vue,安装命令如下: npm install vue --save 安装完成后,我们在主入口main.js文件中导入vue并创建一个实例 import Vue from 'vue
原创
2021-07-13 11:05:34
277阅读
Webpack是一个现代JS应用的静态模块打包的工具 学习Webpack需要我们安装NodeJS 配置CNPM & CRM 使用切换镜像的方式配置:【不建议】 npm config set registry http://registry.npm.taobao.org 安装镜像管理工具: npm i
转载
2020-07-24 21:52:00
128阅读
2评论
1.安装webpack项目环境bashnpminstallwebpacksavedev2.安装css的loaderbashnpminstallsavedevcssloader3.安装style的loaderbashnpminstallsavedevstyleloader
原创
2021-12-29 17:58:22
225阅读
Webpack作用:Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分ack-cli -vWebpack的配置:创
原创
2022-12-09 12:02:44
120阅读
文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1
原创
2022-05-10 10:26:25
1407阅读
点赞
v-html 有xss风险computed有缓存,data不变就不会重新变化watch如何深度监听watch正常监听不到引用值对象属性的变化,需要在watch开启deep实现深度监听data(){
return{
styleData:{
fontSize:'40px', --------- 这里使用驼峰写法
backg
转载
2021-04-20 22:06:30
228阅读
2评论
8.webpackWebpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。中文官方网站:https://www.webpackjs.com/官网给出的解释:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(de...
原创
2021-08-18 10:49:52
141阅读
一、介绍: 1. js应用的模块打包工具 二、webpack安装 1. 环境:node环境 2. npm install webpack -g 说明:npm install 命令;webpack是工具名,可以指定版本如:webpack@5.58.3; -g表示全局安装,如果不想全局安装,仅为某项目安 ...
转载
2021-10-20 19:12:00
164阅读
2评论
8.webpackWebpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。中文官方网站:https://www.webpackjs.com/官网给出的解释:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
原创
2022-03-04 15:39:42
68阅读
1、项目根目录初始化package.json: npm init2、下载css与style的loader配置webpack中的css解析npm install css-loader style-loader --save-dev3、下载babel,webpack配置es6语法npm install babel-core babel-loader babel-plugin-transform-
原创
2022-11-20 00:41:19
101阅读
第一步:npm init -y第二步:npm install --save-dev vue 第三步:npm i --save-dev vue-loader vue-template-compiler 第四步:npm install webpack webpack-cli --save-dev添加配置文件:webpack.config.jsc...
原创
2021-07-14 11:43:20
236阅读
vue-iconfont-onlineEnglish | DEMO有时候开发会遇到这样的问题,产品经理频繁变需求,ui频繁修改,导致每次都要从iconfont上面重新下载文件,这样很麻烦,所以我就希望能够很快速的导入阿里巴巴iconfont里面的图标库,所以就写了一个这样的插件~欢迎个Star~~
仓库地址:ShnHz/vue-iconfont-online安装该插件可以通过npm安装。Using
转载
2021-02-01 10:59:48
2658阅读
2评论