1. 重置样式 reset.css

    (1)放在assets/css文件夹下
    (2) 在main.js中全局引入，对所有的组件都起作用

            import "@/assets/css/reset.css"

image.png

2. eslint会在编译时，对不规范的代码报错

    关闭eslint的方式
    第一种： 在禁用eslint检查的代码上方加入： /* eslint-disable */

    第二种： 在根目录新建一个vue.config.js

                module.exports = {
                    lintOnSave: false
                }

        ****任何时候修改了vue.config.js,都需要重启服务 

image.png

image.png

3. rem的处理

    (1) 把rem.js放在assets/js文件夹中
    (2) 在main.js中全局引入
            import "@/assets/js/rem.js"

image.png

        *****非ES6模块化的文件在引入时直接在import后写路径即可

4. 图标字体的使用

    (1) 把图标字体所在的fonts文件夹放在assets中，iconfont.css放在assets/css中
    (2) 在main.js中全局引入
        import "@/assets/css/iconfont.css"

image.png

    (3) 在任意一个组件的模板中使用：
    <i class="iconfont icon-arrow-up-circle"></i>

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>

image.png

    (3)在style中就可以使用scss语法

image.png

(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()