模块化开发

模块化介绍

以前在前端开发中需要使用js文件的时候是通过script标签来引入的,但是随着时间的发展,现在很多项目业务变的复杂了,这就会导致代码也越来越庞大,此时就会出现下面的问题:

  • 命名冲突

    多个js文件中如果有同名的全局变量的话,就会出现覆盖的问题

  • 文件依赖

    多个js文件之间引用的问题

为了解决上面的问题,就有了模块化的概念,模块化就是把单独的功能封装到一个模块中,理论上是一个功能一个模块,在使用的时候可以将模块导入,多个模块就构成了一个项目,模块化的优点是提高代码的重用性和可维护性。举个例子,一辆汽车可以看做是由多个模块组成的,发动机模块,轮胎模块等等。

下面来看一些模块化的规范

下面列出了一些常见的模块化规范,目前主要来学习ES6(ECMAScript 6.0)的Modules。

  • ES6的Modules
  • commonJS
  • AMD
  • CMD

这里说下ECMAScript和javascript的关系。ECMAScript是规范,javascript是实现,早期的时候ECMAScript规范就是针对javascript来定制的,除了javascript之外,ECMAScript的实现还有JScript、ActionScript。

在ES6模块规范中定义了每个js文件是一个模块,导入模块的时候使用import关键字,导出模块的时候使用export关键字

webpack工具

我们可以使用webpack工具更方便的进行前端模块化开发。webpack 是一个现代 JavaScript 应用程序的静态模块打包器,主要作用是:

  • 模块

    使用webpack之后可以更方便的处理模块之间的依赖关系。

  • 打包

    有些前端编写代码不能被浏览器解析,比如sass,typescript等,此时可以使用webpack的打包功能将这些代码生成为浏览器识别的代码。

npm简介

要想使用webpack工具的话,可以通过npm(Node Package Manager,即node包管理器)来安装,npm是javascript编写的一个包管理系统。npm包含于nodejs中,所以这里需要先安装nodejs。这个npm有点像maven,可以用来管理包。

nodejs官网:https://nodejs.org/zh-cn/

安装之后打开命令提示符cmd,输入下面命令,如果能够看到nodejs版本号则说明安装成功:

node -v

输入下面命令可以查看当前npm版本:

npm -v

npm下载慢的问题

我们会通过npm来下载需要的依赖,但是npm服务器在国外,因此在下载的时候速度会比较慢,此时可以使用国内淘宝提供的镜像。

查看npm配置信息,如果里面的registry是https://registry.npm.taobao.org/的话,说明已经是淘宝镜像了,无需再执行后面的操作:

npm config list

安装淘宝镜像命令:

npm install cnpm -g

之后就可以使用cnpm命令来安装依赖了,这里通过cnpm命令代替了以前的npm命令,比如:

npm install vue

使用cnpm之后:

cnpm install vue

此时在使用npm命令的时候会从国外服务器下载依赖,使用cnpm的时候会从国内镜像的服务器上下载,那如果我即想使用npm命令又希望从国内镜像服务器服务器上下载怎么办?执行下面命令即可

npm config set registry https://registry.npm.taobao.org/

需要注意的是当要自己发布镜像的时候需要再改成国外的服务:

npm config set registry https://registry.npmjs.org/

npm全局安装路径

npm里面可以安装模块,分为两个方式

  • 全局安装

    默认会安装c盘的目录下,安装后任意项目都能使用

  • 局部安装

    会安装到当前的项目下,只能被当前项目使用

修改默认全局安装路径,首先在任意盘符下创建两个路径,路径中不要包含中文和特殊字符,我创建的:

E:\nodejs\node_global
E:\nodejs\node_cache

之后将这两个路径配置到环境变量path中,然后在命令提示符中输入下面命令,修改npm全局安装的路径(注意这个路径要写你本地创建的路径):

npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"

这样在使用全局安装的时候就会安装到E:\nodejs\node_global这个路径下了。

npm常用命令

虽然npm包含于nodejs中,但是npm的更新频率比nodejs快一些,因此可以通过下面命令安装最新的npm版本:

npm install npm@latest -g

安装依赖命令:

npm install 依赖名

其中install可以简写为i

npm i 依赖名

安装指定版本依赖

npm i 依赖名@版本号

卸载依赖命令:

npm uninstall 依赖名

更新依赖命令:

npm update 依赖名

全局安装webpack

npm i webpack -g

这里安装的是webpack 4的版本,还需要使再单独安装webpack cli

npm i webpack-cli -g

安装之后查看版本

webpack -v

使用vuecli脚手架

vuecli是一款脚手架工具,使用vue之后可以快速的搭建一个项目工程,省去了一些繁琐的配置。要使用vuecli的话,可以从npm中进行安装。

安装命令

npm install -g @vue/cli

安装之后查看版本信息

vue --version

在创建vue项目之前先安装一下yarn

npm i -g yarn

安装之后就可以使用vuecli创建项目了,通过vuecli创建项目时npm会下载相关的依赖放到node_modules目录下,如果你使用的开发工具是idea的话,这些文件较多会导致idea卡顿,需要在idea中设置忽略该文件夹

打开设置,setting->Editor->File Types在Ignore files and folders中添加node_modules

创建vue项目:

vue create 你的项目的名字

成功之后会生成如下结构:

  • node_modules

    当前vue项目依赖的模块

  • public

    存放静态文件,图片之类的

  • src

    存放源码

  • .gitignore

    git忽略提交的文件

  • babel.config.js

    转换ecmascript语法的

  • package.json

    包含项目的基本信息和相关依赖信息

  • README.md

    可以填写项目的一些基本信息

  • yarn.lock

    用来锁定具体的依赖版本号

启动项目

使用vuecli之后,需要在npm中输入命令来启动项目,在控制台输入下面命令即可启动项目

npm run serve

默认端口号是8080,启动之后从浏览器中输入http://localhost:8080,如果显示vue页面的话则说明启动成功

修改端口号

方式一:

打开node_modules/@vue/cli-service/lib/commands/serve.js 将里面的8080修改成你需要的端口号。

方式二:

在vue项目根目录下创建vue.config.js文件,里面编写下面内容:

module.exports = {
    devServer: {
        port: 8881,     // 端口
    },
    lintOnSave: false   // 取消 eslint 验证
};

vuecli中的文件

使用vuecli创建好之后的项目会生成一个main.js文件,该文件是入口js文件,作用是创建vue对象,加载组件App,将vue对象挂载到index.html中。

  • render函数,将组件展示到html页面中。
  • h => h(App)使用了箭头函数,相当于是
    function (createElement) {
        return createElement(App);
    }
    
  • $mount(‘#app’)作用跟el是一样的,将vue对象挂载到DOM中

main.js源码注释

import Vue from 'vue'//导入vue模块
import App from './App.vue'//导入App.vue组件

Vue.config.productionTip = false//阻止vue启动时显示信息

/*
  创建vue对象,加载组件App,将vue对象挂载到index.html中
*/
new Vue({
  render: h => h(App),
}).$mount('#app')

箭头函数

ES6中可以使用=>来定义函数,作用就是简化定义函数的代码。

普通定义函数:

const f = function (v) {
  return v;
};

使用箭头函数:

const f = (v) => {
  return v
}

如果只有一个参数的话,小括号可以省略:

const f = v => {
  return v
}

只有一条语句的话,大括号和return可以省略:

const f = v => v

两个参数

const f = (a,b) => {
  return a + b;
}

只有一条语句,可以省略大括号和return

const f = (a,b) => a + b;
Category: vue