Vue你没留意过的小知识（vue2.0+webpack 和vue3.0+vite小知识）

介绍

Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。它由尤雨溪（Evan You）于 2014 年发布，旨在简化前端开发。Vue 的核心特点包括：

1. 渐进式框架
   Vue 可以逐步集成到项目中，既可用于简单的页面交互，也可构建复杂的单页应用（SPA）。

2. 组件化开发
   Vue 支持将界面拆分为可复用的组件，便于管理和维护。

3. 响应式数据绑定
   Vue 通过数据驱动视图，数据变化时视图自动更新。

4. 指令系统
   Vue 提供指令（如 v-bind、v-model）来简化 DOM 操作。

5. 虚拟 DOM
   Vue 使用虚拟 DOM 提升性能，减少直接操作真实 DOM 的开销。

6. 生态系统
   Vue 拥有丰富的工具和库，如 Vue Router、Vuex、Vite 等，支持构建复杂应用。

核心概念

• 模板语法：使用 HTML 模板声明式地绑定数据。

• 组件：可复用的 Vue 实例，包含模板、逻辑和样式。

• 生命周期钩子：如 created、mounted，用于在组件不同阶段执行代码。

• 计算属性和侦听器：计算属性用于派生数据，侦听器用于响应数据变化。

一些小知识

• 安装vue的官方脚手架工具 vue/cli，最新的版本是5.0，vue2对应的脚手架工具版本是 vue/cli 4.5以下，使用的是webpack+vue，vue3对应的脚手架工具版本是 vue/cli4.5以上，使用的是vite这个包管理工具和vue
• 查看vue的版本：npm list vue
• 查看vue-cli脚手架版本： vue -V 或者vue --version
• vue3在template中可以有多个根组件，在vue2中只能有一个根组件
• 在vite中获取环境的语句是import.meta.env,在webpack中获取环境语句是process.env
• vue2使用的是option语法，vue3用到是composition语法，各自优劣我用的vue3不是很多，目前发现vite的编译比vue-cli快不少。

vue2.0+webpack 和vue3.0+vite小知识

1、组件地址必须带后缀.vue

在开发vue-cli时我们不需要添加.vue,因为webpack本身会自动去解析，在vite里面是不可以的，不加会识别不出来，要放完整地址

2、vite可配置别名，解决./../问题，类似于Vue里面的@

在vue-cli中其实开发常用别名，通常把src作为一个别名，地址更加简单一些，在vite中也可以

resolve:{

alias: {

'@':path.resolve(__dirname,'./src')

}

}

3、全局的mixin样式问题，可以通过vite进行配置

如果不通过全局配置，每一次用到都需要再引入会很繁琐，在vite.config中一次配置，到处都可以使用

css: {

preprocessOroptions: {

scss: {

additionalData: `@import '@assetss/style/base.scss'`

}

}

}

4、在vite里面配置文件中修改内容，可以立马自动重启，但是在vue-cli中改了配置之后要手动重启，否则项目是不会生效的