前端软件以及相关插件第三方库基本使用

安装软件

Visual Studio Code

软件网址：https://code.visualstudio.com/

安装插件

Chinese (Simplified) (简体中文)

Easy LESS（自动将less转化成css文件，需要配置）

• 配置：

• 第一， 文件 > 首选项 > 设置

  第二， 在扩展里面找到Easyless点一下 setting.json

  第三，在json配置中加入，less.compile(less配置)

• "less.compile": {
  	"compress": false,//是否压缩
  	"sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
  	"out": true, // 是否输出css文件，false为不输出，千万不要是false
  	"outExt": ".css", // 输出文件的后缀,小程序可以写‘wxss‘
  }
  

open in browser（编辑器菜单右键html，在默认浏览器打开了）

Live Server （实时加载功能）

Auto Rename Tag （自动补齐，修改标签对）

AutoFileName（自动补全路径）

Beautify（格式化，自动对齐）

ES7+ React/Redux/React-Native snippets（快速生成代码块）

Vetur（vue2语法高亮）

Vue Language Features (Volar) 简称volar（vue3语法高亮）

vscode-icons （VsCode中的图标插件，可以控制vscode中的文件管理的树目录显示图标）

HBuilderX

https://www.dcloud.io/hbuilderx.html

轻便的编辑器

你需要一个框架，来帮助你适配目前市场上较为热门的所有平台，这个框架，就是：uni-app。

Node环境的安装

Node的安装分为两种方式： 直接安装和NVM安装。

nvm方式安装

NVM(Node version Manager) 一个用于管理Node多版本的工具。

安装过node的，需要先卸载之前安装的node

安装nvm

下载地址：https://github.com/coreybutler/nvm-windows/releases

建议安装

• nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。
• nvm-setup.zip：安装版，推荐使用

安装目录要选择一个非中文的目录

查询是否安装成功

win + R
输入：cmd 回车
进入命令界面 输入：
$ nvm version

得到版本号，说明安装成功

设置nvm的镜像地址

打开nvm的安装目录

一般的路径是在 C:/用户/XXX/AppData/Roaming/nvm

打开里面的 settings.txt 对里面的镜像地址进行设置

//把下面的两行复制到最后
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

安装node

win + R 打开命令行工具

查看是否已经下载node或者查看已经安装的版本

$ nvm list

没有安装过：No installations recognized
安装过的：出现版本号（例如：*14.15.5）

下载指定版本

node的中文官方地址：https://nodejs.org/zh-cn/download/ 或者 http://nodejs.cn/download/

$ nvm install 指定版本

切换指定版本

$ nvm use 指定版本

查看当前node版本

$ node -v

node 运行文件

$ node 文件名
例如： $ node App.js

npm的操作

在安装Node的时候就已经"捆绑"安装了。只需要在cmd中输入 npm -v 就能看到当前的npm的版本号。

初始化项目（新项目都需要初始化）

$ npm init -y

//生成一个package.json文件，文件描述了我们整个node项目的基本信息。

下载需要的第三方模块（库）

$ npm install 模块名称

在https://npmjs.com 查找对应的文档学习如何使用下载下来的模块。

npm的安装模式

# 全局安装
//一次安装，在任何项目都能用，一般是方便项目构建的工具
npm install -g 模块    或者   npm install --global 模块

# 生产依赖安装
//上线需要依赖的模块
npm install --save-dev 模块 或者  npm install -S 模块

# 开发依赖安装
// 只是在开发的时候使用的模块，上线不需要使用
npm install --dev 模块 或者 npm install -D 模块

热启动 nodemon

安装：

npm install -g nodemon

使用

nodemon 01.js

全局安装了nodemon后，只需要把node命令换成nodemon即可

npm镜像

如果下载模块很慢，一般就是网络问题。npn默认也是到国外下载包的，所以我们可以手动修改其下载的源

# 配置到淘宝服务器
npm config set registry https://registry.npm.taobao.org
# 查看 registry 是否配置正确
npm config get registry

yarn

一个新的 JS 包管理工具，旨在取代 npm 这种包管理工具。

官网：
https://yarnpkg.com/en/docs

中文参考链接：
https://yarn.bootcss.com/

