vue3.0 beta

他来了他来了.... 这个微博预示着vue3.0的到来,不知道前端的朋友们又没感知到这个信息,vue框架在国内的话那是比较火的,很多公司都使用这款框架进行开发 今天我们来尝鲜下这个vue3.0吧!

vuecli3

首先我们需要有vuecli3,注意,一定要有这个环境,木有的可以去这个链接了解下 vuecli3, 大家一定要分清这是cli工具,并不是vue3,很多前端目前还在混肴这个概念,什么基于vue3开发的admin框架,其实你进去会发现其实就是vuecli3而已,

安装

复制代码npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查版本是否正确

复制代码vue --version

创建项目

命令行

复制代码vue create vue3-demo

GUI

复制代码vue  ui

这样可以进入图形化界面,具体操作,自己实践下吧!

添加vue.js3.0beta

复制代码cd vue3-demo
vue add vue-next

以上指令会执行以下操作

• 安装 Vue 3.0 依赖
• 更新 Vue 3.0 webpack loader 配置，使其能够支持 .vue 文件构建（这点非常重要）
• 创建 Vue 3.0 的模板代码
• 自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本，如果未安装则不会升级
• 自动生成 Vue Router 和 Vuex 模板代码

添加完后,可以进入项目看看代码,我在这里只举一个例子main.js vue.js2.0

复制代码import Vue from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";


Vue.config.productionTip = false;


new Vue({

  router,

  store,

  render: h => h(App)

}).$mount("#app");

vuejs3.0

复制代码import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";


createApp(App)

  .use(router)

  .use(store)

  .mount("#app");

一些具体的api变动可以看下我的demo,vue3-demo