1.使用vue cli 3创建项目并创建项目文件夹用于划分管理文件如下

项目结构.PNG

2.配置基础样式css

如果要对所有的样式做一个统一处理可以使用normalize
https://github.com/necolas/normalize.css
当然，还需要写一个自己的base.css设置一些样式
然后在App.vue中导入

@import "./assets/css/base.css";

例如在base.css中设置自定义颜色

/*root ->获取根元素html*/
:root {
  --color-text: #666;
  --color-high-text: #ff5777;
  --color-tint: #ff8198;
  --color-background: #fff;
  --font-size: 14px;
  --line-height: 1.5;
}

在需要使用的时候使用方式如下：

background-color:var(--color-tint);

3.配置路径别名

作用：配置好别名后，不用写全路径，引用方便
在项目根目录下创建vue.config.js文件并配置，这些配置最终与其他配置会进行合并，module.exports是导出配置
@默认配置了src目录
resove表示配置路径相关的别名配置

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'components': '@/components',
        'content': 'components/content',
        'common': 'components/common',
        'assets': '@/assets',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

配置完成后，在引用base.css的地方可以修改为

@import "assets/css/base.css";

4.配置代码风格

可以在vue cli2项目中找到一个.editorconfig文件，复制到项目根目录下
配置的是代码缩进，采用的编码等

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true