经过了漫长的迭代，Vue 3.0 终于在上 2020-09-18 发布了，带了翻天覆地的变化，使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hook ，让使用者更加的灵活，接下来我们就开始学习vue3.0。

安装

vue安装有如下三种方式：

  • 以 CDN package 的形式导入，简而言之就是以<script>标签形式导入
    对于制作原型或学习，你可以这样使用最新版本 
    1
    <script src="https://unpkg.com/vue@next"></script>
  • 使用npm安装
    在用 Vue 构建大型应用时推荐使用npm安装, NPM能很好地和诸如Webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。 
    1
    2
    # 最新稳定版
    $ npm install vue@next
  • 使用官方的CLI来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。
    Vue提供了一个官方的CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。
    对于Vue3，你应该使用npm上可用的Vue CLI v4.5作为@vue/cli@next。要升级，你应该需要全局重新安装最新版本的 @vue/cli： 
    1
    2
    3
    $ yarn global add @vue/cli@next
    # OR
    $ npm install -g @vue/cli@next
    然后在 Vue 项目运行： 
    1
    $ vue upgrade --next

Vite脚手架

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

1
2
3
4
5
6
7
8
9
10
# npm
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
# 或者 yarn
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

具体操作步骤如下：

  1. 第一步：全局重新安装最新版本的 @vue/cli
    1
    $ npm install -g @vue/cli@next
  2. 第二步：使用vite快速创建项目
    1
    $ npm init vite-app vite-demo1
  3. 第三步：进入到项目下，并执行如下命令
    1
    2
    $ cd vite-demo1
    $ npm install
  4. 第四步：然后使用npm run dev运行项目
  5. 第五步：在浏览地地址栏输入localhost:3000，出现如下效果

    至此使用vite创建项目完成。

Vue-cli脚手架快速创建项目

使用vue-cli脚手架快速创建项目，需要执行如下几步：

  1. 第一步：全局重新安装最新版本的 @vue/cli
    1
    $ npm install -g @vue/cli
  2. 第二步：创建项目
    1
    $ vue create cli-demo

    选择**Default (Vue 3 preview) ([Vue 3] babel, eslint)**，然后回车

快速入门

声明式渲染

1
2
3
<div id="app">
Counter: {{ counter }}
</div>
1
2
3
4
5
6
7
Vue.createApp({
	data() {
    return {
      counter: 0
    }
  }
}).mount('#app')

这样我们就创建了一个vue项目，请看下面实例：count 每秒自动递增

1
2
3
4
5
6
7
8
9
10
11
12
Vue.createApp({
	data() {
    return {
      counter: 0
    }
  },
	mounted () {
		setInterval(() => {
      this.counter++
    }, 1000)
	}
}).mount('#app')