Vue学习--项目开发前的准备

一、划分目录结构

1.初始创建时

• 主要在src文件夹中
• 包括asset和components文件夹+App.vue和main.js文件
  

2.需要新添加的文件

• 其中asset中放一些相关资源包括 img(图片)和 css(样式文件)
• components中主要放置一些公共组件(可以在不同地方使用)
• 公共组件还能分成两类：
• ——1.common 文件夹中放不仅能在当前项目中用的组件，而且还能在下一个项目中使用的
• ——2.content 放置和当前项目业务相关的组件
• src中再添加views文件夹：放置大的视图(首页、分类)，再在其中加入对应新的文件夹
• src中再添加router文件夹：放置路由相关文件(vue-router)
• src中再添加store文件夹：放置公共状态管理文件夹(vuex)
• src中再添加network文件夹：放置网络相关所有东西封装
• src中再添加common文件夹：放置公共js文件(工具类、公共方法)

3.后续还会有新建的文件夹，之后再描述

未完待续

二、css文件的引入

1. normalize.css : 所有对css相关的标签做初始化 例html、body… 引入第三方css
2. 官方： 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一
3. 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;
}

4. 要在base.css引入normalize.css,在App.vue中引入base.css

三、项目路径别名(vue.config和editorconfig)

1. 在根目录下新建vue.config.js文件

vue.config.js内容如下:

module.exports = {
  configureWebpack: {
    resolve: {
      alias:{
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views'
        // router和store不用，因为在所有地方都直接拿his.$router和this.$store
      }
    }
  }
}

四、.editorconfig文件

• 在Vue3中不会自动生成该文件，但该文件在项目中仍然很重要。

EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读，并且与版本控制系统配合使用。

#告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true
#匹配全部文件
[*]
# 设置字符集
charset = utf-8
indent_style = space
#缩进为两个空格
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

参考:
https://www.bilibili.com/video/BV15741177Eh?p=151
https://www.cnblogs.com/xieqian/p/10045610.html