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

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);

  • es6

方式一

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

创建项目流程

  1. vue init webpack projectName

  2. cd projectName

  3. npm install --save axios vue-axios

  4. npm install vue-router --save -dev

  5. npm install element-ui -S //-S save的缩写

  6. npm install

  7. npm install sass-loader node-sass --save -dev //-D 开发者的缩写

  8. 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命令

  1. cd:改变目录

  2. cd.. 回退到上级目录，直接cd进入默认目录

  3. pwd:显示当前所在的目录路径

  4. ls(ll):列出当前目录中的所有文件，ll列出的内容更为详细

  5. touch:新建一个文件

  6. rm:删除一个文件

  7. mkdir:新建一个目录，就是新建一个文件夹

  8. rm -r:删除一个文件夹 rm -r src 删除src目录

    rm -rf / 删除电脑中全部文件

  9. mv移动文件:mv index.html src，index是要移动的文件，src是目标文件夹

  10. reset:重新初始化终端/清屏

  11. clear:清屏

  12. history:查看历史命令

  13. help:帮助

  14. exit:退出

  15. #表示注释

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

使用码云

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

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

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

  3. 将公钥信息public key 添加到码云账户中即可

  4. 使用码云创建一个自己的仓库

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  孟秋廿六  阅读(23)  评论(0)    收藏  举报