webpacks + vue 的工作流介绍

image.png

安装webpacks必须先安装node.js，但此处并不是用node.js来写代码，或者说，只是需要它的包管理器npm
npm install -g vue-cli [用npm安装vue-cli]
vue init webpack-simple vue-cli [建立一个名为vue-cli的项目]
全部默认
开始运行node.js服务器：
cd vue-cli
npm install [安装依赖关系]
npm run dev
程序会自动启动浏览器，出现vue欢迎页面

现在我们来聊一下这个流程到底发生了什么：

原生的vue程序和jQuery类似，需要在HTML代码里通过类似<script src="vue.js">这样的标签嵌入vue.js库以使用vue带来的种种功能，这一点估计任何一个接触过前端的朋友们都懂。
思考：这样做的缺点是什么？
比如我们的页面事实上只用了vue.js库的一丁点小功能，但是我们却不得不加载整个vue.js库，这是一种资源浪费。有没有一种方法，可以动态地从vue.js这个大库里把那些我们用不上的功能自动剪切掉呢？

答案是webpack。

通过webpack，我们的vue程序不直接反馈到用户的浏览器中，而是在服务器端先进行一轮加工，最终以Javascript原生代码的形式回传到浏览器。
整个过程中，webpack会智能地以按需原则将vue程序打包，以及做一些转换工作，比如你的源程序里用到ES6的一些功能，而某些浏览器却不支持ES6，那么它会自动将ES6代码转换为ES5代码，并最终打包成一个单一的.js文件回传给浏览器。
这样做的好处是，实现了vue库的自动剪裁功能，节约了流量，不仅如此，webpack也不单单应用在vue，他可以实现很多代码转换工作，比如前面提到的ES6转为ES5.
此时，需要更新一下我们固有的前后端认知了，在以前，所谓前端就是指浏览器运行的那部分东西，在上古时期，它几乎和编程没有关系，那是美工和平面需要关注的东西，HTML在那时候就相当于一本带插画的电子书。再后来有了交互式页面，这时候需要一种胶水语言将浏览器端与服务器相连，所谓的“前端”程序就此诞生。它运行在浏览器内，好像一直以来履行这个职责的就只有Javascript，亘古不变(壮哉我大JS!)。后端程序，也就是运行在WEB服务器上的那部分一般用于业务处理的程序，比如说逻辑处理，数据库操作等。这个领域五花八门，从早期的C++,Perl，ASP，到“世界上最好的语言”PHP，再到Java，Python，Node.js等等，他们统称为大后端程序，前端浏览器（页面呈现）再到后端服务器（逻辑梳理）这个架构维持了相当长一段时间。
由于本文中开场那个问题的出现，于是现在后端又多了一个分支，你可以把它理解为“后台的前端部分”，它负责两件事：
1. 最终返回到用户浏览器的HTML页面渲染
2. 最终返回到用户浏览器的JS代码整合
  而传统意义上的“后端”，仍然负责原来的事情：
3. 业务逻辑处理以及数据库操作

于是乎，现在的后端，已经不再是单纯地只处理逻辑和数据库的后端了，换句话说，现在的WEB服务器存在着两个后端。

打开这个文件夹，在src下面有：
1. App.vue，看上去很像是一个HTML模版。
2. main.js, 它负责页面的渲染
3. index.html, 这是最终回传到用户浏览器的页面

在index.html里：
有一个<div id="app">的标签，和一个<script src="/dist/build.js">标签，
回到前面我们说的，所谓的“后台的前端部分”做了两件事，
1. HTML页面渲染，在这里由<div id="app">这个标签实现；
2. JS代码的整合，在这里由<script src="/dist/build.js">标签实现。

main.js 是这样的：
import Vue from 'vue' //导入vue库
import App from './App.vue' // 导入模版文件
new Vue({
el: '#app',
render: h => h(App) //将模版文件渲染后传递到index.html文件里的<div id="app">标签中去
})

而main.js又通过webpack完成打包工作后整合到/dist/build.js这个文件里。
回过头来总结一下：

App.vue是模版
main.js 读取模版并通过render函数的h参数，将模版渲染成可供浏览器识别的HTML代码
<script src="/dist/build.js"> 这个标签将vue.js (原生vue库)，用户js代码（main.js）整合为一个单一文件：build.js

如此完成了HTML页面渲染 + JS代码整合的全过程。
注意：整个过程似乎并没有涉及业务逻辑和数据库，因为那是大后端程序的事情，再次强调，所谓“后台的前端部分”只负责页面渲染和JS整合，传统意义上的大后端处理仍然是由PHP, Java, Python这些程序来完成，现在的大后端程序已经不像以前那样直接渲染HTML文件了，他们只处理逻辑，前端程序需要数据的时候，后端以API的形式提供逻辑和数据支持，如此，现在的前后端分离度比之从前要彻底得多。

二. 在Webstrom的配置：
Webstrom是一个非常优秀的JS IDE开发环境，它同时还支持node.js等等。如果不希望每次都在命令行输入npm run dev，那么我们可以在Webstrom IDE里做一些永久性设置：

【运行】按钮那里有一个Edit Configurations，点一下
点左上角的加号，添加npm配置
设置好package.json
Command 填 run
Script 填 dev
按下启动按钮，程序开始执行，去浏览器输入：http://localhost:8080/

webpacks + vue 的工作流介绍

相关推荐