Vue3+TS project combat 1-environmental preparation

1. Project creation

vue create vue3-ts-app  //创建vue3项目

Configure dependencies yourself (according to personal habits)

cd vue3-ts-app  //定位文件
npm run serve   //启动项目

Port 8080 started successfully

 

2. Directory analysis

 Three, element plus installation - installation | Element Plus

1. Installation

npm install element-plus --save

2. Import

// main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app') //链式编程注入

3. Test

#App.vue 
<template>
  <el-button type="primary">Primary</el-button> //上方添加一个按钮
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

 View the effect