vue3.0初体验

一、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响应式数据声明与使用