1.1 搭建vue项目

vite：https://vitejs.cn/guide/#community-templates

一、搭建vue项目

npm init vite@latest demo -- --template vue-ts

npm install 

npm run dev

二、安装依赖

package.json

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "element-plus": "^2.1.7",
    "path": "^0.12.7",
    "vue": "^3.2.25",
    "vue-axios": "^3.4.1",
    "vue-router": "^4.0.14"
  },
  "devDependencies": {
    "@types/node": "^17.0.23",
    "@vitejs/plugin-vue": "^2.2.0",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.6.9",
    "unplugin-vue-components": "^0.18.5",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  }
}

​​​​​​​三、创建Login.vue

//src/components/login/Login.vue

<template>
  <div class="login">
    <el-input v-model="input.username"  placeholder="Enter Your UserName"  class="login_item"/>
    <el-input
      v-model="input.password"
      type="password"
      placeholder="Enter Your Password"
      show-password
      class="login_item"
  />
  <el-button color = "#0850f4" style="color: white" class="login_item" @click="login">Login</el-button>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {reactive,inject} from 'vue'
const router = useRouter();
const input = reactive({
  username: "",
  password: ""
})
const axios:any = inject('axios')
const login = function () {
  axios.post('/login', input).then((res: any) => {
    if (res.data.code === 200) {
      router.push('/index')
    } else {
    }
  }).catch((err: any) => {
    console.log(err)
  })
}

</script>
<style scoped>
.login{
  width:360px;
  text-align:center;
  margin: 0 auto;

}
.login_item{
  width: 100%;
  margin-top: 5%;
}
</style>

四、创建Index.vue

//src/components/index/Index.vue

<template>
  <p>hello world</p>

</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

五、创建index.ts

//src/router/index.ts

import Login from '@/components/login/Login.vue'
import Index from '@/components/index/Index.vue'
const routes = [
    { path: "/", redirect: "/login" },
    { path: '/login' ,component: Login},
    { path: '/index', component: Index }
]
export const router = createRouter({
    history: createWebHashHistory(),
    routes:routes, // short for `routes: routes`
})

六、修改App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin:auto;
}
img{
  margin-top: 4%;
  margin-bottom: 2%;
}
</style>

七、修改main.ts

import { createApp } from 'vue'
import App from '@/App.vue'
import axios from "axios";
import VueAxios from "vue-axios";
import { createRouter, createWebHashHistory } from 'vue-router'
// @ts-ignore
import { router } from '@/router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

axios.defaults.baseURL = 'http://localhost:3000/api/';
const app = createApp(App)
// app.config.globalProperties.$axios = axios
app.use(VueAxios, axios);
app.provide('axios', app.config.globalProperties.axios)
app.use(router)
app.use(ElementPlus);
app.mount('#app')

八、配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      AutoImport({
          resolvers: [ElementPlusResolver()],
      }),
      Components({
          resolvers: [ElementPlusResolver()],
      }),
  ],
    server: {
        port:3000,
        proxy: {
            '/api': {
                target: 'http://localhost:8443',
                changeOrigin: true,
                // rewrite: (path) => path.replace(/^\/api/, '')
            },
        }
        },
    resolve: {
        // 配置路径别名
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
})

九、准备两张图片，一个作为logo，一个作为图标

//src/assets/logo.png

//public/favicon.ico

十、运行npm run dev