public 用于放置静态资源的目录
|—— favicon.ico 浏览器title图标
|—— index.html 静态index.html
src 项目代码核心目录
|—— api 用于放置接口请求的封装
|—— assets 用于放置css文件以及图片的目录
|—— router 配置vue路由的目录
|—— store vuex 数据管理,一般将用户信息和登陆信息等存储在里面
|—— utils 放置一些工具方法
|—— views 放置核心vue页面的地方,也是日常开发最主要的目录
|—— App.vue 项目的入口vue文件,如无特殊需求,尽量不要在该文件中开发业务逻辑
|—— main.js 项目的入口js文件,用于初始化vue实例以及存储全局变量
tests 单元测试目录
.eslintrc.js ——eslint的配置文件
.gitignore ——配置不参与git提交的文件的地方
babel.config.js ——babel的配置文件
jsconfig.json ——主要与vscode配合,提高vscode的性能
package.json ——使用的npm包(serve:开发环境 build:打生产包)
package-lock.json ——锁定安装时的包的版本和包依赖的版本号,以保证其他人在使用npm install时下载的依赖包都是一致的
README.md 项目的说明文档
vue.config.js ——打包的配置文件,将webpack所有配置进行集成,做了环境配置的修改,devServer:在本地起服务,起类似代理作用
yarn.lock—— 如果是通过yarn运行项目,则会起到锁定版本的作用,如果是通过npm运行项目,则用不到该文件
日常开发注意事项:
1、日常开文件放置地方:
vue页面应放置在views目录下,
css文件和图片放置在assets目录下,
接口请求需封装好放置在api目录下,
工具方法等放置在utils目录下
2、vue内部的css书写,一定要加scoped!