vue3.0初体验

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

回到顶部