vue3.0实战项目

vue3.0+typescript+vite2实战：后台管理系统

一、技术栈
二、功能架构
三、框架搭建
四、安装插件
- 1、路由插件vue-router4安装使用
- 2、vuex4的安装
- 3、安装sass和element plus
五、系统开发
- 1、页面布局
- 2、侧边栏开发
- 3、全局使用动态的icon图标
- 4、全局提示框

一、技术栈

语法演变，vue3.0更加简便！

二、功能架构

三、框架搭建

vite2创建项目
vite2项目结构如下：vue版本为3.2.xx
或者使用vue cli3构建项目，输入命令vue create xxx，选择语法为vue3.0 .插件包括 router、vuex

四、安装插件

如果用vue-cli3搭建的时候勾选了这些插件，就不用下面的步骤，手动去安装，可以直接使用

1、路由插件vue-router4安装使用

1、输入命令npm i vue-router@4安装 vue-router4
2、新建/router/index.ts配置路由

3、路由配置代码可以参考下面的

//router/index.ts代码
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: Home},{path: '/helloworld',name: 'helloworld',component: () => import('../components/HelloWorld.vue')}
]
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})
export default router//main.js代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')

4、使用路由router4，路由跳转实现代码参考下面的（@click=“toPath(menu.path)”）：

<!--  -->
<template><template v-for="menu in menus" :key="menu.path"><el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.index"><template #title><el-icon><component :is="menu.meta.icon" /></el-icon><span>{{ menu.meta.title }}</span></template><menu-item :menus="menu.children"></menu-item></el-sub-menu><el-menu-item v-else :index="menu.index" @click="toPath(menu.path)"><el-icon><component :is="menu.meta?.icon" /></el-icon><span>{{ menu.meta?.title }}</span></el-menu-item></template>
</template><script setup lang="ts">
import { defineProps } from "vue";
import { useRouter } from 'vue-router';
defineProps(['menus'])
const router = useRouter()
const toPath = (item: string) => {router.push({ path: item });
}
</script><style lang="scss" scoped>
.el-sub-menu {.el-menu-item {background-color: #312a2a;}}
</style>

5、获取路由route的操作如下，比如监听（包括监听函数watch的用法）路由路径变化并获取所有路由信息，具体代码如下（import { useRoute } from ‘vue-router’;）

<!-- 布局：头部 -->
<template><div><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item><el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item><el-breadcrumb-item>promotion list</el-breadcrumb-item><el-breadcrumb-item>promotion detail</el-breadcrumb-item></el-breadcrumb></div>
</template><script setup lang="ts">
import { useRoute } from 'vue-router';
import { ref, watch } from 'vue';
const route = useRoute();
const breadcrumb = ref([]);
const getBreadcrumb = () => {console.log("===>", route.matched);
}
watch(() => route.path, () => {getBreadcrumb()
})
</script><style lang="scss" scoped>
</style>

上面的useRouter和useRoute的区别和vue2.0一样，区别：

this.$router是指所有路由，比如跳转路由地址时可使用
this.$router.push(‘/user’)或this.$router.replace(‘/home’)进行页面跳转.
This.$route是指当前路由（地址栏里的），可获取当前地址上的参数
this.$route.params.xxx

2、vuex4的安装

安装npm i vuex@4或者npm i vuex@next
src下新建store目录，新建index.ts,写入如下内容，里面定义了一个数字类型count来测试使用

import { createStore } from 'vuex'
interface State{count:number
}
export default createStore<State>({state() {return {count:0}},mutations: {increment(state){state.count++}},actions: {},modules: {}
})

组件中使用案例：

<template><div class="hello"><button @click="increment">{{count}}</button></div>
</template><script setup>
import{useStore} from 'vuex'
const store=useStore()
const count=computed(()=>{return store.state.count
})
const increment=()=>{store.commit('increment')
}
</script>
<style scoped>
</style>

3、安装sass和element plus

vite安装步骤，可以参考官方文档：element plus

安装成功后可找到相关版本编号，如下图
vue-cli安装使用步骤
1、安装插件，输入以下命令npm install element-plus --save、
npm install sass-loader sass -D、
npm install -D unplugin-vue-components unplugin-auto-import
2、全局引用element-plus并配置。在main.ts里面写入如下关于element-plus的代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

在组件中使用，代码和效果如下

<template><div class="hello"><h1>{{ msg }}</h1><h1>{{ obj.name }}</h1><h1>{{ obj.age }}</h1><h1>{{ sum }}</h1><button @click="increment">{{count}}</button><el-button @click="increment">{{count}}</el-button></div>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import{useStore} from 'vuex'
const msg = ref(123);
const obj = reactive({ name: "Eric", age: 12 });
const sum=computed(()=>{return msg.value-obj.age
})
const store=useStore()
const count=computed(()=>{return store.state.count
})
const increment=()=>{store.commit('increment')
}
</script>
<style scoped>
h1 {margin: 40px 0 0;
}
</style>

五、系统开发

1、页面布局

大致位置如下：

开发步骤：
1、将官网的布局代码写入组件

<template><div class="common-layout"><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></el-container></div>
</template>
<script setup>
</script>
<style lang="scss">
.common-layout{display: flex;height: 100vh;.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}
}
</style>

2、启动后如出现报错，Syntax Error: TypeError: this.getOptions is not a function，则是上面安装sass的版本太高，卸载npm uninstall sass-loader sass -D后依次安装如下插件即可

npm install node-sass@^7.0.1
npm install sass@^1.49.9
npm install sass-loader@^7.3.1

3、一般为了便于统一管理项目的样式，我们需要定义一些全局变量。如果你需要使用sass/scss语法定义一些全局的内容需要在项目根目录的vue.config.js文件（如果没有这个文件直接创建一个即可）下加上如下代码：注意了旧版本的sass-loader使用的是data字段，新版本的sass-loader使用的是prependData字段，我用的版本是旧版的。

module.exports = {css: {loaderOptions: {sass: {// 这里的值是你的全局变量文件路径，如果有多个全局变量用逗号分割开即可，如：// data: `@import"~@/assets/scss/main.scss";@import"~@/assets/scss/mixins/util.scss"`data: '@import "~@/style/global.scss";'}}}

4、页面效果如下

5、优化页面样式
5-1、去掉App.vue的#app的所有样式
5-2、项目public文件夹下的index.html中加入

<style>html,body{margin: 0;}</style>

2、侧边栏开发

后面的直接看源码：
源码地址：github的源码地址

3、全局使用动态的icon图标

3-1、 按需引用图标
使用的是如下代码，使用什么引用什么：

<el-menu-item index="2"><el-icon><icon-menu /></el-icon><template #title>Navigator Two</template>
</el-menu-item>
<el-menu-item index="3" disabled><el-icon><Document /></el-icon><template #title>Navigator Three</template>
</el-menu-item>import {Document,Menu as IconMenu,Location,Setting,
} from "@element-plus/icons-vue";

3-2、全局使用动态的icon
3-2-1、安装依赖

npm install @element-plus/icons

3-2-2、main.ts引入使用,代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons'
//全局使用动态的icon
const app = createApp(App)
for (const name in ElIcons) {app.component(name, (ElIcons as any)[name])
}
app.use(store).use(router).use(ElementPlus).mount('#app')

3-2-3、去掉手动引用，直接使用即可

4、全局提示框

类似于vue2.0的this.$message.info(),使用方式就是下面红框里的代码

效果如下