《Vue3.0抢先学》系列之：一个简单的例子
书接上文：你被我撩拨了一下，从Github上下载了Vue3.0的源码。然后呢，你是不是已经迫不及待的想知道到底怎么样快速的把这个源代码用起来呢？
好，让我们这就来试一试，赶紧开始编译一下框架源代码，命令行咔咔敲起来！
# 安装项目的依赖包
yarn #如果你用的是 yarn
npm install #如果你用的是 npm
# 构建出可发布代码
yarn build #如果你用的是 yarn
npm run build #如果你用的是 npm经过几十秒炫酷的命令行刷屏之后，构建完成了。之后，我们可以看到在packages下的各个子项目文件夹中，有已经生成好的dist目录，里面躺着几个文件，命名不太一样，有的文件名中有prod后缀，有的则没有，这个代表经过压缩的或不压缩的js；有的包含了global、cjs、esm-xxx等，这个则表示这个js文件适用的模块加载器类型。我们可以按照实际需要来选用。
我下面将选用 packages/vue/dist 目录下的 vue.global.prod.js 这个文件，因为它是打包后得到的最完整的框架代码，可以直接通过<script>标签引入HTML页面，最适合我用来快速编写示例代码。
下面我要用Vue3.0来编写一个简单的鼠标点击计数器。界面在我的预想中看起来会是这个样子的：
开始写代码咯，让我来先初始化一下我的示例项目：建一个文件夹，下面的文件结构如下图所示，有css和js目录，分别存放示例代码要用到的样式、vue的js库文件、以及我们编写的示例js代码文件；而 index.html 则就是这个程序的主入口了。
让我们从这个 index.html 写起，在里面引入css和js文件并创建了一个Vue应用所需的挂载点元素，代码不多，保持简洁：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue3.0 Demo</title>
<link rel="stylesheet" type="text/css" href="./css/main.css" />
</head>
<body>
<!-- 应用挂载点元素 -->
<div id="app"></div>
<!-- 引入Vue3.0库文件 -->
<script src="./js/lib/vue.global.prod.js"></script>
<!-- 我们的应用代码 -->
<script src="./js/main.js"></script>
</body>
</html>接着，我要开始编写上面预想中的界面了。我将它拆分成两个组件（红色部分的根组件，以及蓝色部分的子组件）：
我的 main.js 代码实现完后看起来大致是这个样子的：
const { createApp, createComponent } = Vue
// 计数器组件
const Counter = createComponent({
template: `
<div class="counter-display">
<span class="counter-label">恭喜你，你已经写了</span>
<span class="counter-text">{{ count }}</span>
<span class="counter-label">斤代码！</span>
</div>
<div class="counter-btns">
<button class="btn" @click="increase">写一斤</button>
<button class="btn" @click="reset">删库啦</button>
</div>
`,
data() {
return {
count: 0
}
},
methods: {
increase() {
this.count++;
},
reset() {
this.count = 0;
}
}
})
// 根组件
const App = createComponent({
components: { Counter },
template: `
<div class="container">
<h3>计数器示例</h3>
<Counter />
</div>
`
})
// 启动
const container = document.querySelector('#app')
const app = createApp()
app.mount(App, container)用过Vue2.x的朋友是不是觉得非常眼熟，毫无压力的就看懂了？这几乎是和2.x的代码一模一样的，除了createApp()、createComponent()函数稍稍有点不同。其实，这里的createComponent()函数也不是必须的，完全可以去掉，它的存在是为了当我们使用TypeScript编写代码时，利用TypeScript的类型推断机制在开发工具里（如VSCode）实现更好的参数自动提示功能。
所以呢，写成下面这样也是完全可以工作的：
const App = {
components: { Counter },
template: `
<div class="container">
<h3>计数器示例</h3>
<Counter />
</div>
`
}好了朋友，你是不是已经抄完了上面的代码，开始运行了？什么？有点丑？好吧，忘记样式了，一定要把样式给补上，因为现在的颜值控太多，程序界面不能搞太丑啊。在我们的 main.css里添加如下内容吧：
.container {
border: 1px solid #cccccc;
border-radius: 5px;
width: 250px;
padding: 20px;
}
.counter-display {
margin-bottom: 20px;
}
.counter-text {
font-size: 18px;
font-weight: bold;
color: #ff9900;
margin: 0 5px;
}
.counter-btns .btn {
border: 1px solid #cccccc;
border-radius: 5px;
width: 80px;
height: 40px;
outline: none;
background: #f2f2f2;
margin-right: 10px;
}完成！
今天就讲这么多，你已经成功跨入Vue3.0时代了！虽然代码现在看起来还不那么3.0，但是至少这个程序已经运行在最新版Vue之上了，我们将在后面的文章中重新改造这段代码，花式种种，眼花缭乱。