Vue3学习

b站学习笔记——标记小白学习之路

一、创建项目

官方文档

在命令行中进入项目文件目录，输入命令

npm create vue@latest

项目构建完成，并在vscode中打开

 安装依赖,npm i

App.vue

<templates>
/*html结构*/
</templates>

<script lang="ts">
/* JS/TS*/
</script>

<style >
/* CSS样式 */
</style>

main.ts

//引入createApp用于创建应用
import { createApp } from 'vue'
//引入根组件
import App from './App.vue'

createApp(App).mount('#app')

引入element-plus样式,npm i element-plus

//引入createApp用于创建应用
import { createApp } from 'vue'
//引入根组件
import App from './App.vue'
//引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

 二、src源文件

①main.ts

//引入createApp用于创建应用
import { createApp } from 'vue'
//引入根组件
import App from './App.vue'
//引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入axios
import axios from 'axios'

createApp(App).config.globalProperties.$http = axios
createApp(App).use(ElementPlus).mount('#app')

//下载axios
npm install axios -g

//下载element-plus
npm install element-plus --save

②根组件（注册“枝叶”组件）

<template>
    <Login/>  

</template>

<script lang="ts">
    import Login from './components/Login.vue'
    export default{
        name:'App',//组件名
        components:{Login},//注册
    }
</script>
   
<style > 

</style>

③“枝叶”组件

三、写个登录页面吧

 照猫画虎，还没弄懂教师登录和学生登录的逻辑，前端和后端还没能连接上，可恶！