Vue通用css--js--图标字体--axios的使用

    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()
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容