1.Vue目录结构

vue目录结构

说明：

• assets 素材相关
• common 一般放常量和工具类
• components 里面一般是通用组件里面一般有两个文件夹
  common 通用组件，与项目可抽离
  content 与项目不可抽离
• network 网络组件
• router 路由相关
• store 即vuex状态管理
• views 主要的视图界面

2.配置文件夹别名

生成vue.config.js

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

3.CSS文件的准备

引入nomalize.css库
https://github.com/necolas/normalize.css
下载下来放入工程的css文件夹中
生成base.css文件，代码如下

@import "./normalize.css";

/*:root -> 获取根元素html, 这些都是定义的变量，使用的方式是color:var(--color-text:)*/
:root {
  --color-text: #666;
  --color-high-text: #ff5777;
  --color-tint: #ff8198;
  --color-background: #fff;
  --font-size: 14px;
  --line-height: 1.5;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  user-select: none; /* 禁止用户鼠标在页面上选中文字/图片等 */
  -webkit-tap-highlight-color: transparent; /* webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节 */
  background: var(--color-background);
  color: var(--color-text);
  /* rem vw/vh */
  width: 100vw;
}

a {
  color: var(--color-text);
  text-decoration: none;
}

在App.vue中加入

<style>
  @import url("assets/css/base.css");;
</style>

这样基础css文件配置成功

4..editorconfig项目管理配置比如代码缩进，字符等规则

root = true

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