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