webpack 一款打包工具,负责项目打包html
原生使用webpack配置很是麻烦(入口,输出,加载器,插件),所以使用vue-cli打包工具(即:vue脚手架)能够极大简化webpack打包流程vue
vue-cli安装webpack
sudo npm install -g vue-cli
web
使用vue-cli初始化vue-router
进入项目目录 -> vue-cli
sudo vue init webpack -> npm
提示是否在当前目录下生成?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/ 打包前的静态文件