一、使用vue-cil创建项目
二、引入scss或less语法
1、引入scss:npm install sass-loader node-sass --save-dev,无需其他任何配置
2、移入less:npm install less less-loader --save-dev,同样无需任何配置
三、引入字体图标
这里推荐使用iconfont
1、链接引入:
(1)在iconfont创建项目后生成Font class
//at.alicdn.com/t/font_558043_kr6xrml3bbievcxr.css
(2)在index.html文件移入
<link rel="stylesheet" href="http://at.alicdn.com/t/font_558043_nv4akfbur270t3xr.css">
(3)在需要使用的文件中使用
<i class="icon iconfont icon-shezhi"></i>
2、本地引入
(1)将iconfont创建项目后生成的文件下载到本地,解压获取到iconfont.css文件
(2)将文件放到项目静态文件夹中
(3)在全局的文件中或某个文件中引入
<style lang="scss" > @import '../font/iconfont.scss'; </style>
(4)在需要使用的文件中使用
<i class="icon iconfont icon-shezhi"></i>
(5)当字体图标有新增时,iconfont重新生成Unicode,并替换调项目中已有的Unicode,另外将新生成的字体图标代码增加进去,如下
.icon-dianpu:before { content: "\e736"; }