vue项目结构及编码规范

vue项目结构

node_modules ---------- 存放依赖的地方

public -------------------- 存储静态资源的地方，不会经过webpack打包

src -> assets ------------- 静态资源，会经过webpack打包

components ------------- 存放组件

router --------------------- 存放路由

store ---------------------- 一般存放VUEX中的数据

App.vue ------------------- 根组件

main.js --------------------- 入口文件

babel.config.js-------------- JavaScript编译器ES6->ES5，编译node modules

package,json--------------- 描述npm包的信息，类似pom.xml

package-lock.json --------- 锁定查看安装包版本

postcss.confiq.js ------------ JS-> Css,自动为CSS属性添加加前缀

vue.config.js ---------------- 可配置打包路径（ 根目录下，修改之后需要重启项目 ）

vue编码规范

vue组件命名规范：2 到 3 个单词，app-前缀作为命名空间: 如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用。

项目组件：组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况，这样增加可读性。

页面级组件应该放到相对应页面文件夹下，比如一些组件只有这个页面用到，其他地方没有用到的，可以直接放到页面文件夹，增加components子文件夹。

样式class的命名：统一以小写字母开头，小写字母、下划线和数字组成。命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和第三方库中的命名冲突。例如：xx_left,xx_line。最外层一般使用 （ box , index , container ),由此延伸。

css规范： 公共CSS最好放在根部 common-xxx 命名避免样式冲突。

请求接口：data传参数时的时候避免使用空格，可能会导致参数乱码，无法拿到数据 。进行页面跳转传参同理。

一个大佬总结的很详细，并且还有PDF可供下载，有需要请参考

https://mp-9847d52b-c6c5-4f56-ab2e-f859c88cbb87.cdn.bspapp.com/cloudstorage/9a1f12ee-e285-4e93-9006-9b3657fc3f1a.pdf