美文网首页
VUE目录以及webpack的常用操作

VUE目录以及webpack的常用操作

作者: 邵云涛 | 来源:发表于2018-03-23 16:48 被阅读17次

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


目录结构

开发目录 src

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 (正式打包)

相关文章

网友评论

      本文标题:VUE目录以及webpack的常用操作

      本文链接:https://www.haomeiwen.com/subject/vkpxcftx.html