4.持续性学习-Day22（大前端）2024-07-09

VSCode

插件
- Chinese
- minapp （微信小程序）
- ESlint （代码质量检查）

设置
- 字体大小
- 自动补全Emmet（table）

Node.js

下载成功确认

node -v

npm -v

语法

npm install cnpm -g //-g 就是全局安装

执行文件

PS F:\VSCodeWorkSpace\learndemo\ES6\node> node helloworld.js

http服务

//导入模块require，类似于import java.io
const http = require('http');
//1.创建http服务
http.createServer(function(req,resp){
    //告诉浏览器，以什么形式来解析代码
    resp.writeHead(200,{"content-type":"text/plain"})
    //给浏览器输出内容
    resp.end("hello server!!!");
}).listen(8888);
//2.监听一个端口8888
//3.启动运行服务 node httpserver.js
//4.浏览器访问
console.log("http://localhost:8888已启动");

mysql模块

安装外置模块

npm install mysql

//导入依赖包
var mysql = require("mysql2");
// 1.创建一个mysql连接
// 2.配置数据库连接信息
// 3.开辟连接
// 4.执行curd
// 5.关闭连接
// 6.运行查看效果
var connection = mysql.createConnection({
    host:"127.0.0.1",
    port:"3306",
    user:"root",
    password:"stujc0828",
    database:"school"
});
connection.connect();
connection.query("select * from student",function(error,results,fields){
    if(error){
        throw error;
    }
    console.log("results = ",results);
});
connection.end();

ES6(ECMAScript)

语法

let和const

const：常量

let：变量

//在实际开发和生产中，若果是小程序，uniapp或者是一些脚手架中，可以使用let和const
// 但是在web开发中，建议使用var，在低版本浏览器不支持let和const

模板字符串

<script>
    // 字符串会牵涉到动态部分
    var person = {
        name:"小金",
        address:"江苏"
    }
    console.log(`我是${person.name},住在${person.address}`);
</script>

函数默认值和箭头函数

// 函数默认参数
function fuc(a=100,b=100){
    return a+b;
}
console.log("result",fuc(a,b));

// 箭头函数 - 重点（小程序，unipp，一些常见的脚手架中大量使用）
var sum = (a,b)=>{
    return a+b;
}
var sum = (a,b)=> a+b;

对象简写

//对象是以key:value的形式存在
//如果key和变量的名称一致，只定义一次即可
//如果value是一个函数，可以把:function去掉，只剩下()即可

对象解构

// .取值，在key为变量的时候不可用，此时可以采用[]的方式
// es6对象解构 - 快速获取属性和方法的一种方式
var {name,age} = per;

传播操作符

var {param1,params2,...obj2} = obj1;

数组map

//Map
let arr = [1,2,3,4,5];
//传统方式
let newarr = [];
for (let i = 0; i < arr.length; i++) {
    newarr.push(arr[i]*2);
}
console.log("newarr:"+newarr);
//map - 自带的循环，并且会把处理的值回填对应的位置
let newarr2 = arr.map(ele=>ele*2)
console.log("newarr2:"+newarr2);

reduce

//reduce 
let newarr3 = arr.reduce((a,b)=>a+b);
console.log("newarr3:"+newarr3);

NPM包管理器

npm(Node Package Manage)

构建npm项目

npm init	//构建npm项目，得到一个package.json文件
npm init -y //自动构建
{
  "name": "npmpro",		//工程名
  "version": "1.0.0",	//版本号
  "description": "node工程",	//描述
  "main": "index.js",	//入口js文件
  "scripts": {	//运行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "node"
  ],
  "author": "ccjin",	//开发者
  "license": "ISC"		//授权协议
}

快速安装和依赖第三方模块

安装依赖第三方模块
npm install xxx 或 npm i xxx
安装位置
node_modules

//安装导入模块redis
npm i redis
const redis = require("redis");

//执行文件
node xxx
//终止运行
ctrl+c 两次

安装cnpm镜像，更改仓库路径

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm -v
cnpm install [name]

切换阿里源

npm config set registry https://registry.npmmirror.com/
npm config get registry
//还原设置
npm config set registry https://registry.npmjs.org/
npm config get registry

卸载

npm uninstall xxx

删除全部依赖包 npm uninstall *
( 删除指定的依赖包 npm uninstall xxx
删除全局的指定依赖 npm uninstall xxx -g
xxx为依赖名称)
清缓存 npm cache clean --force

安装npm包–rimraf npm install rimraf -g
执行命令 1rimraf node_modules

Babel

将ES6的代码转换为ES5代码，从而在现有环境中运行

 npm install --save-dev babel-preset-es2015	//狂神说

npm install -g babel -cli
npm install --global babel-cli --force //强制安装
babel --version

// npm install --save-dev @babel/core @babel/cli @babel/preset-env
// npm install --save-dev @babel/plugin-transform-runtime
// npm run build

模块化

"build": "babel src -d lib"
// npm run build

CoomonJS及ES6规则

commonjs

// 工具类
const sum = (a,b)=>a+b;
const sub = (a,b)=>a-b;
const mul = (a,b)=>a*b;
const di = (a,b)=>a/b;

// 导出提供使用
module.exports = {
    sum,sub,mul,di
}

const m = require('./四则运算');
let sum = m.sum(1,2);
console.log("sum:"+sum);
console.log("sum",m);

方式一

export function getList(){
    console.log("获取数据列表")
}

export function save(){
    console.log("保存数据");
}

//默认不支持es6语法
import {getList,save} from './userapi.js'
getList();
save();

方式二

function getList(){
    console.log("获取数据列表")
}

function save(){
    console.log("保存数据");
}
export default{
    getList,save
}

import user from './userapi.js'
user.getList();
user.save();

