当前位置：首页 > news >正文

开始一个vue项目

news 来源：原创 2025/5/2 7:26:47

一、创建vite项目和配置

1、查看npm版本： npm --version

根据版本选择创建命令

# npm 6.x

npm create vite@latest my-vue-product --template vue

# npm 7+

npm create vite@latest my-vue-product -- --template vue

2、依次执行：

npm install
npm run dev

访问该路径：

可以看到项目创建成功

3、使用vscode可以安装一些插件：

4、这里使用的组件，大家可以自行安装一下

element-ui: 安装 | Element Plus

windicss: 开始 | Windi CSS

二、项目的相关模块和代码

1、项目的文件结构

下面分别写出各页面的代码：

1、manager.js

import axios from "~/axios"export function login(username, password){
return axios.post("/admin/login",{username,password
})
}

2、404.vue

<template><div><el-result icon="warning" title="404提示" subTitle="你找的页面丢失了"><template #extra><el-button type="primary" size="medium" @click="$router.push('/')">回到首页</el-button></template></el-result></div>
</template>

3、index.vue

<template><div>后台首页<el-button @click="addCount">{{ count }}</el-button><el-button type="primary" @click="addCount2">{{ form.count }}</el-button></div>
</template><script setup>import {ref, reactive} from "vue"
let count = ref(1)
function addCount(){console.log("执行此方法" + count)count.value++return count
}const form  = reactive({count:2
}) function addCount2(){form.count++
}
</script>

4、Login.vue

<template><el-row class="login-container"><el-col :lg="16" :md="12" class="left"><div><div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div><div class="text-gray-200 text-sm">此站点是学习演示</div></div></el-col><el-col :lg="8" :md="12" class="right"><h2 class="title">欢迎回来</h2><div class=""><span class="line"></span><span>账号密码登录</span><span class="line"></span></div><el-form ref="formRef" :model="form" class="w-[250px]" :rules="rules"><el-form-item prop="username"><el-input v-model="form.username" placeholder="请输入用户名"><template #prefix><el-icon><User /></el-icon></template></el-input></el-form-item><el-form-item prop="password"><el-input v-model="form.password" placeholder="请输入密码" type="password" show-password><template #prefix><el-icon><Lock /></el-icon></template></el-input></el-form-item><el-form-item><el-button class="w-[250px]" type="primary" round @click="onSubmit" color="#626aef">登录</el-button></el-form-item></el-form></el-col></el-row>
</template><script setup>
import { reactive, ref } from 'vue';
// import { User, Lock} from '@element-plus/icons-vue'
import { login } from '~/api/manager'
import { ElNotification } from 'element-plus'import { useRouter } from 'vue-router';
const router = useRouter()const form = reactive({username: '',password: ''
})
const rules = {username: [{required: true,message: '请输入用户名',trigger: 'blur',},// {//     min: 6,//     max: 6,//     message: '用户名长度必须是6个字符',//     trigger: 'blur'// }],password: [{required: true,message: '请输入密码',trigger: 'blur',}]
}// 对表单输入的值做校验
const formRef = ref(null)const onSubmit = () => {formRef.value.validate((valid) => {console.log('valid')if (!valid) {return false}console.log("开始请求接口")login(form.username, form.password).then(res => {console.log(res)// 提示成功ElNotification({message: "登录成功",type: 'success',duration:3000})// 存储用户相关信息// 天转后台首页router.push("/")}).catch(err => {console.log(err.response.data.msg)ElNotification({title: 'Error',message: err.response.data.msg,type: 'error',duration:3000})})})
}</script><style scoped>
.login-container {@apply min-h-screen bg-indigo-500
}.login-container .left, .login-container .right {@apply flex items-center justify-center
}.login-container .right {@apply bg-light-50 flex-col
}.login-container .right .title {@apply font-bold text-3xl text-gray-900
}.login-container .right>div {@apply flex items-center justify-center my-5 space-x-2 text-gray-300
}.login-container .right>div .line {@apply h-[1px] w-16 bg-gray-200
}
</style>

5、router/index.js

import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
import {createRouter,createWebHashHistory
} from 'vue-router'
import index from '~/pages/index.vue'
import NotFound from '~/pages/404.vue'
import Login from '../pages/Login.vue'const routes = [{path: '/',component: index
},
{path: '/:pathMatch(.*)*',component: NotFound
},
{path: '/Login',component: Login
}
]const router = new createRouter({history:createWebHashHistory(),routes})export default router

6、axios.js

import axios from "axios"const service = axios.create({baseURL:"/api"
})export default service

7、main.js

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
app.use(ElementPlus)
app.use(router)
import 'virtual:windi.css'
app.mount('#app')

8、解决跨域问题：vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({resolve:{alias:{"~":path.resolve(__dirname, "src")}},server:{proxy:{'/api': {target: 'http://ceshi13.dishait.cn',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')},}},plugins: [vue(), WindiCSS()],})