前言
上大学之前总想着学了计算机要写点程序，游戏，项目什么的，大一感觉过的充实但是不够精彩，暑假选择了vue3的学习，那么，就让他更精彩一点吧！
目标
- [X] 自学基础的前端三大项，vue3和ts语法
- [ ] 跟着尚硅谷视频写一个项目
- [ ] 写一个自己的博客前端
- [ ] 写一个前后端加密毕设
Ts
1. 类型声明
let a: string //变量a只能存储字符串
let b: number //变量a只能存储数值
let c: boolean //变量a只能存储布尔值
a = 'hello'
a = 100 //警告：不能将类型“number”分配给类型“string”
b = 666
b = '你好'//警告：不能将类型“string”分配给类型“number”
c = true
c = 666 //警告：不能将类型“number”分配给类型“boolean”
// 参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字
function demo(x:number,y:number):number{
return x + y
}
demo(100,200)
demo(100,'200') //警告：类型“string”的参数不能赋给类型“number”的参数
demo(100,200,300) //警告：应有 2 个参数，但获得 3 个
demo(100) //警告：应有 2 个参数，但获得 1 个2. 类型推断
let d = -99 //TypeScript会推断出变量d的类型是数字
d = false //警告：不能将类型“boolean”分配给类型“number”3. 类型总览
JavaScript 中的数据类型：
string 、 number 、 boolean 、 null 、 undefined 、 bigint 、 symbol 、 object
TypeScript 中的数据类型：
1. 以上所有
2. 四个新类型： void 、 never 、 unknown 、 any 、 enum 、 tuple
3. ⾃定义类型： type 、 interface4. ⾃定义类型
// 性别的枚举
enum Gender {
Male,
Female
}
// ⾃定义⼀个年级类型（⾼⼀、⾼⼆、⾼三）
type Grade = 1 | 2 | 3
// ⾃定义⼀个学⽣类型
type Student = {
name:string,
age:number,
gender:Gender,
grade:Grade
}
// 定义两个学⽣变量：s1、s2
let s1:Student
let s2:Student
s1 = {name:'张三',age:18,gender:Gender.Male,grade:1}
s2 = {name:'李四',age:18,gender:Gender.Female,grade:2}5.抽象类
class Person {
name: string
age: number
constructor(name:string,age:number){
this.name = name
this.age = age
}
}
const p1 = new Person('张三',18)
const p2 = new Person('李四',19)
console.log(p1)
console.log(p2)
//继承
// Person类
class Person { }
// Teacher类继承Person
class Teacher extends Person { }
// Student类继承Person
class Student extends Person { }
// Person实例
const p1 = new Person('周杰伦',38)
// Student实例
const s1 = new Student('张同学',18)
const s2 = new Student('李同学',20)
// Teacher实例
const t1 = new Teacher('刘⽼师',40)
const t2 = new Teacher('孙⽼师',50)6. 接⼝
- 接⼝⽤于限制⼀个类中包含哪些属性和⽅法：
// Person接⼝ interface Person { // 属性声明 name: string age: number // ⽅法声明 speak():void } // Teacher实现Person接⼝ class Teacher implements Person { name: string age: number // 构造器 constructor(name: string,age: number){ this.name = name this.age = age } // ⽅法 speak(){ console.log('你好！我是⽼师:',this.name) } }2.接⼝是可以重复声明的：
// Person接⼝ interface PersonInter { // 属性声明 name: string age: number } // Person接⼝ interface PersonInter { // ⽅法声明 speak():void } // Person类继承PersonInter class Person implements PersonInter { name: string age: number // 构造器 constructor(name: string,age: number){ this.name = name this.age = age } // ⽅法 speak(){ console.log('你好！我是⽼师:',this.name) } } - 【接⼝】与【⾃定义类型】的区别：
接⼝可以：
1. 当⾃定义类型去使⽤；
2. 可以限制类的结构；
⾃定义类型：
1. 仅仅就是⾃定义类型；- 【接⼝】与【抽象类】的区别：
抽象类：
1. 可以有普通⽅法，也可以有抽象⽅法；
2. 使⽤ extends 关键字去继承抽象类；
接⼝中：
1. 只能有抽象⽅法；
2. 使⽤ implements 关键字去实现接⼝Vue3基础
- 看的是尚硅谷的markdown，总结在我的仓库
第一个项目—尚硅谷Vue项目实战硅谷甄选
（注：个人魔改版）
一.项目创建
-
找个文件夹，创建项目，记得用vite
npm create vite@latest my-vue-app –template vue
-
eslint,prettiter,styleLint,husky,commitLint,因为是自己一个人写，就没有安装
-
element-plus
1.安装npm i element-plus @element-plus/icons-vue
2.引用
//main.ts import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus);因为不需要国际化，就没有设置
3.element网站
https://element.eleme.cn/#/zh-CN -
Svg
1.优点：占内存小，远远优于img
2.推荐svg网站，阿里巴巴
3.配置//vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' export default defineConfig({ plugins: [vue(), createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')], symbolId: 'icon-[dir]-[name]', }) ] }) //main.ts import 'virtual:svg-icons-register'
自定义插件注册svg全局
1.main.tx
import gloalComponent from './components'
app.use(gloalComponent)2.components
一个文件夹Pagination，里面文件index.vue
新创一个文件 index.ts
import Svglcon from './Svglcon/index.vue'
import Pagination from './Pagination/index.vue'
const components:any = { Svglcon, Pagination };
export default {
install(app:any) {
// 注册全局组件
Object.keys(components).forEach(key => {
app.component(key, components[key]);
});
}
}3.App.vue引用
直接引用即可