vue项目目录分析

前沿

在学习vue过程中，用vue去写开发一个小项目，可以作为学习成果的一定反应，但在开发的过程中注意的东西也很多，首先便是项目的创建，项目每个目录及其文件各司其职，使项目可以运行起来，并且好的文件结构无论是对合作开发或是后期维护都起到至关重要的作用。

项目简单目录结构：

• node_modules (项目依赖文件夹)

• public(一般放置一些讲台资源（图片），需要注意，放在里面的静态资源，在 webpack 打包时，会原封不动的而打包到 dist 文件夹中)

• src（程序员源代码文件夹）

  • assets（一般也是放置静态资源（一般放置多个组件公用的得到静态资源），需要注意，放置在 assets 文件夹李米娜静态资源，在 webpack 打包的时候，会将静态资源当做一个模块，打包 JS 文件里面）

  • components（一般放置的时非路由组件（全局组件））

  • api(名字可以自定义，创建一个文件夹用来1、调用接口返回数据，在组建内部只需通过对应的字段拿数据就行，无需再组件组件内部调用接口请求数据2、对axios进行2次封装3、获取模拟数据等操作)

  • mock(一般是放置模拟数据的一些处理需要时创建)

  • pages|views(一般放置路由组件)

  • router（路由的一些处理）

  • store（vuex状态管理）

• App.vue（唯一的跟组件，Vue 当中的组件）

• main.js 文件：程序的入口文件，也是整个程序最先执行的文件

• .ginignore.git 推送代码忽略配置

• babel.config.js配置文件（bable 相关）

• package.json:项目的身份证，项目叫什么，安装的依赖，运行方式等

• package-lock-json:缓存的文件

• README.md:说明文件

• vue.config.js一个可选的配置文件

• jsconfig.json(由于webpack别名配置好以后，如果想要在vscode中可以正确提示路径，就需要配置jsconfig.json文件)

相对于来说这个结构似乎并不能说明什么，每个目录或者文件单独伶出来，完全搞懂还是需要不断的探索，以及积累开发经验，这个记录算是个开篇吧，待日后补充。