大前端知识汇总

参考视频：00、序言_哔哩哔哩_bilibili

        这个系列使得我能在 Html + css + js 的基础上，实现对高级框架和工具的知识过渡，特此积累总结。

一、VSCode

1、安装

下载地址：https://code.visualstudio.com/

2、插件

安装中文汉化插件

其他插件安装

open in browser

ESLint

Volar

Element UI snippets

3、配置

    // git配置
    "git.path": "D:/JAVA/Git/bin/git.exe",
    "git.openRepositoryInParentFolders": "never",
    "open-in-browser.default": "chrome",
    // 禁止自动更新
    "update.mode": "none",
    "update.enableWindowsBackgroundUpdates": false,

二、Node.js

官网： http://nodejs.cn/

1、介绍

        Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
        简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.js
        Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2、安装

这里采用解压缩的方式安装，先解压缩安装包，

再打开解压后的目录新建2个文件夹：node_global、node_cache

环境变量配置

NODE_PATH：

        D:\xuexi\Aqianduan\node-v14.15.0-win-x64

path中添加2行：

        ① %NODE_PATH%

        ② D:\xuexi\Aqianduan\node-v14.15.0-win-x64\node_global

        因为vue、cnpm、webpack、babel等都安装在这里，要全局运行他们的指令，所以要配置环境变量。

三、npm

        NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于JavaWeb中的的Maven！

        官方网站：https://www.npmjs.com/

1、安装

node.js自带了npm，环境变量不需要配置了

因为node.js和npm版本要配套，所以

打开cmd，输入配置指令

npm config set prefix "D:\xuexi\Aqianduan\node-v14.15.0-win-x64\node_global"
npm config set cache "D:\xuexi\Aqianduan\node-v14.15.0-win-x64\node_cache"

npm config set registry "http://registry.npm.taobao.org/"

输入npm config list

在C盘找到.npmrc文件，可以直接修改

例如：python=D:\xuexi\python

最后打开cmd，运行node -v

2、指令

安装

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>

npm install vue
npm install vue mysql redis
npm i vue
npm i vue @2.7.1
npm i -g vue
npm i --save-dev vue

卸载

npm uninstall vue
npm uninstall -g vue

其他

npm update vue
npm update -g vue

3、创建项目

生成package.json文件

npm init
npm init -y
npm init install -y

使用安装的模块

// 如果导入了 mysql 和 redis 模块
// 则在某 js 文件中
const redis = required("redis");
const mysql = required("mysql");

4、package.json

package.json 就类似 pom.xml 文件

导入的包的相关信息，存储在 dependencies 属性中

记录的作用：实现复用，如果新建一个项目，该项目需要很多之前项目中的基础的包

• 1.复制之前的 package.json 文件到新项目目录下。
• 2.该项目文件路径打开 cmd → npm install : 则开始自动下载，可以避免重复下载模块，很方便去集成第三方。
• 3.为什么不直接点，直接拷贝：node_modules 呢？下载模块的依赖过多，文件过大，混乱文件很多，复制粘贴需要很长时间

四、babel

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

1、安装

npm install -g babel-cli
#查看是否安装成功
babel --version

2、在项目里配置

创建文件 src/example.js

创建.babelrc文件，添加{ "presets": ["es2015"], "plugins": []}

安装转码器，

npm install --save-dev babel-preset-es2015

# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件mkdir dist1
# --out-file 或 -o 参数指定输出文件babel src/example.js --out-file dist1/compiled.js
# 或者babel src/example.js -o dist1/compiled.js
# 整个目录转码mkdir dist2# --out-dir 或 -d 参数指定输出目录babel src --out-dir dist2
# 把项目 src 目录下的 js 文件进行转码，然后创建 dist2 文件夹，输出转码后的文件babel src -d dist2

3、自定义脚本

mkdir dist
npm run convert

五、模块化

1、简介

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。

        Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

2、commonJS规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

CommonJS使用 exports 和require 来导出、导入模块。

导出模块

// 定义成员：
const sum = function(a,b){
    return a + b
}
const subtract = function(a,b){
    return a - b
}
const multiply = function(a,b){
    return a * b
}
const divide = function(a,b){
    return a / b
}

// 导出成员：
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}

导入模块

//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)

3、ES6规范

ES6使用 export 和 import 来导出、导入模块。

导出模块

export function getList() {
    console.log('获取数据列表')
}
export function save() {
    console.log('保存数据')
}

导入模块

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from './userApi.js'
import user from './userApi.js'

getList()
save()
user.getList()
user.save()

六、Webpack

        Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
进行加密和压缩，提高访问速度，也保证了代码安全

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

1、安装

npm install -g webpack webpack-cli
webpack -v

2、初始化项目

1、创建webpack文件夹，一个 nodejs 项目

npm init -y

2、创建src文件夹

3、src下创建common.js

exports.info = function (str) {
    console.log(str);
    document.write(str);
}

4、src下创建utils.js

exports.add = function (a, b) {
    return a + b;
}

5、src下创建main.js：入口文件，将要合并的模块进行集中引入

const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

3、js打包

① webpack目录下创建配置文件webpack.config.js

//导入 path 模块：nodejs 的内置模块
const path = require("path"); 
// 定义 js 打包的规则
module.exports = {
    //入口函数，从哪里开始进行编译打包
    entry: './src/main.js', //配置入口文件
    //编译成功后，把内容输出到哪里去？
    output: {
        //__dirname 这个是 nodejs 中的常量
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

② 命令行执行编译命令

webpack --mode=development
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

③ 运行npm命令执行打包

npm run dev

④ webpack目录下创建index.html ， 引用bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

4、css打包

① 安装style-loader和 css-loader

        Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器。首先我们需要安装相关Loader插件

• css-loader 是将 css 装载到 javascript
• style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

② 配置规则，修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{
        //其他配置
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

③ 在src文件夹创建style.css

body{
    background:pink;
}

④ 修改main.js，在第一行引入style.css

require('./style.css');

⑤ 运行编译命令

npm run dev

七、Vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

官网：vue-element-admin