1. 重置样式 reset.css
(1)放在assets/css文件夹下
(2) 在main.js中全局引入,对所有的组件都起作用
import "@/assets/css/reset.css"
2. eslint会在编译时,对不规范的代码报错
关闭eslint的方式
第一种: 在禁用eslint检查的代码上方加入: /* eslint-disable */
第二种: 在根目录新建一个vue.config.js
module.exports = {
lintOnSave: false
}
****任何时候修改了vue.config.js,都需要重启服务
3. rem的处理
(1) 把rem.js放在assets/js文件夹中
(2) 在main.js中全局引入
import "@/assets/js/rem.js"
*****非ES6模块化的文件在引入时直接在import后写路径即可
4. 图标字体的使用
(1) 把图标字体所在的fonts文件夹放在assets中,iconfont.css放在assets/css中
(2) 在main.js中全局引入
import "@/assets/css/iconfont.css"
(3) 在任意一个组件的模板中使用:
<i class="iconfont icon-arrow-up-circle"></i>
(4)引用线上图标字体文件
在public/index.html中,加入link标签,引入线上链接地址
就可以在*.vue文件中全局使用
5. css预处理器sass的安装和使用
(1)npm i node-sass@4 sass-loader@7 -D
node-sass: 它允许用户以令人难以置信的速度将.scss文件本地编译为css
sass-loader: 是提供给webpack用来打包*.scss文件
(2)修改组件中style的属性
<style lang="scss"></style>
(3)在style中就可以使用scss语法
(4) 在style中引入外部scss文件的步骤
把*.scss放在assets/scss文件夹中
在组件中的style标签内:
@import "@/assets/scss/variable.scss";
6. axios的使用
(1) 安装 npm i axios -S
(2) 在main.js中引入,并在vue实例上添加$axios属性
import axios from 'axios'
Vue.prototype.$axios = axios;
(3)在任意一个组件使用
this.$axios.get()
Vue通用css--js--图标字体--axios的使用
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 1. 重置样式 reset.css 2. eslint会在编译时,对不规范的代码报错 3. rem的处理 4. ...
- 实现卖座电影部分效果 vue项目数据请求 1.注释掉在App.vue组件中,我们请求猫眼电影的跨域请求(怕看起来乱...
- 将下载下来的压缩包解压到本地。绿色箭头的不需要,只需要红色和黄色方框内的。 找到Vue项目路径,在assets路径...
- webpack 的utils.js 修改:(build目录下utils.js文件) 只是加了 publicPat...