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. 附注

   一张在网上找到的图片