阅读 1248

vue3.0 后台管理系统 框架搭建

vue的重要性可想而知,提前学习vue3.0,没毛病。本文会带大家了解vue3.0的构建工程、antd引入、生命周期、data双向数据绑定使用、方法使用、计算属性、监听、组件引入、组件传值、路由传值等知识点,本人菜鸟,大佬多多指导。废话少说,通过实操做一个登录、列表、详情界面,直接上代码。

github源码: github.com/parchments/…

效果预览:登录页、首页、列表页、详情页

首页

列表页

详情页

1、项目搭建

  1. 安装node就不说咯,必备。此外需要安装vue-cli4代以上最新脚手架,可以通过执行如下npm 命令安装/更新脚手架版本

    脚手架升级: npm update @vue/cli 初次安装: npm i @vue/cli -g

根据自己需求选择需要预先安装的插件

vue create [projectName]
复制代码

怎么知道自己正确安装了vue3.0,请看vue3.0的main.js,vue2.0引入vue是import Vue from 'vue',vue3.0则是解构引入,看到解构引入代表此项目为vue3.0,干得漂亮,继续。。。全局挂载方法

顺便提一句,如果vue3.0+ts开发的话,全局挂载需要如下挂载方式

在文件 main.ts 添加 带有 + 符号后代码

//  main.ts
import { createApp } from "vue";
import App from "./App.vue";
+ import axios from "axios";

const app = createApp(App);
+ app.config.globalProperties.$http = axios;
app.mount("#app")
在文件 shims-vue.d.ts添加 带有 + 符号后代码

//  shims-vue.d.ts

declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

+ declare module "@vue/runtime-core" {
+  import { AxiosInstance } from "axios";
+  interface ComponentCustomProperties {
+    $http: AxiosInstance;
+  }
+ }
复制代码

2、安装并引入antd

$ npm i --save ant-design-vue@next
//需要按需引入的话安装插件 babel-plugin-import 然后配置 babel.config.js$ npm i --save babel-plugin-import
复制代码

完整引入

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp();
app.config.productionTip = false;

app.use(Antd);
复制代码

以上代码便完成了 Antd 的引入。需要注意的是,样式文件需要单独引入。

局部导入组件

import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

const app = createApp();
app.config.productionTip = false;

/* Automatically register components under Button, such as Button.Group */
app.use(Button);

app.config.globalProperties.$message = message;
复制代码

如果需要按需加载,则配置ant-design-vue

根目录打开babel.config.js文件,将里面的内容修改为

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    //以下是配置按需加载
    [
      "import",
      { 
        libraryName: "ant-design-vue", 
        libraryDirectory: "es", 
        style: "css"//为true时加载的是less文件
      }
    ]
  ]
}
复制代码

目前我是用全局引入的方式引入antd,大家根据自己需求引入即可。

3、页面布局

app.vue页面

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
#app {
  text-align: center;
}
</style>
复制代码

login页面: 涉及data定义,响应式数据、生命周期、方法调用、实例获取(即是vue2.x的this)

//login
<template>
	<div class="box">
		<h1>登录</h1>
		<h2>{{name}}</h2>
		<a-form class="form" layout="inline">
			<a-form-item label="账号">
				<a-input v-model:value="account" type="text" placeholder="请输入账号"/>
			</a-form-item>
			<a-form-item label="密码">
				<a-input v-model:value="password" type="password" placeholder="请输入密码"/>
			</a-form-item>
			<h3>输入账号密码,{{count}} 秒后登录</h3>
			<a-button @click="login()" block :disabled="account === '' || password === ''" type="primary">登录</a-button>
		</a-form>
	</div>
</template>

