简述使用Vite和vue-cli搭建vue3脚手架的步骤? 说一说vue3和vue2的区别有哪些?
时间: 2024-10-22 22:05:24 浏览: 78
使用Vite和Vue CLI快速搭建Vue3脚手架的步骤大致如下:
1. 安装依赖:首先确保已安装Node.js和npm,然后在命令行中全局安装Vite和Vue CLI:
```
npm install -g create-vite vue@next
```
2. 创建项目:运行`create-vite`命令创建一个新的Vite项目,并指定项目名称:
```
npx create-vite my-vue3-app
```
3. 进入项目目录:项目创建完成后,进入新生成的目录:
```
cd my-vue3-app
```
4. 初始化Vue应用:使用Vue CLI初始化Vue3应用程序,这会自动配置Vite的构建系统:
```
vue add @vue/cli-plugin-vuetify (如果需要添加Vuetify组件库)
vue add @vue/cli-service-preset-esbuild (选择适合的构建工具)
```
5. 配置Vite:编辑`vite.config.js`文件,进一步定制Vite的设置。
6. 开发和启动:在项目根目录运行`npm run serve`或`yarn serve`启动开发服务器,然后访问`http://localhost:3000`查看应用。
Vue3相对于Vue2的主要区别包括:
1. **Composition API**:Vue3引入了更简洁、更直观的组件组织方式——Composition API,取代了options-based API,使得状态管理和组件复用更为方便。
2. **TypeScript支持**:Vue3原生集成了TypeScript支持,提供了更强的类型检查和更好的开发者体验。
3. **Ref 和 RefValue vs. $data**:Vue3使用`ref`代替 `$data`来管理组件内部数据,提供更好的响应式特性。
4. **模板语法更新**:例如不再推荐使用`v-on`绑定事件,而是推荐直接使用`on`属性。
5. **默认严格模式**:Vue3在默认情况下开启严格模式,提高了对代码质量的要求。
阅读全文
相关推荐


















