🚩 写在前面
我为什么要花时间去写这个笔记?
由于在学习该项目的过程中发现了原讲义存在的一些问题,所以该笔记基于「学成在线」微服务项目 PDF
讲义进行编写,并且投入了时间去优化了笔记的格式、代码的高亮、重点的标记等。
以及一些原讲义中所描述的一些知识点使我无法理解的内容,我会对这些内容的表达方式进行修改或者提出一些问题,并且用我自己所理解的一些想法去重新的解释这个问题。
总结一下原 PDF
讲义中已知的一些问题:
- 从
PDF
中复制出来的代码,部分特殊符号的编码有问题,并且不易被发现,例如横杠-
,从PDF直接复制出来的话是无法运行的。 - 有时候一些重复且简单的代码,我们需要直接从讲义中直接复制,而部分PDF编辑器复制出来的代码格式可能会变乱,且PDF中没有代码高亮,代码可阅读性差,并且复制出来时会有代码缩进错乱等问题。
- 部分内容是重点但在讲义中只是简单的描述,这并不方便我们后期回顾该课程的知识点,所以我在一些重点的内容上加上了更多的解释。
如有不足的地方,欢迎小伙伴们补充、填坑。
😎 知识点概览
为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容,并且能够从该章节的笔记中得到一些帮助,所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。
本章节为【学成在线】项目的 day02
的内容
-
vue
基础语法 -
对
webpack
与webpack-dev-server
的基本使用,理解webpack
的打包过程。 -
CMS
前端工程的基础构建 -
解决前端跨域请求的问题,并理解前端请求数据的流程。
-
配合使用
Element-UI
的table
组件进行分页查询
目录
文章目录
一、vue基础
vue基础部分内容的笔记略过,如过你仍需要该阶段的学习,阅读官方的讲义或者移步:https://cn.vuejs.org/v2/guide/ 进行阅读和练习。
二、webpack入门
0x01 概述
使用vue.js开发大型应用需要使用 webpack
打包工具,本节研究webpack的使用方法。
Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。
0x02 使用webpack有什么好处呢?
从图中我们可以看出,Webpack 可以将js、css、png等多种静态资源 进行打包
-
模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发,最后使用webpack将这些小文件打包成一个文
件,减少了http的请求次数。
webpack可以实现按需打包,为了避免出现打包文件过大可以打包成多个文件。 -
编译typescript、ES6等高级js语法
随着前端技术的强大,开发中可以使用javascript的很多高级版本,比如:typescript、ES6等,方便开发,
webpack可以将打包文件转换成浏览器可识别的js语法。 -
CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术,通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。
0x03 webpack的缺点
1、配置有些繁琐
2、文档不丰富
0x04 安装 npm
node.js
已经集成了npm工具,在命令提示符输入 npm -v 可查看当前npm版本,node可以直接去官网下载安装
设置包路径
npm config set prefix "C:\Program Files\nodejs\npm_modules"
npm config set cache "c:\Program Files\nodejs\npm_cache"
0x05 安装 cnpm
执行以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后执行命令 cnpm -v
0x03 安装 webpack
node.js 安装包分为两种模式
- 本地安装:仅将webpack安装在当前项目的node_modules目录中,仅对当前项目有效。
- 全局安装:将webpack安装在本机,对所有项目有效,全局安装会锁定一个webpack版本,该版本可能不适用某个项目。全局安装需要添加 -g 参数
本地安装
npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)
全局安装
全局安装加-g,如下:全局安装就将webpack的js包下载到npm的包路径下。
npm install webpack -g 或 cnpm install webpack -g
安装 webpack 指定的版本:
进入webpacktest测试目录,运行:cnpm install --save-dev webpack@3.6.0
全局安装:npm install webpack@3.6.0 -g
或 cnpm install webpack@3.6.0 -g
0x07 入门程序
通过本入门程序体会webpack打包的过程及模块化开发的思想。
需求分析
通过入门程序实现对js文件的打包,体会webpack是如何对应用进行模块化管理。
对上边1+1=2的例子使用webpack进行模块化管理
定义 model01.js
在webpacktest01
目录下创建model01.js
将本程序使用的加法运算的js方法抽取到一个js文件,此文件就是一个模块 ,代码如下
//定义add函数
function add(x, y) {
return x+y;
}
//导出add函数
module.exports.add = add;
定义main.js
在webpacktest01
目录下创建main.js
,main.js
是本程序的js主文件,包括如下内容:
1、在此文件中会引用model01.js模块
2、引用vue.min.js(它也一个模块)
3、将html页面中构建vue实例的代码放在main.js中。
var {
add} = require("./model01.js")
var Vue = require("./vue.min")
// 实例化Vue对象
//vm :叫做MVVM中的 View Model
var VM = new Vue({
el:"#app",//表示当前vue对象接管app的div区域
data:{
name:'黑马程序员',// 相当于是MVVM中的Model这个角色
num1:0,
num2:0,
result:0,
url:'http://www.itcast.cn'
},
methods:{
change:function(){
this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));
}
}
});
打包测试
上边将 mode01.js
模块及 main.js
主文件编写完成,下边使用 webpack
对这些js文件进行打包
1、进入程序目录,执行 webpack main.js -o build.js
,这段指令表示将 main.js
打包输出为 build.js
文件执行完成,观察程序目录是否出现 build.js
。
2、在创建一个html ,这里我命名为 vue_02.html
并 中引用 build.js
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js入门程序</title>