Vue基础知识总结复习（二）

四、基于vite的vue3项目创建

1.vite的优缺点，和vue-cil对比

	vite	vue-cil
支持的vue版本	仅支持vue3.x	支持3.x和2.x
是否基于webpack	否	是
运行速度	快	较慢
功能完整度	小而巧	大而全
是否建议在企业级开发中使用	目前不建议	建议

2.在vscode中建立vite vue3项目

• 在vscode中打开终端,安装vue/cli最新稳定版本

npm install -g @vue/cli@next
vue --version

• 创建项目，并按终端提示操作

npm init vite-app 

• 运行项目，终端处会有运行的指令提示
• 打开提供的网址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PapwZscn-1662793197868)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12646df4379a4c9ab79d9f1151432e0f~tplv-k3u1fbpfcp-watermark.image?)]

五、组件的定义与使用

vue的核心思想之一就是组件化，建立一个单页面应用，剩余的内容依托一个个的组件来实现，甚至连App.vue也被称为根组件

1.组件的定义

只要定义一个.vue文件，置于components文件夹中，就完成了一个组件的定义，例如：

<!-- MySwiper.vue -->
<template>
    <h3>轮播图组件</h3>
</template>
<script>
    export default {
     
        name : 'MySwiper'  //帕斯卡命名法命名组件，使用组件时，既可以用MySwiper，也可以用my-swiper
    }
</script>

---

2.组件的全局注册

对组件进行全局注册后，就只可以在整个项目使用该组件

<template>