在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass-loader.style-loader npm install node-sass --save-dev npm install sass-loader --save-dev npm install style-loader --save-dev 2: 安装sass-resources-loader

在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-transform-remove-strict-mode 第二步:在.bablerc文件中加入"plugins": ["transform-remove-strict-mode"] 到这里问题就完美解决了

先npm安装stylus和stylus-loader  (我安装后,报错提示缺少stylus,所以第一步安装stylus,如果没有提示可省略第一步) 1.到 package.json ----- dependencies 里面加上下面这两句话 "stylus-loader": "^3.0.1",          "stylus": "0.52.4" 然后在cmd--项目中运行  npm install 2.  在回到项目中,

在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2.将字体文件引入 自己定义一个文件夹,放入下载好的.ttf文件 先自己定义一个font.css文件,将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src: url('stxingka.ttf'); font-weight: normal;

最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队).cube-ui(滴滴). 想做一个移动端微信公众号使用的界面,于是选择用mintUI. mintUI官网:http://mint-ui.github.io/docs/#/en2/quickstart 1.项目中引入mint-ui 1.下载以及配置 (1)下载: E:\HBuilderSpace\

vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm install --save-dev babel-polyfill 2.安装成功后有三种引入方式 第一种:在入口文件中引入,例如:main.js中加入 import 'babel-polyfill' 第二种:在 webpack.config.js 文件中,entry 入口处,按照如下修改 第三种:使

1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小时的格式................. 例如:daily.js module.exports = { 'tmbTmbsContent': [[ {'label': '123'} ]], } 2.在Daily.vue文件中引入 import Daily from '@/assets/data/da

今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这里不得不吐槽一下国内资料的可信度,不说了,以后遇到问题尽量还是google吧,花点钱买个vpn值了,生命有限,节约时间. 下面记录下解决方法吧: 首先,确保jsp引入了jstl:<%@ taglib uri="http://java.sun.com/jsp/jstl/core" pr

1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router-view组件通过子组件渲染 这种情况渲染不出来是可能是因为子组件命名跟特殊标签冲突了,重新把main改个名就好了

由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板中引用一些函数啥的:所以夏敏介绍怎么全局引用. 一:先更改脚手架项目中的build -- webpack.base.conf.js 去让项目能够正常使用stylus,具体更改如下: 先安装 npm i  style-loader  stylus  stylus-loader css-loader -

在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前的---->>修改后: 最后改成绝对路径就好了,但是原因还没搞懂

两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'element-ui/lib/theme-default/index.css' 这种写法适用于此css文件存在于项目中,不适用于通过网址访问的方式引入,会报错.偶试着引入Font Awesome,结果报错: 1 import "http://netdna.bootstrapcdn.com/font-aweso

今天小颖在做项目时,需要在html文件中引入font-awesome.min.css,但是引入后: 以前小颖在用font-awesome库里的图标时,都是直接从node中下包,然后在main.js中引入得即可,第一次直接在html中直接引入css文件,哈哈哈,虽然小颖已经在html中引入了  font-awesome.min.css   ,但是图标并没有出来,怎么解决呢? 其实只需要把font-awesome中的fonts文件夹放在与font-awesome.csss所在的css文件夹同级的位置

最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.vue模块,其中的导航条使用的bootstrap的class和自己的class. <ul class="navbar-nav my-navBar" id="my-navBar"> 3. 在Header.vue中定义了一些ul li 和 a 标签的样式. ul.

iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压的代码 3.在main.js导入iconfont.css文件 import './assets/iconfont/iconfont.css' 4.在代码中使用class="iconfont icon-XXX"就可以使用图标了 但是上面的图标都是黑色的,下面介绍如何引入彩色图标: 下载代码到

以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1.12.4.js"></script> 这样,其实就已经可以在项目中使用 jQuery 了. mounted () { console.log($) } 我们来看一下 调试器 截图: 可以看到,我们是可以正常打印出 jQuery 的.由于我的项目开启了 ESLint 检测,所以也会报

vue作为单页面的,引入百度统计,需要注意不少. 一.基本的流量统计 在index.html 入口文件中引入百度统计生成的一连串代码: var _hmt = _hmt || []; (function() { var hm = document.createElement('script'); hm.src = 'https://hm.baidu.com/hm.js?f62fe3c5d9343dece386407e99be4e39'; var s = document.getElementsBy

最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件夹中加入如下几个文件 首先看一下Tinymce/dynamicLoadScript.js的内容: let callbacks = [] function loadedTinymce() { // to fixed https://github.com/PanJiaChen/vue-element-a

一.引入jQuery: 首先在当前项目的根目录下(就是与package.json同目录),运行命令npm install jquery --save-dev   这样就将jquery安装到了这个项目中.(其他的类似,如下图) 然后修改webpack.base.conf.js两个地方: 其一:加入var webpack = require("webpack"): 其二:在module.exports的里面加入 plugins: [    new webpack.optimize.Comm

最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓狂,现在总结一下这些命令的解释,方便以后查阅. 默认eslint规则: 代码末尾不能加分号 ;(强迫症的我受不了哭) 代码中不能存在多行空行:(这个我更也忍不了大哭) tab键不能使用,必须换成两个空格:(超级不习惯) 代码中不能存在声明了但未使用的变量:(这个我觉得可以有) 最简单的方法,关闭eslint检测得意,其实很简单,把 build/web

1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3.安装上面两个之后.再安装vue-awesome-swiper(必须在前两个安装过之后安装) npm install vue-awesome-swiper --save 4.安装完之后在package.json文件中查看一下,看是否安装上,如果安装成功,里面会显示对应的版本号 "less"