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  【注意:有点慢需要等会儿哦...】

如下安装成功!

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第1张图片

注:如果安装失败就删除C:\Users\Administrator\AppData\Roaming\npm路径下的node_modules 文件夹,然后重新安装试下

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第2张图片

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第3张图片

vue-cli快速创建webpack项目:vue init webpack

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第4张图片

然后一路回车,直到安装路由为止

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第5张图片

然后选择安装路由,之后的不安装,然后回车等待安装即可...

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第6张图片

等待安装成功...

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第7张图片

最后安装成功之后,就会发现我们的项目中多出了很多文件...

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第8张图片

运行:npm run dev

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第9张图片

然后访问 http://localhost:8080 ,显示如下界面

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第10张图片

npm run build  -->  打包可以在服务器运行【注意:vue-cli 底层是使用webpack打包!文章最后附有webpack打包有关知识点】

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第11张图片

执行完此命令后,在项目中会多出dist文件夹

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第12张图片

然后就可以将dist文件夹下的文件复制黏贴放到tomcat下面去运行访问 【注:直接点击index.html是不能访问的哦!】

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第13张图片

 双击 启动tomcat

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第14张图片

访问:http://127.0.0.1:8080

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第15张图片


温馨小提示:可在idea中安装vue.js插件

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第16张图片

这样我们的.vue文件就会支持提示等功能...

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第17张图片


下面我们再来简单的了解一下webpack打包

webpack是什么?

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第18张图片

从图中我们可以看出,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打包,这里的了解下就好...】

第一个安装成功之后如下

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第19张图片

 

Vue(4) vue-cli入门 - 搭建项目打包运行+webpack打包_第20张图片

简单使用

打包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

你可能感兴趣的:(-----❹,Vue)