项目常用知识点总结（一）

「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」。

样式自动化导入

在项目中，对于经常用到的颜色和交互，我们通常会单独用一个文件来定义这些颜色和交互。当需要使用到这些变量时，只需要引入这个文件。

// src/assets/styles/variables.less
// 主题
@xtxColor:#27BA9B;
// 辅助
@helpColor:#E26237;
// 成功
@sucColor:#1DC779;
// 警告
@warnColor:#FFB302;
// 价格
@priceColor:#CF4444;

// src/assets/styles/mixins.les
// 鼠标经过上移阴影动画
.hoverShadow() {
  transition: all .5s;
  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }
}

那么我们在页面中如何使用这些变量呢？

方式一，在页面文件中引入这两个文件。

<style lang="less" scoped>
@import '~@/assets/styles/variable.less';
@import '~@/assets/styles/mixins.less';
.box {
  width: 100px;
  height: 100px;
  background-color: @xtxColor;
  .hoverShadow()
}
</style>

那么很多页面都需要用到这些颜色和交互，那么一次次引入太麻烦了。那么有没有办法可以自动导入呢？

方式二，样式自动导入。

样式自动化导入 使用style-resources-loader来自动化导入，首先安装这个包。

vue add style-resources-loader

安装完成后，它会帮我们生成vue.config.js文件。

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

在vue.config.js文件中增加需要注入的less文件即可。

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
+        path.join(__dirname, 'src/assets/styles/variable.less'),
+        path.join(__dirname, 'src/assets/styles/mixins.less')
      ]
    }
  }
}

然后在样式中直接使用变量。

<style lang="less">
/* @import '~@/assets/styles/variable.less';
@import '~@/assets/styles/mixins.less'; */
.box {
  width: 100px;
  height: 100px;
  background-color: @xtxColor;
  .hoverShadow();
}
</style>

重置样式

在项目中，我们会重置CSS样式，因为各个浏览器的默认样式不一样。 我们使用normalize.css重置样式。之前我们会reset样式，是把默认样式清除掉。例如margin:0;padding:0;list-style:none;而normalize会保留有用的样式，保证浏览器的效果一样。

在main.js中导入normalize.css。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+ import 'normalize.css'
createApp(App).use(store).use(router).mount('#app')

我们在页面中进行测试。

<p>哈哈哈</p>
<ul>
  <li>123</li>
  <li>456</li>
</ul>
<h1>大标题</h1>

可以看到如下效果，h1，ul等样式还是保留的，但是不一致的样式已经被重置了。 虽然有了重置样式，但是项目中依旧需要通用样式，我们新建通用样式然后在main.js中引入。

渲染优化

我们会从后台请求数据后进行渲染，请求数据会有一定的延迟，所以在刷新页面的时候，在加载内容之前会闪一下，给用户带来了不好的体验。

所以优化的做法是定义一个常量数据与后台返回的数据保持一致，这样在请求的数据返回之前就渲染常量数据，不至于白屏。

新建src/api/constants.js，并导出常量数据。

export const topCategory = [
  '居家',
  '美食',
  '服饰',
  '母婴',
  '个护',
  '严选',
  '数码',
  '运动',
  '杂项'
]

在vuex中提供初始值——常量，当后台数据返回时，修改vuex的数据。

+ import { topCategory } from '@/api/constant'
export default {
  namespaced: true,
  state: {
-    list: []
+    list: topCategory.map(item => ({ name: item }))
  },

最终效果是，无论页面怎么刷新，都不会出现白屏。