Vue3初体验01-创建项目

目录

背景说明

环境说明

项目创建

引入Element UI

引用vue-router

---

背景说明

本文是关于Vue3的学习的记录，目的是使用vue3+vite+ts+elementUI搭建一个简单的个人博客管理系统。

环境说明

需要提前安装node，本文使用的是v12.22.2

项目创建

npm init @vitejs/app gecer_bms

之后进行如下选择

之后cd目录，run一下，项目就跑起来了。

引入Element UI

npm install element-plus -s

在main.ts进行添加

import { createApp } from 'vue'
import ElementPlus  from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'


const app=createApp(App)
// 引用element ui
app.use(ElementPlus)
// 挂载
app.mount('#app')

这样就能在页面中使用ElementUI了

引用vue-router

npm install vue-router@4 -s

之后创建如下目录文件

在router/index.ts中编写路由规则

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在main.ts引入router/index.ts

import { createApp } from 'vue'
import ElementPlus  from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'

const app=createApp(App)
// 引用element ui
app.use(ElementPlus)
// 挂载router
app.use(router)
// 挂载
app.mount('#app')