Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包

前言： 在开发中，需要打包的东西不止是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