安装

//管理员模式运行cmd
输入：
$ npm install -g yarn

常用命令：

npm	yarn
npm init -y	yarn init -y	初始化项目
npm install react --save	yarn add react	下载安装（添加依赖包）开发依赖安装
npm uninstall react --save	yarn remove react	卸载模块
npm install react --save-dev	yarn add react --dev	生产依赖安装
npm update --save	yarn upgrade	升级依赖包
npm install -g nodemon	yarn global add nodemon
npm install	yarn install	安装全部依赖
npm list -g		查看所有全局安装的模块

yarn 全局安装后，命令不生效

背景：

1. 执行 yarn global add nodemon 后，重启bash…`， vue 命令依然不生效
2. 而 npm 全局安装（npm install -g nodemon）后，命令生效

原因：没有进行环境变量的配置

解决办法：

1.执行如下命令，得出 yarn 全局安装的命令所处的安装目录

yarn global bin 

2.复制安装目录至电脑的环境变量中

系统>高级系统设置>环境变量>系统变量 Path>新增

3.重新启动终端，发现全局命令行可以生效了

pug模板实现ssr

express官方推荐使用pug模板引擎来实现ssr

安装

npm i pug   或者  yarn add pug

【pug官方文档】](https://pugjs.org/api/getting-started.html)

数据库

phpstudy

phpstudy官网

vue

安装vue

使用npm安装

$ npm install vue -g

//-g全局安装

查询vue的版本

vue --version

如果出现以下报错：

无法加载文件

vue : 无法加载文件 C:\Program Files\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本 ……

解决方法：
1、在命令框输入set-ExecutionPolicy RemoteSigned 

2、然后命令框出现：执行策略更改……执行策略可以帮助你防止执行不信任的脚本 ……
选择y或者a就可以了
[y]是，[a]全是a

3、然后就可以执行查询版本的命名了
$ vue -v

Webpack

安装Webpack

webpack是一个静态模块打包工具

主要打包vue cli创建的项目

要想让我们写好的模块化代码在各式各样的浏览器上能做到兼容，就必须借助于其他工具；而webpack的其中一个核心就是让我们可以进行模块化开发，并帮我们处理模块间的依赖关系。不仅仅是Javascript文件，我们的css、图片、json文件等在webpack中都可以当作模块来使用，这就是webpack的模块化概念。

1、生成项目依赖文件
// 执行后生成package.json文件
$ npm init -y

2、安装依赖
// 最后的参数-D是安装到package.json的开发依赖devDependencies(开发环境)对象里，也可以用 --save-dev代替
$ npm install webpack webpack-cli -D

// -S是--save的简写，这样安装的话，会安装到dependencies(生产环境)对象里，也可以用 --save代替
$ npm install jquery -S

安装

要使用 webpack，那么必然需要安装 webpack、webpack-cli:

npm install webpack@5.65.0 webpack-cli@4.9.1 -D

新建配置文件

第一步：单独新建一个webpack的配置文件webpack.config.js,把项目需要的webpack配置写入进去。

webpack.config.js

const path = require('path');
module.exports = {
    mode: "development", // 环境变量
    entry: './src/main.js', // 入口文件, 可以配置多个，写成是对象
    output: {
        // 输出文件目录（将来所有资源输出的公共目录，包括css和静态文件等等）
        path: path.resolve(__dirname, "dist"),
        // 入口文件名称（指定名称+目录）
        filename: "[name].[hash:8].js",
        // 所有资源引入公共路径前缀，一般用于生产环境，小心使用
        publicPath: "",
        clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用, webpack5新增。
    }
}

第二步：新建入口文件：

src/main.js

import Animal from './animal'

const cat = new Animal('cat');
console.log(cat);

src/animal.js

export default class Animal {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

第三步：增加项目启动命令：

package.json

{
  ....
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js"
  },
	...
}

第四步：执行命令

npm run dev
# 或者
yarn dev

安装插件 plugins

可以用于执行范围更广的任务。从打包优化和压缩，资源管理，一直到重新定义环境中的变量等。

命令行执行：

npm install html-webpack-plugin webpack-dev-server -D

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development", // 环境变量
    entry: './src/main.js', // 入口文件, 可以配置多个，写成是对象
    output: {
        // 输出文件目录（将来所有资源输出的公共目录，包括css和静态文件等等）
        path: path.resolve(__dirname, "dist"),
        // 入口文件名称（指定名称+目录）
        filename: "[name].[hash:8].js",
        // 所有资源引入公共路径前缀，一般用于生产环境，小心使用
        publicPath: "",
        clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用, webpack5新增。
    },
    // devServer（开发环境下配置）：
    devServer: {
        port: 5000,
        open: true, // 自动打开浏览器
        hot: true, //开启HMR功能
    },
    plugins: [
        //数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包后的文件名
            minify: {
                collapseWhitespace: false, //是否折叠空白
            }
        })
    ]
}

根目录新建index.html

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

修改启动命令：

package.json

{
	...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  },
  ...
}

执行命令：

npm run dev
# 或者
yarn dev

现在只要修改src里面的文件，项目就会自动重新打包编译，自动更新到浏览器上。

项目使用vue文件

安装Vue和相关的loader

npm i vue@2.6.0
npm i vue-loader css-loader style-loader vue-template-compiler@2.6.0 -D 

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// vue-loader V15版本以上，需要引入VueLoaderPlugin插件，它的作用是将你定义过的js、css等规则应用到vue文件中去。
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: "development", // 环境变量
    entry: './src/main.js', // 入口文件, 可以配置多个，写成是对象
    output: {
        // 输出文件目录（将来所有资源输出的公共目录，包括css和静态文件等等）
        path: path.resolve(__dirname, "dist"),
        // 入口文件名称（指定名称+目录）
        filename: "[name].[hash:8].js",
        // 所有资源引入公共路径前缀，一般用于生产环境，小心使用
        publicPath: "",
        clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用, webpack5新增。
    },
    // devServer（开发环境下配置）：
    devServer: {
        port: 5000,
        open: true, // 自动打开浏览器
        hot: true, //开启HMR功能
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                ],
            },
        ],
    },
    plugins: [
        //数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包后的文件名
            minify: {
                collapseWhitespace: false, //是否折叠空白
            }
        }),
        new VueLoaderPlugin()
    ]
}

src/main.js

import Animal from './animal'
import Vue from 'vue';
import App from './App.vue';

const cat = new Animal('cat');
console.log(cat, 123);

new Vue({
    render: h => h(App)
}).$mount('#app');

src/App.vue

<template>
  <div>App组件</div>
</template>

<script>
export default {

}
</script>

<style>
div {
    color: red;
}
</style>

babel-loader的使用

babel:将JS代码向低版本转换，webapck项目可以使用 babel-loader。

安装 babel-loader

npm install -D babel-loader @babel/core @babel/preset-env

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// vue-loader V15版本以上，需要引入VueLoaderPlugin插件，它的作用是将你定义过的js、css等规则应用到vue文件中去。
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: "development", // 环境变量
    entry: './src/main.js', // 入口文件, 可以配置多个，写成是对象
    output: {
        // 输出文件目录（将来所有资源输出的公共目录，包括css和静态文件等等）
        path: path.resolve(__dirname, "dist"),
        // 入口文件名称（指定名称+目录）
        filename: "[name].[hash:8].js",
        // 所有资源引入公共路径前缀，一般用于生产环境，小心使用
        publicPath: "",
        clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用, webpack5新增。
    },
    // devServer（开发环境下配置）：
    devServer: {
        port: 5000,
        open: true, // 自动打开浏览器
        hot: true, //开启HMR功能
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                ],
            },
        ],
    },
    plugins: [
        //数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包后的文件名
            minify: {
                collapseWhitespace: false, //是否折叠空白
            }
        }),
        new VueLoaderPlugin()
    ]
}

webpack-dev-server(热重载)

如果修改了vue 需要再跑一次npm run start命令才有用，这时候就需要webpack-dev-server(热重载)

安装

$ npm install webpack-dev-server -D

"scripts": {
	"start": "webpack-dev-server --open --port 3002 --hot",
  "build": "webpack --config webpack.config.js"
}

// --open 自动打开浏览器
// --port 服务监听的端口 3002
// --hot  自动更新

使用css文件报错

因为webpack默认是不识别.css文件的，需要我们通过 loader 将 .css 文件进行解释成正确的模块。

安装css-loader和style-loader

$ npm install css-loader style-loader -D 
//index.css -> bundle.js -> style-loader -> <style> index.html
// css-loader的作用是将index.css文件解析为webpack能识别的模块，然后打包进bundle.js里面，但是这样样式并未成功显示在浏览器中。
// style-loader的作用就是将打包到bundle.js中的样式绑定到浏览器上，以style标签的形式显示出来

安装ES6 转 ES5

$ npm install babel-loader @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/runtime -D

配置loader

{
  test: /\.js$/,
  use: [{
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env'
      ],
      plugins: [
        [require("@babel/plugin-transform-runtime"), { "legacy": true }],
        [require("@babel/plugin-proposal-class-properties"), { "legacy": true }]
      ]
    }
  }],
  exclude: /node_modules/
}

Vue CLI框架

创建Vue CLI框架

1. CLI（Command Line Interface）.翻译为命令行界面，就是我们所说的脚手架。
2. Vue CLI是一个官方发布的vue项目脚手架
3. 使用vue-cli可以快速搭建Vue环境和webpack配置

安装vue cli 脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

新建项目：

//在当前文件夹新建项目
vue create .

//在新文件夹创建项目
vue create 文件名

文件名不要用关键字或者其他不可用，不建议用的字段



Vue CLI v5.0.1
? Generate project in current directory? 
    Yes


Vue CLI v5.0.1
? Please pick a preset: 
		Manually select features  //手动选择功能
        
? Check the features needed for your project: 
		Babel, Router, Vuex, CSS Pre-processors

? Choose a version of Vue.js that you want to start the project with 
         2.x
        
? Use history mode for router? (Requires proper server setup for index fallback in production) 
        Yes
        
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
		Less
        
? Where do you prefer placing config for Babel, ESLint, etc.? 
            In package.json   //在package.json文件里面
        
? Save this as a preset for future projects? 
            No

Git

下载git ：https://git-scm.com/downloads

git的命令

git init : 本地初始化(初始化git环境), 这个会生成一个.git目录

git add : (把工作区的改变提交到暂存区)

git commit : (暂存区的内容提交本地仓库)

git push origin 分支: (把本地仓库提交远程仓库)

git clone 仓库地址(https或者ssh): 克隆仓库

配置ssh公钥: ssh-keygen -t ed25519 -C “xxxxx@xxxxx.com” 把生成好的公钥.pub结尾的文件内容复制到对应网站上

git fetch origin 分支: 同步远程仓库的分支信息

git pull origin 分支:更新本地仓库的某一个分支的代码 (相当于 pull = fetch + merge)

git switch 分支; git checkout 分支; : 切换分支

git switch -c 分支; git checkout -b 分支: 创建分支

git branch -a : 查看本地仓库的所有分支

git status: 查看仓库的状态

git log: 查看提交(commit)的信息

git commit --amend: 修改提交信息

git reset --hard commitid: 回退指定版本

在visual studio Code中配置git

在settings.json中写入

    "terminal.integrated.profiles.windows": {
        "Git-Bash": {
            // "terminal.integrated.shell.windows": "D:\\Program Files (x86)\\Git\\bin\\bash.exe",
            "path": "D:\\Program Files (x86)\\Git\\bin\\bash.exe",
            "args": [],
            "icon": "terminal-bash"
        },
    },
    "terminal.integrated.defaultProfile.windows": "Git-Bash"

Gitee配置SSH公钥

• 注册（用邮箱注册），并登录到Gitee后，鼠标移至右上角头像，下拉选项中选择 设置
• 左侧菜单栏中选择SSH公钥，在右侧添加公钥
• 怎么生成本机的公钥？请查看：https://gitee.com/help/articles/4181

命令生成sshkey

$ ssh-keygen -t ed25519 -C "xxxxx@xxxxx.com" 

按照提示完成三次回车，即可生成 ssh key。通过查看 ~/.ssh/id_ed25519.pub 文件内容，获取到你的 public key

$ cat ~/.ssh/id_ed25519.pub

复制生成后的 ssh key，通过仓库主页 「管理」->「部署公钥管理」->「添加部署公钥」 ，添加生成的 public key 添加到仓库中。

添加后，在终端（Terminal）中输入

$ ssh -T git@gitee.com

首次使用需要确认并添加主机到本机SSH可信列表。若返回 Hi XXX! You've successfully authenticated, but Gitee.com does not provide shell access. 内容，则证明添加成功。

添加成功后，就可以使用SSH协议对仓库进行操作了。

遇到问题

第一，缺少公钥

Cloning into 'naozhewan-vue3_-ts'...
git@gitee.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.


需要在电脑上配置公钥

使用git 克隆仓库，下载项目

git clone ssh地址或者http地址

npm i 
下载node_modules

初始化项目
npm init  然后一直按回车
或者用
npm init -y
一步到位

新建分支
git switch -c 分支名

微信小程序

官网：https://mp.weixin.qq.com/

点击小程序文档—工具—下载

下载稳定版的微信小程序软件

合法域名配置

这是因为小程序对接口地址有严格要求，所有的baseUrl必须在小程序后台配置合法域名。

到 mp.weixin.qq.com 登录，找到 开发 - 开发管理 - 开发设置 - 服务器域名 。只需要将后端给你的接口地址填写进去即可。这里注意：合法域名必须是https开头，否则无法配置，只能作为开发阶段的测试。

开发阶段想要测试，可以点击开发工具右上角的 详情 ：

将 不校验合法域名 勾选上即可。

小程序使用Less

1、现在vscode安装less插件
2、在微信小程序的编辑页面，点击文件目录树旁边的 扩展，或是直接按 ctrl+shift+x 快捷键到达这个界面：
3、然后从打开的窗口中选择：含less的文件
4、安装成功后会出现：已成功安装拓展less

5、配置less
默认小程序是用wxss，但因为Easy-less默认输出的css，我们需要设置一下输出的文件后缀。找到以下位置：
设置-编辑器设置-更多及工作区的编辑器设置
在打开的界面搜索 easy-less：点击setting.json编辑器
找到 less.compile：写入
        {
        ...,
        "less.compile": {
            "outExt": ".wxss"
        	}
    	}

在vscode中加入微信开发小程序插件

搜索：vscode-wechat
点击下载

react

创建React脚手架项目

1、创建脚手架
# React不再支持全局安装create-react-app，因此官方建议使用npx来安装
npx create-react-app 文件名
例如：npx create-react-app demo

Koa2

基于node.js平台的下一代web开发框架

https://koa.bootcss.com/#application

用途：服务端编程（路由，请求…… ）和 mysql

安装

创建一个空白目录，然后进入终端，并在终端对koa进行安装：

# 项目初始化
npm init -y

# 安装koa2
npm i koa2 -S

入口文件

在项目根目录创建 app.js 文件，并在上一步操作中生成的 package.json 里配置：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
}
 
        Copied!
    

在 app.js 中：

const Koa = require('koa2');
const app = new Koa();
const port = 9000;

/* 
	解释下面这段代码：
	app.use()方法是：将给定的中间件方法添加到此应用程序。简单说就是调用中间件
	app.use() 返回 this, 因此可以链式表达
*/
app.use(async (ctx)=>{
    ctx.body = "Hello, Koa";
  	// ctx.body是ctx.response.body的简写
})

app.listen(port, ()=>{
    console.log('Server is running at http://localhost:'+port);
})
 
    

然后运行 npm start ，并在浏览器输入 http://localhost:9000/ 即可看到页面效果。

安装不同插件

路由安装

$ npm i koa-router

在 app.js中引入
const Router = require('koa-router');

MySQL

https://www.mysql.com/cn/

安装之前先卸载

如果之前曾装过MySQL，请务必先卸载干净。

查看是否安装过MySQL

Windows执行：开始->运行->输入 services.msc。如果看到有MySQL，就代表安装了

如果有，先右键停止这项服务，然后：

快捷键 win+r 输入 regedit 进入注册表，找到 HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application\MySQL 文件夹并对其进行删除。

如果有以下两个文件夹：

删除 HKEY_LOCAL_MACHINE\SYSTEM\ControlSet002\Services\Eventlog\Application\MySQL文件夹。 删除 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Eventlog\Application\MySQL的文件夹。 注册表里没有这两个文件，就不用删除了。

然后找到mysql的安装位置，将mysql文件夹删掉：

server > mysql ( 删掉 )

再到控制面板搜索 mysql ，确认已经没有了才可以，否则也进行卸载。

然后是另一个地方的：C:\Program Files (x86)\MySQL

然后返回 C:/，可以看到一个名为ProgramData的文件夹，点开找到里面的MySQL，删除就行了

安装

安装包安装

Mac安装包：链接：https://pan.baidu.com/s/1InjXljIzRO945iXlN6Pn3w (opens new window)提取码：ndpb

Windows64位安装包：链接：https://pan.baidu.com/s/1OmdD-QldkvPGl0kQokbxJg (opens new window)提取码：ndpb

下载完成之后。直接解压放到指定的目录，请记住这个目录

例如：例如：D:\server\mysql-5.7.23-winx64。

在mysql目录中新建 my.ini，并进行如下配置：

[client]
# 设置mysql客户端默认字符集
default-character-set=utf8

[mysqld]
# skip-grant-tables
#设置3306端口
port = 3306
# 设置mysql的安装目录
basedir=D:\\server\\mysql-5.7.23-winx64
//(注意这里的版本号和路径一定要准确)
# 设置mysql数据库的数据的存放目录
datadir=D:\\server\\mysql-5.7.23-winx64\\data
# 允许最大连接数
max_connections=200
# 服务端使用的字符集默认为8比特编码的latin1字符集
character-set-server=utf8
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB

进入 mysql目录 下的 bin目录，cmd 打开命令行，命令行执行：

# 初始化数据库
$ .\mysqld --initialize --console

出现这个，就代表初始化成功

代表初始化成功，并且 sQjjZSffo6)C 就是你的登录密码，可以在登陆后修改。

2018-04-20T02:35:05.464644Z 5 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: sQjjZSffo6)C

如果不行，建议进入管理员命令行，执行上面的命令

查询mysql版本

$ .\mysqladmin --version

# 得到：mysqladmin  Ver 8.42 Distrib 5.7.23, for Win64 on x86_64
//一般是当前版本

然后以管理员身份进入这个bin目录，并输入以下安装命令：

$ .\mysqld install

启动输入以下命令即可启动mysql：

$ net start mysql

如果出现以下错误：

发生系统错误 2。
系统找不到指定的文件

可以执行：

$ .\mysqld --remove
Service successfully removed.

$ .\mysqld --install
Service successfully installed.

$ net start mysql
MySQL 服务正在启动 .
MySQL 服务已经启动成功。

修改mysql密码

现在修改mysql密码，重新打开 my.ini，把这一行的注释解掉：

skip-grant-tables

然后重启mysql：

$ net stop mysql
$ net start mysql

此时的mysql密码已经被取消，可以随意输入密码进入：

$ .\mysql -uroot -p 

然后修改密码：

$ mysql> use mysql;
$ mysql> update user set authentication_string=password("123456") where user="root";
$ mysql> flush privileges;  # 刷新权限
$ mysql> quit;				# 退出mysql

注意：密码字段名 5.7 版本的是 authentication_string，之前的为 password。

然后重新回到 my.ini 把刚刚那行注释掉：

# skip-grant-tables; 

重启mysql：

$ net stop mysql
$ net start mysql

再一次尝试连接mysql：

$ .\mysql -uroot -p123456

出现以下界面，代表成功：

由于版本等问题，建议在连接mysql成功后，再一次执行：

$ mysql> alter user user() identified by "123456";

Navicat

Navicat for MySQL 是一套全面的前端工具为数据库管理、开发和维护提供了一款直观而强大的图形界面，能同时连接 MySQL 和 MariaDB 数据库。

安装

Windows64位版本：链接：https://pan.baidu.com/s/1fly3pVOE_6oyauOEbLj1Vw (opens new window)提取码：ndpb

下载解压后直接双击两个.exe程序进行安装与绿化：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AwgtPr32-1648044025691)(https://i.loli.net/2021/12/03/9PdBFVAQzWK8lyE.png)]

#Mac安装

M1 Mac版本：链接：https://pan.baidu.com/s/14xIcYUKIbSBAynNS7eD15w (opens new window)提取码：ndpb

打开直接拽入应用程序即可。

mysql基本使用

win + r    //进去命令界面（请提前配置好环境变量）

如果希望在系统全局均可连接mysql，可以在系统环境变量配置mysql的bin目录。

配置环境变量：高级系统设置----系统设置=---path（新增）

mysql基本命令

# 连接数据库
$ mysql -uroot -p123456

# 断开数据库
$ mysql> quit;
# 或者
$ mysql> exit;

# 创建数据库
$ mysql> create database test;

# 删除数据库（不要轻易使用）
$ mysql> drop database test;

# 显示数据库
$ mysql> show databases;

+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| test               |
+--------------------+
8 rows in set (0.04 sec)

# 选择数据库
$ mysql> use test;

# 查看表
show tables;

+----------------+
| Tables_in_test |
+----------------+
| user           |
+----------------+
1 row in set (0.00 sec)

# 查看该表的字段（描述表）
describe user;

+----------+-------------+------+-----+---------+----------------+
| Field    | Type        | Null | Key | Default | Extra          |
+----------+-------------+------+-----+---------+----------------+
| id       | int(11)     | NO   | PRI | NULL    | auto_increment |
| username | varchar(30) | YES  |     | NULL    |                |
| password | varchar(30) | YES  |     | NULL    |                |
+----------+-------------+------+-----+---------+----------------+
3 rows in set (0.00 sec)

查看node版本

$ nvm ls

typescript

下载

$ npm i -g typescript

查看版本

$ tsc -V

初始化项目

$ tsc --init

监听ts文件变化（自动生成j修改js文件）

首先，先修改tsconfig.json 里面的outDir，放开注释； 修改保持js文件路径的位置
例如：
   "outDir": "./js",   

然后输入命令
$ tsc -p tsconfig.json --watch

前端开发构建工具

框架

vite 和 vue （框架）

你需要一个框架，来帮助你适配目前市场上较为热门的所有平台，这个框架，就是：uni-app。

官网：https://uniapp.dcloud.io/

vite

https://vitejs.cn/

下载创建项目

$ npm init vite@latest

$ yarn create vite

$ pnpm create vite

进入文件夹

cd 文件名

初始化项目

$ npm install

项目运行

$ npm run dev

项目打包器

Rollup 和 webpack

Rollup

https://www.rollupjs.com/

主要对应于vite写的项目

vue3

test;

查看表

show tables;

±---------------+
| Tables_in_test |
±---------------+
| user |
±---------------+
1 row in set (0.00 sec)

查看该表的字段（描述表）

describe user;

±---------±------------±-----±----±--------±---------------+
| Field | Type | Null | Key | Default | Extra |
±---------±------------±-----±----±--------±---------------+
| id | int(11) | NO | PRI | NULL | auto_increment |
| username | varchar(30) | YES | | NULL | |
| password | varchar(30) | YES | | NULL | |
±---------±------------±-----±----±--------±---------------+
3 rows in set (0.00 sec)

### 查看node版本

$ nvm ls

## typescript

### 下载

$ npm i -g typescript

查看版本

$ tsc -V

初始化项目

$ tsc --init

监听ts文件变化（自动生成j修改js文件）

首先，先修改tsconfig.json 里面的outDir，放开注释； 修改保持js文件路径的位置
例如：
“outDir”: “./js”,

然后输入命令
$ tsc -p tsconfig.json --watch

# 前端开发构建工具

## 框架

vite   和 vue （框架）

你需要一个框架，来帮助你适配目前市场上较为热门的所有平台，这个框架，就是：uni-app。

官网：https://uniapp.dcloud.io/





## vite

https://vitejs.cn/

下载创建项目

$ npm init vite@latest

$ yarn create vite

$ pnpm create vite

进入文件夹

cd 文件名

初始化项目

$ npm install

项目运行

$ npm run dev

# 项目打包器

Rollup    和  [webpack](https://webpack.js.org/)

## Rollup   

https://www.rollupjs.com/

主要对应于vite写的项目







## vue3

https://v3.cn.vuejs.org/