专栏首页大前端开发《Vue3.0抢先学》系列之:一个简单的例子

《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之上了,我们将在后面的文章中重新改造这段代码,花式种种,眼花缭乱。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Node.js服务端开发教程 (六):依赖注入补漏篇

    最近在写前面两篇关于依赖注入的文章时,我总是在想用一句怎么的话来简单而朴素的描述依赖注入的概念,让从来没接触过的朋友能比较形象的去理解。想来想去,觉得可以站在依...

    一斤代码
  • 从编程小白到全栈开发:一个简易纯前端计算器

    在前文中,我给大家介绍了在JS全栈开发中前端和后端的概念,如果你有了一种茅塞顿开的感觉,恭喜你,你骨骼清奇,是个当程序猿的好苗子。

    一斤代码
  • 使用mpvue开发小程序教程(二)

    在上一篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来。在本文中,我们来研究熟悉一下...

    一斤代码
  • CSS布局相关及Flex详解

    对于两个div元素,其是相对独立的,如果在其中一个div元素中加入内容,将会使得两个元素的底部不能对齐,导致页面多出空白区域。

    奋飛
  • .net core 实现简单爬虫—抓取博客园的博文列表

    晓晨
  • Css实现瀑布流布局

    我们只需要设置最外层的父级(waterfall)和子级的父元素(poster)的css就可以

    任我行RQ
  • 深入理解和应用display属性(二)

    四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inl...

    sam dragon
  • Datepicker日期选择器插件

    这个插件还是比较简单的,而且样式也比较漂亮,可以自定义选择年月日、年月日时分、年月、时间段选择等等。

    从入门到进错门
  • python selenium 微信公众号历史文章随手一点就返回首页?郁闷之下只好将他们都下载下来。

    参照资料:selenium webdriver 如何添加cookie: https://www.cnblogs.com/sundahua/p/10202494....

    forxtz

扫码关注云+社区

领取腾讯云代金券