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>

浏览器页面 ​​​​​​​

 第六步

 vite.config.ts中设置相关配置

server中

host:

"0.0.0.0"  别人可以通过这个地址访问 

 "localhost" 本机

port:端口号

别人可以通过这个地址访问 

需要安装一个组件

 更好的兼容

 

  第七步

Layout 布局 | Element Plus

 安装npm install element-plus --save

 第八步

加入按钮

 第九步

加入Slider 滑块 

  第十步

加入图标