vue webpack模板创建的项目目录结构介绍

vue webpack模板创建的项目目录结构介绍

1. webpack simple项目

   通过vue init webpack-simple project_name 命令创建
   目录结构如下：
   

   + node_modules				//项目所用到的依赖模块
   + src						
   	- assets				//静态资源文件夹
   	- App.vue				//App.vue是我们的主组件，所有页面都是在App.vue下进行切换的
   	- main.js				//入口文件，vue实例并使用需要的插件
   + .babelrc					//Babel的配置文件
   + index.html				//主页html文件
   + package.json				//项目配置文件
   + webpack.config.js			//webpack配置文件
   

   执行npm run dev命令后并不会在dist目录下生成build.js文件，开发环境下build.js是在运行内存中的。
   执行npm run build命令会在dist下面生成build.js文件

2. webpack项目

   通过vue init webpack project_name 命令创建
   目录结构如下：
   

   + build						//webpack的配置文件
   	- ...
   + node_modules				//项目所用到的依赖模块
   + src						
   	- assets				//webpack路由处理的，静态资源文件夹
   	- components			//用户自定义的组件
   		- ...
   	- router				//路由配置组件
   		- ...
   	- App.vue				//App.vue是我们的主组件，所有页面都是在App.vue下进行切换的
   	- main.js				//入口文件，vue实例并使用需要的插件
   + static					//静态文件，不通过webpack路由管理，用时要用绝对地址，如/static/xxx.png
   	- ...
   + .babelrc					//Babel的配置文件
   + .postcssrc.js				//postcss 配置
   + .eslintrc.j				//eslint 配置
   + .editorconfig				//editor 配置
   + index.html				//主页html文件
   + package.json				//项目配置文件
   + webpack.config.js			//webpack配置文件
   

3. 附注

   一张在网上找到的图片