VUE目录以及webpack的常用操作

现在有很多的打包工具可以选择,grunt,gulp,webpack等等。vue官方建议是使用webpack,而且webpack相对其他打包工具的好处是代码动态编译，可以根据需要提取出公共部分的代码。因此我们也选择webpack作为打包工具。

assets 静态资源，如图片等的保存

css 样式文件，css,less等

fonts 字体文件，根据需要添加自定义字体

js js框架，公共部分代码，自定义组件等

5.view html页面文件,页面入口js文件

build 打包参数配置

主要用于对打包过程的控制

1. webpack.base.conf.js 基础配置参数,开发和生成代码打包共用

2. webpack.dev.conf.js 开发环境下的打包参数配置

3. webpack.prod.conf.js 生产环境的打包参数配置

config 打包模式配置

主要是打包相关的基础参数配置，如文件存放目录，打包后的访问根目录，是否压缩等

assets 生产环境下的js/css/图片等文件保存路径

可在config中指定

view 生产环境下的页面文件Html保存路径

和src/view下的html文件一一对应

package.json 打包的环境依赖配置

开发 npm run dev 开启本地web服务,方便调试页面和代码

生产环境打包 npm run build 将src下的代码打包到根目录下的 assets和view目录下

功能

支持vue开发的调试，支持webpack打包的调试和自动更新，不需要手动刷新代码

支持代码和语法检查，可在根目录的.eslintrc下配置检查规则

3.支持webpack的多页面(多入口)开发，相比单入口模式，逻辑更清楚

使用说明

1.view下的页面必须放在view的下级目录，比如view/index/index.html,同时每个页面文件必须搭配一个同名的js文件作为页面入口，比如view/index/index.js

2.可根据需要配置本地调试服务器的端口，默认8000,

在config/index下配置

3.可配置打包路径等，同样在config/index下配置

在根目录下执行 npm install (如果不是root用户的话，sudo npm install)

打包或者调试时，如果npm 命令提示错误，一般是某个模块未安装，可执行 npm install ***(模块名称) 安装相关模块

npm run dev (调试)

npm run build (正式打包)