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