<script>
	//vue-cli 4.5.4创建的3.0
	// import { reactive } from '@vue/composition-api' //会提示报错 export 'default' (imported as 'Vue') was not found in 'vue'
	import { reactive, toRefs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured} from 'vue' //vue-cli 4.5.4 之后vue3.0集成了@vue/composition-api
	export default {
		name: 'login',
		components: {
			
		},
		
		//始化数据,介于beforeCreate与created之间,相当于beforeCreate、created的合并
		setup() {
			//setup(props,context)函数  默认两个属性props,context 属性和上下文   setup函数中无法访问到this   
			//创建处理响应式数据对象 类似date  需要先导入
			const state = reactive({
				count: 3,
				name: '我是响应式数据name',
				account: '',//账号
				password: ''//密码
			})
			//获取当前路由实例
			//Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例,然后通过 ctx 属性获得当前上下文,ctx.$router 是 Vue Router 实例,里面包含了 currentRoute 可以获取到当前的路由信息
			const { ctx } = getCurrentInstance();
			console.log(toRefs)
			//登录方法
			const login = () => {
				// state.count++;
				
				console.log(ctx);
				let {account,password} = state;//对象解构
				if(account=== "" || password===""){
					alert('账号密码不能为空')
				}else{
					setInterval(()=>{
						state.count--;
					},1000)
					setTimeout(()=>{
						ctx.$router.push('/index');
					},3000);
				}
				// return
			}
			
			//以下是生命周期
			//组件挂载前
			onBeforeMount( () => {
				console.log('onBeforeMount,组件挂载前,相当于beforeMount')
			})
			//实例挂载完毕
			onMounted( () => {
				console.log('onMounted,实例挂载完毕,相当于mounted')
			})
			//响应式数据变化前
			onBeforeUpdate( () => {
				console.log('onBeforeUpdate,响应式数据变化前,相当于beforeUpdate')
			})
			//响应式数据变化完成
			onUpdated( () => {
				console.log('onUpdated,响应式数据变化完成 ,相当于updated')
			})
			//实例销毁前
			onBeforeUnmount( () => {
				console.log('onBeforeUnmount,实例销毁前 ,相当于beforeDestroy')
			})
			//实例已销毁
			onUnmounted( () => {
				console.log('onUnmounted,实例已销毁 ,相当于destroyed')
			})
			//错误数据捕捉
			onErrorCaptured( () => {
				console.log('onErrorCaptured,错误数据捕捉')
			})
			//setup函数的返回值 导出
			return {
				//...state,  //如果没有用toRefs方法的话,是不能把reactive创建出来的数据变成响应式数据的  需要响应式就是要加上toRefs 否则不需要
				...toRefs(state),//把reactive创建出来的数据变成响应式数据
				login
			}
		}
	}
</script>
<style lang="less" scoped>
	.box{
		width: 50%;
		margin: 0 auto;
		padding-top: 200px;
		.form{
			width: 60%;
			margin: 0 auto;
			padding-top: 30px;
		}
	}
</style>
复制代码

看得出来跟vue2.x的结构已经有很大区别了,例如setup、方法使用等等,setup是Composition API的入口,Vue3.0提供的新属性,可以在setup中使用Composition API,在上文代码中我们在setup中通过reactive初始化了一个响应式数据,然后通过return返回了一个对象,对象中包含了声明的响应式数据和一个方法。

setup函数有两个参数,分别是props和context, setup(props,context);

props组件外部传入进来的属性

export default {
  props: {
    title: {
      type: String
    }
  },
  setup(props) {
    //组件传入的值
    console.log(props.title)
  }
}
复制代码

context是一个对象,里面包含了三个属性,分别是 attrs、slots、emit

attrs与Vue2.0的this.$attrs是一样的,即外部传入的未在props中定义的属性。对于attrs与props一样,我们不能对attrs使用es6的解构,必须使用attrs.name的写法。

slots对应的是组件的插槽,与Vue2.0的this.$slots是对应的,与props和attrs一样,slots也是不能解构的。

emit对应的是Vue2.0的this.$emit, 即对外暴露事件。

home.vue页面

<template>
	<div>
		<Nav />
		<router-view></router-view>
		<br/>
		<br/>
		<br/>
		<br/>
		<a-button @click="back()">退出登录</a-button>
	</div>
</template>

<script>
	// import { reactive } from '@vue/composition-api' //会提示报错 export 'default' (imported as 'Vue') was not found in 'vue'
	import { reactive,toRefs,getCurrentInstance } from 'vue' //vue-cli 4.5.4 之后vue3.0集成了@vue/composition-api
	import Nav from '../../components/nav.vue'
	export default {
		name: 'home',
		components: {
			Nav
		},
		
		//始化数据,介于beforeCreate与created之间,相当于beforeCreate、created的合并
		setup(props,context) {
			console.log(props,context);
			//函数  默认两个属性props,context 属性和上下文   setup函数中无法访问到this   
			//创建处理响应式数据对象 类似date  需要先导入
			const state = reactive({
				
			})
			//获取当前路由实例
			//Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例,然后通过 ctx 属性获得当前上下文,ctx.$router 是 Vue Router 实例,里面包含了 currentRoute 可以获取到当前的路由信息
			const { ctx } = getCurrentInstance();
			//登录方法
			const back =() => {
				ctx.$router.push('/login');
			}
			//setup函数的返回值 导出
			return {
				...toRefs(state),
				back
			}
		}
	}
</script>
复制代码

index->index.vue页面

<template>
	<div style="padding-top: 100px;">
		<h2>首页内容</h2>
		<img src="../../../assets/logo.png" alt="">
	</div>
</template>

<script>
	import { reactive, toRefs, getCurrentInstance } from 'vue'
	export default {
		name: 'index',
		// components: {

		// },
		setup() {
			const state = reactive({
				
			})
			//获取当前路由实例
			const { ctx } = getCurrentInstance();
			console.log(ctx)
			//setup函数的返回值 导出
			return {
				...toRefs(state)
			}
		}
	}
</script>
复制代码

accountList.vue 列表页面(计算属性)

