vue-cli入门 - 搭建项目打包运行+webpack打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38225558/article/details/86302259
前言： 在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。然而，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli 使用它能快速的构建一个web工程模板。
官网：https://cli.vuejs.org/
vue-cli入门 （快速的脚手架-快速搭项目的...）
新建模块
进入目录：
安装vue-cli ： npm install -g vue-cli 【注意：有点慢需要等会儿哦...】
如下安装成功！
注：如果安装失败就删除C:\Users\Administrator\AppData\Roaming\npm路径下的node_modules 文件夹，然后重新安装试下
vue-cli快速创建webpack项目：vue init webpack
然后一路回车，直到安装路由为止
然后选择安装路由，之后的不安装，然后回车等待安装即可...
等待安装成功...
最后安装成功之后，就会发现我们的项目中多出了很多文件...
运行：npm run dev
然后访问 http://localhost:8080 ，显示如下界面
npm run build --> 打包可以在服务器运行【注意：vue-cli 底层是使用webpack打包！文章最后附有webpack打包有关知识点】
执行完此命令后，在项目中会多出dist文件夹
然后就可以将dist文件夹下的文件复制黏贴放到tomcat下面去运行访问 【注：直接点击index.html是不能访问的哦！】
双击 启动tomcat
访问：http://127.0.0.1:8080
温馨小提示：可在idea中安装vue.js插件
这样我们的.vue文件就会支持提示等功能...
下面我们再来简单的了解一下webpack打包
webpack是什么?
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求
下面简单的介绍下Webpack 的安装与使用，因为我是学Java后端的，所以对前端的东西还不是那么熟...
安装
本地安装：
npm install webpack --save-dev
npm install webpack-cli --save-dev
全局安装：
npm install -g webpack
npm install -g webpack-cli
【注意：这2个都要等很久... 因为上面的vue-cli里面包含了webpack打包，这里的了解下就好...】
第一个安装成功之后如下
简单使用
打包html，js，css
npm install html-webpack-plugin --save-dev
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin --save-dev
然后新建文件webpack.config.js作配置...
编译打包 : cnpm run webpack 生成dist文件夹
热更新web服务器
webpack提供了一个插件，可以帮我们运行一个web服务，加载页面内容，并且修改js后不需要重新加载就能看到最新结果
安装插件：npm install webpack-dev-server --save-dev
添加启动脚本：
在package.json中配置script
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"
},
--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1
npm run dev
————————————————
版权声明：本文为CSDN博主「郑清」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38225558/article/details/86302259