webpack

//安装
cnpm install -g webpack webpack-cli
webpack -v
webpack //打包
webpack -w //监听，自动打包

webpack.config.js

//导入path模块
const path = require("path");
//定义js打包的规则
module.exports = {
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js"
    }
}

//main.js导入
const util = require("./util.js");
const common = require("./common.js");

common.info("hello world ,"+util.add(100,100));

require("./style.css");

CSS打包

//安装style-loader和css-loader
npm install --save-dev style-loader css-loader

webpack.config.js

module.exports = {
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js"
    },
    module:{
        rules:[{
            test:/\.css$/,//把项目中所有的.css结尾的文件进行打包
            use:["style-loader","css-loader"]
        }]
    }
}

VUE

vue-element-admin

Idea Vue

安装插件vue

安装axios插件

常用属性

v-if
v-else-if
v-else
v-for
v-on
v-model
v-bind

组件化

组件组合slot插槽
组件内部绑定事件this.$emit('事件名',参数)
缓存计算数据computed

Vue-Cli

npm i vue-cli -g
vue info
vue init webpack myvue
cd myvue
npm install

webpack

npm install webpack -g
npm install webpack-cli -g

webpack.config.js

entry:入口文件，指定webpack用哪个文件作为项目的入口
output:输出，指定webpack把处理完的文件放置到指定路径
module:模块，用户处理各种类型的文件
plugins:插件，如：热更新、代码重用等
watch:监听，用于设置文件改动后自动打包

vue-router

npm i vue-router --save-dev

Element-ui

npm install element-ui

创建项目流程

vue init webpack projectName
cd projectName
npm install --save axios vue-axios
npm install vue-router --save -dev
npm install element-ui -S //-S save的缩写
npm install
npm install sass-loader node-sass --save -dev //-D 开发者的缩写
npm run dev

docsify文档生成

钩子

export default {
    props:['id'],
    name:"UserProfile",
    beforeRouteEnter:(to,from,next)=>{
        
    },
    beforeRouteLeave:(to,from,next)=>{
        
    } 
}

Git

版本控制

本地版本控制

Local Computer:Checkout ->Version DataBase
集中版本控制

Central VCS Server:Comupters
分布式版本控制

安装与卸载

安装

官网或镜像下载，无脑下一步
卸载

直接反安装，然后清除环境变量

说明

Git Bash：Unix与Linux风格的命令行，使用最多，推荐最多

Git CMD：Windows风格的命令行

Git GUI：图形界面的Git，不建议初学者使用，尽量先熟悉常用命令

常用Linux命令

cd:改变目录
cd.. 回退到上级目录，直接cd进入默认目录
pwd:显示当前所在的目录路径
ls(ll):列出当前目录中的所有文件，ll列出的内容更为详细
touch:新建一个文件
rm:删除一个文件
mkdir:新建一个目录，就是新建一个文件夹
rm -r:删除一个文件夹 rm -r src 删除src目录
```
rm -rf / 删除电脑中全部文件
```
mv移动文件:mv index.html src，index是要移动的文件，src是目标文件夹
reset:重新初始化终端/清屏
clear:清屏
history:查看历史命令
help:帮助
exit:退出
#表示注释

Git配置

git bash

-- 查看配置
git config -l
git config --system --list
git config --global --list
-- 全局配置文件
git/etc/gitconfig	//系统配置
C:\Users\Administrator\.gitconfig	//用户配置
-- 设置用户名、邮箱
git config --global user.name "stujc" #名称
git config --global user.email 879506287@qq.com #邮箱

Git基本理论

Git本地有三个工作区域：工作目录（work directory）、暂存区（stage/index）、资源库（repository或git directory）。如果在加上远程的git仓库（remote directory）就可以分为4个工作区

git add files/git checkout

git commit/git reset

git push/git pull

Git项目创建及克隆

-- 创建项目
git init
-- 克隆远程仓库到本地
git clone [url]
-- 全部文件添加到暂存区
git add . //文件状态变为暂存
git status //查看有没有被提交到暂存区
git commit -m ""	//提交暂存区的内容到本地仓库

忽略文件

创建 .gitignore 文件

#为注释
*.txt		#忽略所有 .txt结尾的文件
!lib.txt	#但lib.txt除外
/temp		#仅忽略项目根目录下的TODO文件，不包括其他目录temp
build/		#忽略build/目录下的所有文件
doc/*.txt	#忽略 doc/notes.txt 但不包括 doc/server/arch.txt

使用码云

注册登录码云，完善个人信息

设置本机绑定ssh公钥，实现免密登录

# 进入 C:\Users\Administrator\.ssh 目录
# 生成公钥
ssh-keygen -t rsa -C "Gitee SSH Key"

将公钥信息public key 添加到码云账户中即可
使用码云创建一个自己的仓库

Git分支

# 列出所有的本地分支
git branch
# 列出所有的远程分支
git branch -r
# 新建一个分支，但依然停留在当前分支
git branch [branch-name]
# 新建一个分支，并切换到该分支
git checkout -b [branch]
# 合并制定分支到当前分支
$ git merge [branch]
# 删除分支
$ git branch -d [branch-name]
# 删除远程分支
$ git push origin --delete [branch-name]
$ git branch -dr [remote/branch]

posted @ 2024-07-09 14:52 孟秋廿六阅读(20) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 持续性学习-Day16（前端基础JavaScript）

· 持续性学习-Day18（JavaWeb）

· 大前端进阶

· 大前端学习笔记

· 狂神说笔记——大前端技能快速入门18

公告

昵称：孟秋廿六
园龄： 4年3个月
粉丝： 0
关注： 2

+加关注

2025年3月

日

一

二

三

四

五

六

持续性学习-Day22（大前端）