<template>
	<div style="margin-top: 100px;">
		<ti :title="title"></ti>
		<h3>列表请求数据中...{{count}}秒后显示</h3>
		<a-table :data-source="list" :pagination="false" style="width: 60%; margin: 0 auto 30px;">
			<a-table-column key="account" title="account" data-index="account" />
			<a-table-column key="password" title="password" data-index="password" />
			<a-table-column key="action" data-index="action">
				<template v-slot="{record}">
					<span>
						<a @click="goToLink(record.id)">详情</a>
					</span>
				</template>
			</a-table-column>
		</a-table>
		<a-input type="text" v-model:value="leftValue" placeholder="leftValue" style="width: 100px;"/>
		<a-input type="text" v-model:value="rightValue" placeholder="rightValue" style="width: 100px;"/>
		<div>
			计算属性输出的结果是:{{resultValue}}
		</div>
		<!-- <div>
			<h2>Clicked {{ count }} times</h2>
			<h2>Watch Count is {{ watchCount }}</h2>
			<button @click="increase">Click</button>
		</div> -->
	</div>
</template>

<script>
	import {
		reactive,
		toRefs,
		getCurrentInstance,
		onMounted,
		computed
	} from 'vue'
	import title from './component/title.vue'
	export default {
		name: 'accountList',
		components: {
			'ti': title
		},
		setup(props, context) {
			console.log('propss,context', props, context)
			const state = reactive({
				title: '我是子组件的值', //子组件
				list: [],
				count: 3,
				leftValue: 0,
				rightValue: 0,
				//计算属性
				resultValue: computed(() => {
					return Number(state.leftValue) + Number(state.rightValue);
				})
			})
			// const count1 = ref(0);
			// const watchCount = ref(0);
			// function increase () {
			//   count1.value++;
			// };
			// watch( () => count1.value,
			// 	(val) => {
			// 		watchCount.value = val;
			// 	}
			// );
			//获取当前路由实例
			const {
				ctx
			} = getCurrentInstance();
			console.log('列表实例', ctx)

			function goToLink(index) {
				ctx.$router.push({
					path: '/accountList/detail',
					query: {
						id: index
					}
				})
			}

			function getList() {
				// axios请求
				let timer1 = setInterval(() => {
					state.count--;
					if (state.count < 1) {
						clearInterval(timer1)
						return
					}
				}, 1000)
				console.log('请求列表数据')
				//模拟异步请求
				let timer2 = setTimeout(() => {
					state.list = [{
							id: 1,
							account: 'admin',
							password: '111111'
						},
						{
							id: 2,
							account: 'chushi',
							password: 'chushi-111'
						},
						{
							id: 3,
							account: 'six',
							password: '666'
						}
					]
					clearTimeout(timer2)
				}, 2000)

				//以下为普通列表请求方法
				// async getList(params) {
				// 	state.loading = true;
				// 	try{
				// 		let res = await ctx.$api.systemManage.getList(params);
				// 		if (res.data.retcode === ctx.$config.RET_CODE.SUCCESS_CODE) {
				// 			let data = res.data.data;
				// 			if (data.length > 0) {
				// 				state.tableData = data;
				// 				state.paginationParams.pageSize = data.pageSize; //每页的数量
				// 				state.paginationParams.size = data.size; //当前页的数量
				// 				state.paginationParams.total = data.total; //总条数
				// 				state.paginationParams.pages = data.pages; //总页码数
				// 			} else {
				// 				state.tableData = [];
				// 			}
				// 		} else {
				// 			ctx.$Message.error('请求成功,暂无数据');
				// 		}
				// 		state.loading = false;
				// 	}catch(e){
				// 		state.loading = false;
				// 		ctx.$Message.error('暂无数据');
				// 		console.log(e);
				// 	}
				// }
			}
			onMounted(() => {
				getList();
			})
			//setup函数的返回值 导出
			return {
				...toRefs(state),
				goToLink,
			}
		}
	}
</script>
复制代码

detail 详情页面(路由传参)

<template>
	<div>
		<h3>请求参数id为{{id}}的数据</h3>
		<router-link to="/accountList">返回列表</router-link>
	</div>
</template>

<script>
	import { reactive, toRefs, getCurrentInstance } from 'vue'
	import { useRoute } from 'vue-router'
	export default {
		name: 'detail',
		components: {

		},
		setup(props,context) {
			const state = reactive({
				id: ''
			})
			const { ctx } = getCurrentInstance();//获取实例
			const { query } = useRoute();//获取路由参数
			console.log(query)
			state.id = query.id;
			console.log('详情',ctx,context)
			//setup函数的返回值 导出
			return {
				...toRefs(state)
			}
		}
	}
</script>
复制代码

相信大家对vue3.0基础用法有了初步的认识,菜鸟的我也在不断学习中,持续更新ing

官网文档: v3.cn.vuejs.org/api/applica…

文章分类
前端
文章标签