vue学习

内容分享1周前发布

0 0 0

vue工程

vue学习

基于vue技术进行整站开发

一、vue开发

1.优势

vue学习

2.开发环境

vue学习

依赖于nodejs，上面为具体详解

npm：Node Package Manager，是NodeJS的软件包管理器。

3.项目创建

npm create vue@3.3.4

命令创建项目

npm install

命令安装所有依赖

npm run dev

命令启动前端

或者使用vs中npm脚本

二、vue项目详解

1.项目结构

vue学习

2.访问逻辑

用户访问网址
      ↓
index.html（提供一个 #app 挂载点）
      ↓
main.js（创建 Vue 应用、注册 Router、挂载 App.vue）
      ↓
App.vue（定义根布局 + router-view）
      ↓
Vue Router 匹配路径
      ↓
渲染对应的页面组件（.vue 文件）
      ↓
页面执行请求（Axios）
      ↓
响应式更新 UI

逐渐进行

3.vue文件

vue学习

与普通js文件不同的是vue文件可以定义css文件，一共三块标签，直接定义

4.api风格

选项式api

<script>
export default {
  data(){ //声明响应式对象
    return {
      count: 0
    }
  },
  methods: { //声明方法，可以通过组件实例访问
    increment: function(){
      this.count++ ;
    }
  },
  mounted(){ //声明钩子函数
    console.log('Vue mounted ...');
  }
}
</script>
<template>
  <button @click="increment">count:{{ count }}</button>
</template>

钩子方法规范定义，数据规范data

组合式api

<script setup>
import { onMounted, ref } from 'vue';

const count = ref(0);  //声明响应式变量

function increment(){  //声明函数
  count.value++;
}

onMounted(()=>{ //声明钩子函数
  console.log('Vue Mounted ...');
})
</script>

<template>
  <button @click="increment">count:{{ count }}</button>
</template>

比较随性，自行定义

三、三方库

1.ElementPlus

Element：是饿了么团队研发的，基于 Vue3，面向设计师和开发者的组件库。

绘制图表

准备

安装库

npm install element-plus@2.4.4 --save
--save可以将组件依赖保存到package-lock.json文件

main.js中使用配置

app.use(ElementPlus, {locale: zhCn})

实现

直接复制官方代码即可

2.Router

实现

创建

import router from './router'
app.use(router)

配置路由

vue学习

配置路由表

vue学习

四、登录实现

1.登录页面逻辑

使用嵌套渲染

vue学习

使用孩子组件

嵌套路由即可实现页面全部展现

2.api定义

将axios封装为request对象

vue学习

便于后续接口调用

export const loginApi = (data) => request.post('/login', data)

3.登录逻辑

let loginForm = ref({username:'', password:''})
let router = useRouter()

//登录
const login = async () => {
  const result = await loginApi(loginForm.value)
  if (result.code) {// 登录成功
    ElMessage.success('登录成功')
    localStorage.setItem('loginUser', JSON.stringify(result.data))//将令牌存到本地localstorage
    router.push('/')// 跳转
  }else {
    ElMessage.error(result.msg)
  }
}