SCSS + Favicon + 图标

SCSS安装与调试

需要安装的依赖包如下：
node-sass：sass-loader依赖
sass-loader：解析sass/scss文件

这些包，只是开发环境需要，方便开发调试，而生产环境是不需要的，所以安装代码如下:

cnpm install node-sass sass-loader --save-dev

显示安装完成，红框内的东西等一下再说。

【注】
--save 将依赖记录在package.json里的dependencies下，之后生产环境需要这些包;

--sava-dev 将依赖记录在package.json里的devDependencies下，只有开发环境需要这些包，方便开发调试，而生产环境不需要。

-S是--save的缩写，-D是--save-dev的缩写

安装完成后打开HelloWorld.VUE，修改文件内容，进行调试：

启动项目发现报错：

回头看我们安装SCSS的时候发现有给一些警告，看上面红框内的内容，版本不支持，现在我们只需要更换版本就可以了。

方法一： 直接卸载然后重新安装低版本

卸载已安装版本 npm uninstall node-sass sass-loader
安装 npm install node-sass@4.14.1  sass-loader@7.3.1

【注】该方法容易出错，推荐方法二

方法二： 修改配置package.json中的版本，然后把node_modules文件夹删除，再重新cnpm install

修改为： "sass-loader": "^7.3.1", "node-sass": "^4.14.1"

启动项目成功！！

3.1 修改目录结构

1、 将src目录下的components文件夹重命名，修改为views，然后添加目录，如下图展示：

2、 修改App.vue

将logo这行代码去掉；将下面的样式去掉

3、 修改route/index.js，更换引入页面

4、 配置favicon图标

未配置的是这样的：

一般网站都会配置如：

如何配置：

修改开发环境配置：

打开bulid文件夹，找到webpack.dev.conf.js，添加代码，如下图所示

修改开发环境配置：

打开bulid文件夹，找到webpack.prod.conf.js，如下图所示

重启项目，刷新页面，可以看到配置成功！

3.2 添加字体图标 Font Awesome

安装依赖包:

cnpm install font-awesome --save

在项目 main.js 中引入CSS：

测试：
在启动页Home.vue中添加代码，保存，刷新页面。

3.2 添加一些公共类

在main.js引入公共类

3.3 添加一些自定义的图标

设计规范参考： Ant Design

图标制作软件：Adobe illustrion、 Adobe XD

制作字体图标的网站： icomoon

上传图标的svg文件，选择尺寸，确定图标的名称，下载。

解压，并修改style.css文件名，因为demo引用了该css，所以也要在demo文件夹中修改

然后在main.js中引入文件：

在页面中添加代码调试：

刷新页面，加载成功！！

【注】自定义的图标字体样式表因为开头应该是