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-componentsvite配置文件， 根目录/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以后，接下来我们就可以开始进入前端页面开发，首先是首页。接下来我们把由前端工程师完成的首页，直接拿过来使用[注意除了组件以外，还有静态文件（包括图片，音频，视频）也需要拿过来]，并运行项目。
原文地址：https://blog.csdn.net/weixin_43895362/article/details/142983902
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！