张天禹_vue3

最新推荐文章于 2024-08-05 16:47:34 发布

codelyq

最新推荐文章于 2024-08-05 16:47:34 发布

阅读量681

点赞数 14

分类专栏： # 2014_vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41748874/article/details/138328652

版权

2014_vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

01 - 开篇

reactive有什么局限性；
watch在实际开发中面临的五种情况；

02 - 简介

性能好了；

速度快了；

更加优秀了；

vue3；

截止2023年10月份，最新版本是3.3.4；

03 - 创建vue3工程

vue-cli是基于webpack实现的；

在前端圈子当中，webpack属于大哥级别的构建工具；

vue官方又写了一个构建工具，vite；

java的maven有点类似前端的npm；

vite构建速度比webpack要快；

如果使用webpack架构一个东西，路由特别多，模块特别多，启动是非常慢的；

vite一上来就server ready；

webpack是不管你看什么，上来是都分析，都处理，都bundle，最后是server ready；

vite的特点是上来就server ready，然后看你看什么东西，如果你看的是其中的两个路由，那么vite就立刻处理给你看；

vite构建有点像是懒加载；

jsx就是js和结构混着写的一种语法，react当中会使用的；

运行什么命令，可以创建基于vite的vue项目呢？

npm create vue@latest

我设置完成代理之后，再次执行命令就成功了。

上面是张天禹创建的过程；

下面是我创建的过程；

npm create vue@latest比vue-cli要快很多的；

vue插件

上面安装的插件中typescript vue plugin volar这个插件，已经被删除了；

目录介绍

public下面是页签图标
- 服务器的根路径有几种情况，几种形式？这个先不聊；

env.d.ts

env.d.ts文件的作用是什么呢？

在ts当中是不认识.jpg、.txt这种文件的；

env.d.ts的作用就是让ts认识这些文件；

创建了一个a.ts，创建了一个b.txt，然后在a.ts当中写出来上面的代码，发现飘红的，就说明了，它是不认识b.txt的；

index.html

webpack的入口文件一般式main.js或者main.ts，但是vite的入口文件是index.html；

readme.md

这个东西不需要，直接删除就可以了；

tsconfig.app.json - tsconfig.json - tsconfig.node.json

这三个东西，简单说，就是ts的配置文件；

不用动它就可以了；

不能够删除；

vite.config.ts

这个是整个工程的配置文件；

这个东西可以安装插件；

也可以配置一些代理；

ctrl+c停掉脚手架；

04 - 编写app组件

index.html是入口文件：引入main.ts
- main.ts

main.ts

createApp(App).mount(‘#app’);
- createApp就是创建应用，就是花盆；
- App就是一个组件，就是种花的根基；
- 你写的所有的组件，都是安装App组件这个根基上；
  - 有的时候是直接安装的；在App.vue当中直接安装的；
  - 有的时候是间接的；就是通过路由渲染出来的；
- 以后我们写的.vue都是花的枝叶；
createApp(App)，是创建一个应用，然后传入进入一个根组件；
- .mount(‘#app’)，这个是挂载的意思，就是挂载到id为app的容器当中的意思；

App.vue

根组件

components

直接翻译过来就是组件；

assets

都是一些固有的css，还有一些svg就是图片；

export

默认暴露
分别暴露
统一暴露

写一个简单的组件

<template>
  <div class="app">
    <h1>克拉拉</h1>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'App' // 组件名字
  }
</script>

<style>
  .app {
    background-color: #4377ce;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>