1.清除App.vue和 router文件夹下index.js的无用代码
2.安装less依赖
注意less-loader 10.0.1版本会报错
建议版本
"less": "^4.1.1",
"less-loader": "4.1.0"
3.新建全局css文件
初始化样式
/* 全局样式 */ html, body, #app { height: 100%; margin: 0; padding: 0; }
main.js导入全局css
import ‘./assets/css/global.css‘
4.导入图标库
使用element官网中图图标这不用此操作
1. 在阿里图库中下载的fonts文件夹放在assets目录下
2. 在main.js中导入
//导入图标库
import ‘./assets/fonts/iconfont.css‘
5.根目录下新建 .prettierrc 文件
文件内容格式为json , 用来规定 格式化代码风格,
可以通过修改该文件 ,自定义代码格式, 避免格式化工具和eslint之间产生冲突
例如:
{ // tab缩进大小,默认为2 "tabWidth": 4, // 使用tab缩进，默认false "useTabs": false, // 使用分号, 默认true "semi": false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) "singleQuote": false, // 行尾逗号,默认none,可选 none|es5|all // es5 包括es5中的数组、对象 // all 包括函数对象等所有可选 "TrailingCooma": "all", // 对象中的空格 默认true // true: { foo: bar } // false: {foo: bar} "bracketSpacing": true, // JSX标签闭合位置 默认false // false: <div // className="" // style={{}} // > // true: <div // className="" // style={{}} > "jsxBracketSameLine": false, // 箭头函数参数括号 默认avoid 可选 avoid| always // avoid 能省略括号的时候就省略 例如x => x // always 总是有括号 "arrowParens": "avoid" }
另一篇文章: .PRETTIERRC代码格式化配置介绍