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>
③“枝叶”组件