Vue3万能初始化

项目创建后第一步

项目创建：Vue3创建-CSDN博客

创建后执行下面

删除默认提供的HelloWorld.vue组件和src/APP.vue中的默认样式和内容。

App.vue，代码：

<template></template><script setup></script><style></style>

接下来，我们可以查看效果了，一张白纸~

vite.config.js，有部分人的vite安装项目时因为版本原因，有可能不会自动生成vite配置文件，所以如果没有的话，自己手动创建以下，补充以下，代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()]
})

全局css初始化

全局css初始化代码，防止出现浏览器之间的怪异bug和避免外观不一致。

src/App.vue，代码：

<template><router-view></router-view>
</template>

<script setup>

</script>

<style>
/* 声明全局样式和项目的初始化样式 */
body,h1,h2,h3,h4,p,table,tr,td,ul,li,a,form,input,select,option,textarea{margin:0;padding: 0;font-size: 15px;
}
a{text-decoration: none;color: #333;cursor: pointer;
}
ul,li{list-style: none;
}
table{border-collapse: collapse; /* 合并边框 */
}
img{max-width: 100%;max-height: 100%;
}
input{outline: none;
}
</style>

提交版本

下载路由组件

前面没有安装vue-router，使用以下命令在vue根目录下安装路由组件：

yarn add vue-router@next

初始化路由对象

创建src/router/index.js，代码：

import {createRouter, createWebHistory} from 'vue-router'// 路由列表
const routes = []// 路由对象实例化
const router = createRouter({// history, 指定路由的模式history: createWebHistory(),// 路由列表routes,
});// 暴露路由对象
export default router

注册路由组件

在main.js文件，把router对象注册到vue项目中，代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index.js";
createApp(App).use(router).mount('#app')

在视图中显示路由对应的内容

在App.vue组件中，填写路由视图映射的组件。代码：

<template><router-view></router-view>
</template><script setup></script><style>
/* 声明全局样式和项目的初始化样式 */
body,h1,h2,h3,h4,p,table,tr,td,ul,li,a,form,input,select,option,textarea{margin:0;padding: 0;font-size: 15px;
}
a{text-decoration: none;color: #333;cursor: pointer;
}
ul,li{list-style: none;
}
table{border-collapse: collapse; /* 合并边框 */
}
img{max-width: 100%;max-height: 100%;
}
input{outline: none;
}
</style>

创建前端首页和登陆的组件

src/routers/index.js

import {createRouter, createWebHistory} from 'vue-router'// 路由列表
const routes = [{meta:{title: "站点首页",keepAlive: true},path: '/',         // uri访问地址name: "Home",component: ()=> import("../views/Home.vue")},{meta:{title: "用户登录",keepAlive: true},path:'/login',      // uri访问地址name: "Login",component: ()=> import("../views/Login.vue")}
]// 路由对象实例化
const router = createRouter({// history, 指定路由的模式history: createWebHistory(),// 路由列表routes,
});// 暴露路由对象
export default router

创建Home组件

views/Home.vue，代码：

<template><h1>首页</h1>
</template><script setup></script><style scoped></style>

创建Login组件

views/Login.vue，代码：

<template><h1>登录</h1>
</template><script setup></script><style scoped></style>

引入elementPlus

yarn add element-plus

首先需要安装 unplugin-vue-components。

yarn add unplugin-vue-components

vite配置文件，根目录/vite.config.js，加载上面刚安装的导入插件，代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),Components({resolvers: [ElementPlusResolver()],}),]
});

Home组件中，调用elementPlus的基本样式，测试下是否成功引入。Home.vue，代码：

<template><h1>首页</h1><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button><el-rate v-model="store.value2" :colors="store.colors"> </el-rate></el-row>
</template><script setup>
import {reactive} from "vue";
const store = reactive({value2: null,colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
})
</script><style scoped></style>

成功引入了ElementPlus以后，接下来我们就可以开始进入前端页面开发，首先是首页。接下来我们把由前端工程师完成的首页，直接拿过来使用[注意除了组件以外，还有静态文件（包括图片，音频，视频）也需要拿过来]，并运行项目。