webpack和vue-cli

房东的猫 提交于 2020-04-28 07:36:45

webpack 一款打包工具,负责项目打包

原生使用webpack配置非常麻烦(入口,输出,加载器,插件),因此使用vue-cli打包工具(即:vue脚手架)可以极大简化webpack打包流程

vue-cli安装

sudo npm install -g vue-cli

使用vue-cli初始化

进入项目目录 ->

sudo vue init webpack ->

提示是否在当前目录下生成?y ->

下载模板 ->

输入项目名称?(通常默认)Enter ->

项目描述?(默认有一个可以直接回车)Enter ->

作者?(默认会有一个当前用户)Enter ->

VUE构建?选择RunTime+Compiler即可 ->

是否安装vue-router? y ->

是否使用ESLint ? n ->

启用单元测试? n ->

n ->

最后一步选择Yes

 常用文件:

build/        该目录下存放的是webpack打包使用的配置文件,base.js是基础文件,dev.js是开发环境使用的,prod.js是生产环境使用的

config/index.js  主配置文件,端口号就在这里配置

dist/       该目录下放的是打包后的目录和静态文件,需要注意:整个项目只有一个index.html文件

main.js        js的入口文件

index.html    打包前的主页面文件

static/       打包前的静态文件

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!