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
