vue新项目的基础配置应该做哪些(CSS部分)

（本文建立在你已经用vue-cli新起了一个项目(环境vue3)）

CSS部分(这里使用sass/scss)

一. 首先建立重置默认样式表reset.css(也可安装相对应的库)

• 作用: 重置各个浏览器的默认样式的
• 代码: 重置浏览器的默认样式的代码

二. 建立公共样式表common.scss或common.css

• 作用: 提高样式代码复用，减少样式代码
• 代码: 项目的一些公共样式

三. 建立变量样式表variable.scss

• 作用: 增加样式表的扩展性，方便后续更改
• 代码: 项目的一些scss变量(譬如基本颜色，常用颜色，基本字号，常用字号等)

四. 将样式表全局引入项目

• 默认样式表: 默认样式表在项目main.js中引入即可
• 公共样式表和变量样式表引入方法:
  1. 每个组件中import(这样会很繁杂，代码累赘，如果文件的路径改变了，那之前引入的每个组件都要修改，不合理)
  2. 全局引入:

     // 在vue.config.js 设置如下(如果项目没有vue.config.js,请新建一个这个文件)@import 后面接样式表的路径
     module.exports = {
         css: {
             loaderOptions: {
                 scss: {
                     prependData: `@import "~@/assets/style/variables.scss";`
                 },
             }
         }
     
     }