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.1npm run dev————————————————版权声明：本文为CSDN博主「郑清」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处连接及本声明。原文连接：https://blog.csdn.net/qq_38225558/article/details/86302259