# 学习笔记网站

**Repository Path**: chenwenya/learning-notes-website

## Basic Information

- **Project Name**: 学习笔记网站
- **Description**: 该项目使用vue3技术搭建了一个非常简单的学习笔记网站，每行代码都有注释，适合vue3初学者学习使用。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/chenwenya/learning-notes-website
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2023-09-28
- **Last Updated**: 2025-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3

## README

# 该项目为使用Vue3技术搭建一个小型的学习笔记网站

## 项目搭建
```
1.使用'npm create vue@latest'命令来创建Vue3项目
-------------
2.加载后会出现如TypeScript和测试支持之类的可选功能提示
    ✔ Project name: … <此处填写你项目的名字，如vue-study>
    ✔ Add TypeScript? … No / Yes
    ✔ Add JSX Support? … No / Yes
    ✔ Add Vue Router for Single Page Application development? … No / Yes
    ✔ Add Pinia for state management? … No / Yes
    ✔ Add Vitest for Unit testing? … No / Yes
    ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
    ✔ Add ESLint for code quality? … No / Yes
    ✔ Add Prettier for code formatting? … No / Yes
    Scaffolding project in ./<your-project-name>...
    Done.
    本项目不需要任何可选功能，所以都选择No
-------------
3.安装依赖并启动开发服务器
    cd <your-project-name>
    npm install
    npm run dev
-------------
4.此时项目已经搭建完成，可以开始进行项目开发了
```

## 项目开发
```
安装项目所需要的其他依赖
    npm install element-plus --save (使用Element Plus组件库)
    npm install axios --save (使用Axios库)
    npm install @element-plus/icons --save (使用Element Plus图标库)
    npm install marked --save (使用Marked库)
```

## 项目结构
```
├─.vscode
│      extensions.json
├─node_modules
│
│─public
│  └─post
│      ├─HTML专题
│      │      HTML基础元素.md
│      │      文本标签.md
│      │      
│      └─JavaScript专题
│              方法与属性.md
│              语句与数据类型.md              
├─src
│   │  App.vue
│   │  main.js
│   │  
│   ├─components
│   │      AppBody.vue
│   │      AppHeader.vue
│   │      AppHome.vue
│   │      MarkDown.vue
│   │      
│   └─tools
│           FileManager.js
│ .gitignore
│ index.html
│ package-lock.json
│ package.json
│ README.md
└─vite.config.js
```

## 项目运行效果
![学习笔记网站1](./image/学习笔记网站1.jpg)
-------------
![学习笔记网站2](./image/学习笔记网站2.jpg)

## 项目运行警告
![学习笔记网站1](./image/网站警告1.jpg)
```
    在代码运行中出现警告，提示`Invalid prop: type check failed for prop"defaultActive". Expected String with value "0", got Number with value 0`，
这个警告意味着在 Vue 中定义了一个名为 "defaultActive" 的属性，它的类型应该是字符串（String），但实际上传给它的是一个数字（Number）。我尝试着将element
组件<el-menu :default-active= "0">中的:default-active= "0"修改为:defaultActive="defaultActive.toString()"，再修改data(){return{defaultActive: 0}}，
但警告依然无法解决...
    在代码运行中出现警告，提示`Invalid prop: type check failed for prop "index". Expected String | Null, got Number with value 0`，这个警告意味着在
Vue中定义了一个名为"index"的属性，它的类型应该是字符串（String）或null，但是传递给它的值是一个数字而不是一个字符串或null。
```
-------------
![学习笔记网站2](./image/网站警告2.jpg)
```
    在切换导航专题栏和文章列表选项时弹出警告，提示`Invalid event arguments: event validation failed for event "select"和Invalid event arguments: 
event validation failed for event "click"`，这两个警告是由于事件参数的验证失败导致的,要解决这个问题，需要在定义事件时确保传递的参数符合预期。
```