vue-cli 项目开发流程 划分目录结构

项目开发流程

初始（清理无效文件）

删除helloword.vue 文件 及相关引用 及app.vue的初始样式 和assets下的文件及相关引用

划分目录结构

src
	assets // 资源
		img
		css
			reset.css // 初始化css
	common // 放置一些公共的js文件 
		const.js  // 存放一下常量
		utils.js  // 工具方法
	componsents // 公共组件
		common  // 放置一些非业务组件  即当前项目可以使用 其它项目复制一份也可以使用
		content // 和当前项目相关的业务组件
	router  // 路由配置
		index.js
	store  // vuex配置
		index.js
	views  // 页面组件
		pageA/pageA.vue 
		...
	network // 请求封装	
		index.js
	
	App.vue
	main.js

初始化样式 reset.css / normalize.css

reset.css
normalize.css

css文件夹
base.css 自定义全局样式
reset.css 一些标签初始化样式
normalize.css 与许多CSS重置不同，保留有用的默认值。
在 base.css 导入normalize.css

@import '/normailize.css';

在App.vue style导入

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

.editorconfig 代码风格配置、vue.config.js配置别名

.editorconfig

root = true

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

vue.config.js

module.exports = {
     
    configureWebpack:{
      // 配置webpack
        resolve:{
     
            // extensions:[], // 后缀名省略配置
            alias:{
     
                // '@': resolve('./src')  默认配置了

                'common':'@/common',
                'assets':'@/assets',
                'components':'@/components',
                'network':'@/network',
                'views':'@/views'

            }
        }
    }
}

项目模块划分