Vue3+vite创建项目
构建方式区别
当我们使用Webpack打包项目时候，会把相关的资源(代码、样式等)生成多个bundle文件，再在HTML中通过
如图所示，在本地启动一个Vite项目时候，Server在一开始的时候就启动，而不是找到所有依赖打完包再启动。Vite启动后再去加载对应的文件。
定义
webpack和vite都是现代化web构建工具,但他们在构建速度、开发体验、构建结果等方面有所不同
1、构建速度:vite的速度一般快于webpack
(1)传统的构建工具例如webpack在开发过程中会对整个应用或者大部分应用进行打包,之后浏览器才能加载处理之后的包(好比webpack打包先从入口文件开始,递归的查找模块之间的依赖关系,生成一个依赖图,根据依赖图build每个文件,最终构建生成一个或者多个bundle.js,然后浏览器加载处理好的这些包).那么对于大型应用而言,这个打包过程非常的耗时,因为每次页面代码更改后都有可能需要重新打包页面的大部分或者全部资源;
(2)对于Vite而言,在开发模式时启动不进行打包,也就意味着它不需要构建模块之间的依赖关系,不需要编辑,所以启动速度非常快…它利用现代浏览器支持ES Model的特性，只构建正在编辑的文件，而不是整个项目,相当于Vite只有在浏览器请求特定模块时才对该模块进行处理,对该模块的内容进行编译—用一句话总结就是按需动态的编译方式极大的缩短了启动时间;生产环境下使用Rollup来构建。
2、热更新—一般webpack 需要通过配置项开启热更新,Vite默认支持热更新和自动刷新,Vite中当一个模块内容被改变时,不像webpack那样需要重新编译打包该文件,然后再通过热更新机制将更新后的模块注入到应用程序中,Vite是直接向浏览器重新请求该模块即可;在底层实现上Vite是基于esBuild预构建的,那么esBuild是由go语言编写的,go语言天生支持并发,所以较快;
3、按需编译和预打包编译
(1)在使用Vite时,浏览器会发出针对每个ES模块的的HTTP请求;vite会拦截这些请求,并且只编译请求到的模块.相对于传统的工具在开发环境中编辑整个应用,按需编译会大大缩减等待时间;
(2)预打包编译,虽然Vite在开发过程中避免了应用程序的打包,但他通过预打包机制处理第三方的库,一般情况下预打包的结果会被缓存起来,以便在后续开发中快速加载;
4、配置复杂度:
(1)Webpack: Webpack的配置相对复杂，特别是在处理不同类型的资源和加载器时。
(2)Vite: Vite鼓励零配置，使得项目起步非常简单，但同时也支持自定义配置，使其适用于复杂项目。
5、插件生态:
(1)Webpack: Webpack拥有庞大的插件生态系统，适用于各种不同的需求。
(2)Vite: Vite也有相当数量的插件，但相对较小，因为它的开发模式和构建方式减少了对一些传统插件的需求。
(6)编译方式:
(1)Webpack: Webpack使用了多种加载器和插件来处理不同类型的资源，如JavaScript、CSS、图片等。
(2)Vite: Vite利用ES模块原生支持，使用原生浏览器导入来处理模块，不需要大规模的编译和打包。
(7)应用场景:
(1)Webpack: 适用于复杂的大型项目，特别是需要大量自定义配置和复杂构建管道的项目。
(2)Vite: 更适用于小到中型项目，或者需要快速开发原型和小型应用的场景。
1、 创建vue3+vite脚手架命令
npm create vite@latest my-vue-app -- --template vue
2、 创建路由依赖
npm install vue-router@4.0.3
3、 创建sass预处理器依赖
npm install sass -D
4、 创建axios请求依赖
npm install axios
5、 创建vuex依赖
npm install vuex@4.0.0-rc.2
6、 创建Element-plus 组件库 依赖
npm install element-plus
7、 setup语法糖
1) 子组件接受父组件传值方法
const props = defineProps({
foo: String
})
2）子组件传值给父组件
const emit =defineEmits([])
const handelEvent=()=>{
emit("handelEvents",'我是子组件')
}
3）父组件使用ref调用子组件方法
const handelChange = () => {
console.log("ref事件调用");
};
defineExpose({
handelChange,
});
const childRef = ref(null);
const handelRef = () => {
console.log(childRef.value.handelChange())
};
8、 在 Vue 3 中，watchEffect是一个用于响应式数据变化的函数。以下是关于watchEffect的一些重要特点和用法
· 自动追踪依赖：无需手动指定依赖项，它会自动收集在回调函数中使用到的响应式数据的依赖。
· 立即执行：在组件初始化或watchEffect被调用时，会立即执行一次回调函数来获取初始数据。
· 依赖变化时重新执行：当它追踪的响应式数据发生变化时，回调函数会自动重新执行，以反映最新的状态。
·
· <script setup>
· import { reactive, watchEffect,toRefs } from 'vue';
·
· const state = reactive({
· count: 0,
· name: '张三',
· });
·
· watchEffect(() => {
· console.log(Count: ${state.count}, Name: ${state.name});
· });
· const {count,name} =toRefs(state)
· setTimeout(() => {
· state.count++;
· state.name = '李四';
· }, 1000);
·
9、 生命周期
onBeforeMount(() => {
console.log("我是vue3挂载前生命周期")
})
onMounted(() => {
console.log(phone.value, '我是挂在后生命周期')
form.name = '李四'
form.list = ['电影天堂']
console.log("我是vue3挂载后生命周期")
})
onBeforeUpdate(() => {
console.log("我是vue3更新前生命周期")
})
onUpdated(() => {
console.log("我是vue3更新后生命周期")
})
onBeforeUnmount(() => {
console.log("我是vue3销毁前生命周期")
})
onUnmounted(() => {
console.log("我是vue3销毁后生命周期")
})
10、 配置vue3代码片段
{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// 2 for tab stops, {1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "vue3",
"body": [
"",
"",
"
"import { ref, reactive,onBeforeMount, onMounted,getCurrentInstance } from 'vue'",
" import { ElMessage, ElMessageBox } from 'element-plus'",
"import { Plus, Delete, Search } from '@element-plus/icons'",
" const { proxy } = getCurrentInstance()",
" const data = reactive({})",
" onBeforeMount(() => {",
" console.log('2.组件挂载页面之前执行----onBeforeMount')",
" })",
" onMounted(() => {",
" console.log('3.-组件挂载到页面之后执行-------onMounted')",
" })",
"",
"",
"<style lang="scss" scoped>",
"",
""
],
"description": "Log output to console"
}
}
