前端实践操作第一天——陪诊系统搭建

一、环境配置

1.把下载的node删除
2.下载nvm——node.js的管理器
3.下载 node
    1.nvm install 20.16.0
    2.nvm use 20.16.0
4.创建一个vite项目
    1.npm create vite@latest pzadmin -- --template vue
    2.npm i 
    3.npm run dev

二、Router路由配置引入

1.下载vue-router插件，在pzadmin目录下安装
    cnpm install vue-router@4
2.创建路由和对应页面
    1.在src目录下创建一个router文件夹，在router中创建文件index.js

//创建router实例  hash模式切换页面不用刷新
import  { createRouter,createWebHashHistory }from 'vue-router'

//引入Main.vue和index.vue
import Layout from '../views/Main.vue'
import Login from '../views/login/index.vue'

const routes = [
    {
        path: '/',
        component: Layout
    },
    {
        path: '/login',
        component: Login
    }
]

//将routes传参,返回一个router实例
const router = createRouter({
    //路由数据
    routes,
    //路由匹配模式
    history: createWebHashHistory()
})

//对外进行导出
export default router 

    2.在src目录下创建一个views文件夹，在views中创建文件Main.vue

<template>
    <div>
        layout
    </div>
</template>

<script setup></script>

    3.在views目录下创建一个login文件夹，在login中创建文件index.vue

<template>
    <div>
        登录
    </div>
</template>

<script setup></script>

   4.App.vue代码

<template>
    <div>
        layout
    </div>
</template>

<script setup></script>

5.main.js代码

//这个是入口js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//引入router
import router from './router'

const app = createApp(App)
//路由挂载
app.use(router)
app.mount('#app')

 

3.终端输入 npm run dev，浏览器进入端口
4.如果出现[plugin:vite:vue] Cannot read properties of undefined (reading 'scoped')，
那就是vue-router版本过高，到官网重新安装

三、 UI框架

1.elementPlus基于Vue3 —— http://element-plus.org/zh-CN/
2.下载elementPlus
   cnpm install element-plus --save
3.引入elementPlus
   1.cnpm install -D unplugin-vue-components unplugin-auto-import
   2.然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
   vite

 // vite.config.ts
    import { defineConfig } from 'vite'
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

    export default defineConfig({
    // ...
    plugins: [
        // ...
        AutoImport({
        resolvers: [ElementPlusResolver()],
        }),
        Components({
        resolvers: [ElementPlusResolver()],
        }),
    ],
    })

    3.重启项目