前端基础学习

一、HTML、JS、CSS

1、环境准备

（1、）安装NVM

（2、）检查NPM

（3、）搭建简单服务

2、Fetch-API

二、框架

1、VUE2

(1、)环境准备

1、)安装脚手架

复制代码

npm install -g @vue/cli

-g 参数表示全局安装，这样在任意目录都可以使用 vue 脚本创建项目

2、)创建项目

复制代码

vue ui

使用图形向导来创建 vue 项目，如下图，输入项目名

选择手动配置项目

添加 vue router 和 vuex

选择版本，创建项目

3、)安装 devtools

devtools 插件网址：Installation | Vue Devtools

4、)运行项目

进入项目目录，执行

复制代码

npm run serve

5、)修改端口

前端服务器默认占用了 8080 端口，需要修改一下

文档地址：DevServer | webpack

打开 vue.config.js 添加

复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  
  // ...
    
  devServer: {
    port: 7070
  }
  
})

6、)添加代理

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理

文档地址同上

打开 vue.config.js 添加

复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
  // ...
    
  devServer: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
    
})

2、VUE3

(1、)环境准备

1、）创建项目

采用 vite 作为前端项目的打包，构建工具

复制代码

npm init vite@latest

按提示操作

复制代码

cd 项目目录
npm install
npm run dev

2、）编码 IDE

推荐采用微软的 VSCode 作为开发工具，到它的官网 Visual Studio Code - Code Editing. Redefined 下载安装即可

要对 *.vue 做语法支持，还要安装一个 Volar 插件

3、）安装 devtools

devtools 插件网址：Installation | Vue Devtools

4、）修改端口

打开项目根目录下 vite.config.ts

复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 7070
  }
})

文档地址：配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)

5、）配置代理

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理，同样是修改项目根目录下 vite.config.ts

复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

文档地址：配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)

3、REACT

（1、) 环境准备

1、）创建项目

首先，通过 react 脚手架创建项目

复制代码

npx create-react-app client --template typescript

client 是项目名
目前 react 版本是 18.x

2、）运行项目

复制代码

cd client
npm start

会自动打开浏览器，默认监听 3000 端口

3、）修改端口

在项目根目录下新建文件 .env.development，它可以定义开发环境下的环境变量

复制代码

PORT=7070

重启项目，端口就变成了 7070

参考文档：Advanced Configuration | Create React App (create-react-app.dev)

4、）浏览器插件

插件地址 New React Developer Tools -- React Blog (reactjs.org)

VSCode

推荐安装 Prettier 代码格式化插件

三、组件库

1、ELEMENT-UI

2、MOBX

四、扩展

1、跨域问题

(1、)后端解决

@CrossOrigin("允许路径")

(2、)前端解决（代理）

2、TypeScript

（1、）环境准备

1、）安装 typescript 编译器

复制代码

npm install -g typescript

2、）编写 ts 代码

复制代码

function hello(msg: string) {
  console.log(msg)
}

hello('hello,world')

3、）执行 tsc 编译命令

复制代码

tsc xxx.ts

4、）编译生成 js 代码，编译后进行了类型擦除

复制代码

function hello(msg) {
    console.log(msg);
}
hello('hello,world');

5、）再来一个例子，用 interface 定义用户类型

复制代码

interface User {
  name: string,
  age: number
}

function test(u: User): void {
  console.log(u.name)
  console.log(u.age)
}

test({ name: 'zhangs', age: 18 })

6、）编译后

复制代码

function test(u) {
    console.log(u.name);
    console.log(u.age);
}
test({ name: 'zhangs', age: 18 });

可见，typescript 属于编译时实施类型检查（静态类型）的技术