vue3.0初体验

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、vue3.0项目初始化

1、安装cue-cli

  • npm install -g @vue/cli

2、安装后检测

  • vue -V

3、初始化项目

  • vue create projectName

  • 接下来选择 Manually select features

4、勾选：Router、Vuex、CSS Pre-processors 和 Linter / Formatter

  • 注意：Vue 3.0 项目目前需要从 Vue 2.0 项目升级而来，所以为了直接升级到 Vue 3.0 全家桶，我们需要在 Vue 项目创建过程中勾选 Router 和 Vuex，所以避免手动写初始化代码

5、cd projectName
6、vue add vue-next
7、 执行上述指令后，会自动安装 vue-cli-plugin-vue-next 插件（查看项目代码），该插件会完成以下操作：

  1. 安装 Vue 3.0 依赖

  2. 更新 Vue 3.0 webpack loader 配置，使其能够支持 .vue 文件构建（这点非常重要）

  3. 创建 Vue 3.0 的模板代码

  4. 自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本，如果未安装则不会升级

  5. 自动生成 Vue Router 和 Vuex 模板代码

二、vue2.0项目体验Composition API

如果需要在vue2.0项目中体验vue3.0对响应式、模板、对象式的组件声明方式，进行的全面更改，只需要下面两个简单步骤：

  1. 安装依赖：npm install @vue/composition-api --save

  2. main.js文件中配置：import VueCompositionApi from ‘@vue/composition-api’; Vue.use(VueCompositionApi);

vue3.0响应式数据声明与使用


以上是 vue3.0初体验 的全部内容， 来源链接： utcz.com/z/377446.html

回到顶部