webpack + vue.js怎么构建前端工程化

小编这次要给大家分享的是webpack + vue.js怎么构建前端工程化,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

<强> node . js基本入门

node . js介绍

node . js可以让javascript程序在后端运行起来。我们之前所熟知的javascript都是运行在前端浏览器,我们编写好了javascript代码后,由浏览器解释执行。而节点。js,可以让我们编写javascript,然后在后端运行起来。现在的javascript和java、python一样,可以操作I/O,操作数据库,或者其他各类操作系统资源。

上面这张图,和下面的这张图很像。可以认为,节点。js是javascript的一种跨平台运行在主机的实现。

下载节点。js(运行环境)

https://nodejs.org/en/ 

下载Visual Studio代码(开发环境)

https://code.visualstudio.com/ 

写过Java的同学应该都知道,我们要编写程序往往都需要导入很多其他额外的JAR包(官方的Java se包默认提供了)。早期在Maven出现之前,我们都是需要手动去下载各种框架的JAR包。自从有了Maven之后,我们不再需要手动下载了,直接在一个POM.XML文件中引入需要的依赖即可。在节点中,运行一个节点程序也会依赖于其他的一些模块。当然节点也会自带一些基本模块。那当我们需要使用这些模块的时候,我们需要从网络上下载。这个去网上下载非常麻烦.node官方提供了一个管理工具npm,这个工具可以根据需要自动从服务器下载各种包。这就省去了,我们自己去网上下载包的过程。

官方的npm在国内速度是比较慢的,可以使用淘宝的镜像

npm安装- g cnpm——注册表=https://registry.npm.taobao.org

安装完成后,就可以使用cnpm从淘宝镜像来下载,安装节点包

cnpm安装& lt;包的名称在

包的名称可以去https://npm.taobao.org/网站上搜索

每一个js文件就是一个模块(json等其实也可以作为一个模块),对应的就是一个模块对象。下面这一段程序,表示从外部引入一个模块,然后执行模块中的函数。

出口。世界=function () {
　　
　　console.log(& # 39;你好& # 39;);
　　
　　}

这样的代码,才能被调用。更简单来说,在包中定义的函数都是对外不可见的,要想被外部调用,需要使用出口来定义函数。

这个要求函数有点类似于C语言中的# include。它首先会从文件缓存缓存中查找传入的模块名,如果没有找到再查找原生模块,最后查找文件中加载。

节点。js全局对象

节点。js原生模块

创建项目

建立一个空的文件夹用于保存该项目

进入命令提示符,使用npm init初始化项目,结束后会自动生成一个package.json文件,这个文件中包含了项目的所有依赖包,可以把这个包。json文件理解为项目文件

创建客户服务模块

/* * 　　*客户服务 　　*/出口。CustomerService=function () { 　　这一点。客户=[];//添加客户 　　这一点。添加=function (cstm) { 　　this.customers.push (cstm); 　　}//根据客户名字移除 　　这一点。删除=function(名字){ 　　(var=0;我& lt;this.customers.length;+ + i) { 　　如果(this.customers[我]. name===名字){ 　　this.customers。拼接(我,1); 　　打破; 　　} 　　} 　　}//获取所有客户 　　这一点。findAll=function () { 　　返回this.customers; 　　} 　　}

webpack + vue.js怎么构建前端工程化