vue3.0加MongoDB加node的后台管理系统（一）

vue3.0的创建

npm install -g @vue/cli
yarn global add @vue/cli

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

npm init vite-app Vite-mongodb
cd Vite-mongodb
npm install
npm run dev

或者使用yarn的方式创建

yarn create vite-app Vite-mongodb
$ cd Vite-mongodb
$ yarn
$ yarn dev

当前项目目录为：

引入Ant Design of Vue

npm i --save ant-design-vue@next

// src/main.js
import antd from 'ant-design-vue'
import '../node_modules/ant-design-vue/dist/antd.css'

修改 createApp(App).mount(’#app’)

// createApp(App).mount('#app')
// 改为
// 创建app
const app = createApp(App)
// 注入antd
app.use(antd).mount('#app')

引入路由

npm install vue-router@next

在src下创建文件夹router
官方实例：

const router = createRouter({
   
  history: createWebHistory(),
  routes: [{
    path: '/:articleName', component: Article }],
})

// router/router.js
import {
    createRouter, createWebHistory } from "vue-router"
// reateWebHashHistory hash 路由
// createWebHistory history 路由
// createMemoryHistory 带缓存 history 路由
// parseQuery 查询参数反序列化
// stringifyQuery 查询参数序列化
// onBeforeRouteLeave 路由离开钩子
// 路由信息
const routes = [
  {
   
    path: "/login", // 登录页
    name: "login",
    component: () => import('../view/login/login.vue'),
  },
  {
   
    path: "/403",
    name: "403",
    component: () => import('../components/error/403.vue'),
  },
  {
   
    path: "/404",
    name: "404",
    component: () => import('../components/error/404.vue'),
  },
  {
   
    path: "/500",
    name: "500",
    component: () => import('../components/error/500.vue'),
  }
]
// 导出路由
const router = createRouter({
   
  history: createWebHistory(),
  routes
})
export default router;

在src下创建文件夹view，书写页面
在src/view/index.vue中定义页面的主入口

<template>
  <!-- 主页 -->
</template>
<script>
import {
     reactive, toRefs,onMounted, computed, watch,} from 'vue'
import {
     useRouter, useRoute } from "vue-router";
export default {
    
  setup () {
    
    const data = reactive({
    
    })
    // 进入页面
    onMounted(() => {
    
    })
    // 路由
    const routers = useRouter()