store文件夹 vue_2020最新vue项目目录详解（超详细）

山西软通乐学常亮带你去详解vue项目目录

c1eb7368192dcbd76058c84f8f104bb4.png

8e1e1dd83917f53a91580f592a7a65d6.png

​

node_modules：存放npm命令下载的开发环境和生产环境的依赖包。

Public：public目录存放的是一些公用文件，比如初始创建时，public目录中有两个文件，一个是图标，一个是通用的错误页面：看index.html文件可以判断出，这是用于当浏览器不支持JavaScript脚本时的提示页面。

d97e07990f52aa08d9da6aeaa498d784.png

8e1e1dd83917f53a91580f592a7a65d6.png

​

src下assets：存放项目中需要用到的资源文件，css、js、images等。

src下components：存放通用的组件，如这里的HelloWorld组件其实就是项目初始化时Home这一页的内容，之后的开发中，我们可以把通用的组件都存放在这里。

7435d29c16bb40f3aaa21299520ce4b6.png

8e1e1dd83917f53a91580f592a7a65d6.png

​

src下router.js：vue-router vue路由的配置文件。

bd927ef70168f083f15198db8fc08fb4.png

8e1e1dd83917f53a91580f592a7a65d6.png

​

src下store：存放 vuex 为vue专门开发的状态管理器。

b1179186bfe78c4833305c9efcccef76.png

8e1e1dd83917f53a91580f592a7a65d6.png

​

src下views：view是视图的意思，顾名思义，这里是存放视图文件的地方。当然，一般在开发中，我们为了方便管理文件，还会在这个目录中创建更多的文件夹来进行管理。比如把项目的模块划分到目录中来管理。

af40e01d3a736ccecbdd36821a374226.png

8e1e1dd83917f53a91580f592a7a65d6.png

​

src下app.vue：使用标签<route-view></router-view>渲染整个工程的.vue组件。

src下main.js：main.js文件的作用是创建vue实例。初始项目中，引入了vue、app、store、router，当然我们也可以在此引入更多的东西或做一些全局的处理工作。

e00f8d390a759254a84c83ed79e7ab61.png

8e1e1dd83917f53a91580f592a7a65d6.png

​

package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。