vue3从0开始搭建的学习记录（一）

使用的是vscode,nodejs版本是v18.0.0,需要预装

先把官网丢出来

vue.js:https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html

初始化

在目标文件夹使用vite初始化构建vue3项目：npm init vite@latest 

我这里使用的是typescript

这样就有初始的vue3项目文件目录了

npm i 初始化一下依赖，就可以跑起来了

关闭网页报错弹窗

import { createApp } from 'vue'
import App from './App.vue'

const app= createApp(App,{
  productionTip: true  //关闭弹窗
})

app.mount('#app')

ui库 element+

使用的是elementplus

先贴官网：一个 Vue 3 UI 框架 | Element Plus

安装依赖 npm install element-plus --save

main.ts引入

import { createApp } from 'vue'
import App from './App.vue'

//引入elementplus样式
import ElementPlus from 'element-plus'
//引入elementplus样式
import 'element-plus/dist/index.css' 

const app= createApp(App)
app.use(ElementPlus)


app.mount('#app')

icon

因为要使用elementplus的图标,所以也在main.ts里全局引入了

import { createApp } from 'vue'
import App from './App.vue'

//引入icons
import * as Icons from '@element-plus/icons-vue'


const app= createApp(App)

Object.keys(Icons).forEach(key => {  
  app.component(key, Icons[key as keyof typeof Icons]);  
});

app.mount('#app')

 下期链接：vue3从0开始搭建的学习记录（二）-CSDN博客