vue- 创建wms-web项目

赵同学&

已于 2023-08-07 20:18:35 修改

阅读量529

点赞数

分类专栏：随记文章标签： vue.js 前端 javascript

于 2023-08-07 20:15:06 首次发布

本文链接：https://blog.csdn.net/qq_52963857/article/details/132139479

版权

随记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue 发展历程

安装vite

第一步

创建wms-web项目

第二步

打开文件夹并安装所有开发环境的依赖

都可以放静态资源

public>vite.svg 不会重新编译成其他名字

assets>vue.svg 会重新编译成一个随机的名称

重新编译

启动

第三步

spa 单页渲染

第四步

安装路由

第五步

加入路由

需要结合标签<RouterView></RouterView>或者<router-view></router-view>，两者相同

做页面的导航，选中标签时，下面也会跟随改变

卸载的时候触发

钩子函数里面写的都是表达式，因为它是一个方法

<template>
    这是首页 {{ count }}
    <button @click="add">Add</button>
</template>

<!-- setup 语法塘 -->
<script lang="ts" setup>
// 钩子函数
import { onMounted ,onBeforeMount,onUpdated,onUnmounted,ref} from "vue"

const count = ref(1)
const add = ()=>{
    count.value = count.value + 1
}

// 钩子函数里面写的都是表达式，因为它是一个方法 

// 挂载之前会触发
onBeforeMount(()=>{
    console.log("onBeforeMount")
})

// 挂载的时候会触发
onMounted(()=>{
    console.log("onMounted")
})

// 数据改变的时候会触发
onUpdated(()=>{
    console.log("onUpdated");
})

// 卸载的时候触发
onUnmounted(()=>{
    console.log("onUnmounted");
})
</script>

浏览器页面