使用的是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博客