创建一个Vue3项目

进入vue-cli所在文件夹的cmd，vue create pro_name ，选择vue3

引入element-plus：npm install element-plus --save

引入vuex：npm install vuex --save

引入vue-router：npm i vue-router

main.js中：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-plus'
import 'element-plus/theme-chalk/index.css'//必备！不要忽视这句
import '../public/static/css/code.css'
import VueLatex from 'vatex'
// highlight 的样式，依赖包，组件
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
// import  './static/live2dw/lib/L2Dwidget.min.js'
//注册组件
const app = createApp(App)
app.use(hljsVuePlugin)
app.use(VueLatex)
app.use(router)
app.use(ElementUI)
app.mount('#app')

router的index.js中：

import { createRouter,createWebHashHistory } from "vue-router";
import learn from '../views/learn.vue'
import dfs from '../components/learn/learn_alg/1_graph/dfs.vue'
import bfs from "@/components/learn/learn_alg/1_graph/bfs.vue";

const routes = [
    {path:'/learn',component:learn,children:[
    {path:'',component:dfs},
    {path:'dfs',component:dfs}
]}
  ]
  const router = createRouter({
    history:createWebHashHistory(),
    routes
  })
  export default router

我的vue的template：

<template>
<el-card style="max-width: 1200px">
    <template #header><strong>标题</strong></template>


    <highlightjs  language="c++" :autodetect="false" :code="code"></highlightjs>

    <vue-latex :expression="'\\frac{a_i}{1+x}'" display-mode :font-size="30"/>

    <el-row class="row-bg" justify="space-evenly">
        <el-col :span="9"><img src="../../assets/pics/science/shenjingwangluo.png"></el-col>
        <el-col :span="9"></el-col>
    </el-row>

  </el-card>

</template>
<script setup>

</script>
<style  scoped>

</style>

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple