vue3自学第一天：设计一个计算器的模板

发布时间：2025-09-21 00:57:18 阅读量： 7 来源： 互联网转载

在进行这个系列教程之前，小编我也未接触过vue3和typescript，甚至node.js 也没怎么用过，所以也算是零基础。首先学习VUE3我认为需要咱们有这个基本的html css javascript的基础。如果没有这些基础请先学习这三项基础我认为才比较适合学习vue3。

自学的方式我认为最好的就是自己开发一个小的项目，这里我打算开发实现计算器功能的小项目。那么第一步，肯定是先设计一个计算器的HTML模板文件。效果图如下

整个设计的思路是这样的，通过绝对定位的方式让DIV容器居中到屏幕的最中间。每个列都通过flex进行布局。下面是源代码。

20221108638035193213920004.rar

设计好这个模板文件后，那么开始安装vue3。安装Vue3之前需要安装node.js环境，首先建立一个文件夹，我是在d盘建立了一个nodetest的文件夹。通过cmd命令行进入这个文件夹，然后输入命令npm init vue@latest 然后按照提示就可以安装成功了，如下图

Project name 是项目的名称，根据需要取一个就是。其他的都是可选功能。因为我也是刚开始学习这些功能有啥用我暂时也不知道。唯一确定的是第一项我通过字面意思了解应该是添加TypeScript支持。我选择了YES。安装完成后打入命令 cd demo 进入demo文件夹在打入npm install 安装依赖后VUE3的一个DEMO项目就创建成功了。然后在命令行打入npm run dev 就可以预览项目了啊。特意说明：如果我们没有使用淘宝镜像，直接打入npm install 命令的话因为是国外的服务器会非常慢，所以这里推荐使用淘宝镜像来下载npm的依赖.具体方法可以搜索百度 node 淘宝就有教程

我使用的IDE是webstorm,当然外面是比较流行使用vs code的。但我本人比较习惯webstorm ,使用任何ide其实没啥区别就是根据自己的喜爱决定了。每个IDE都有一个控制台可以直接在控制台打入命令，不需要都通过cmd来输入命令。

上图种根目录下的JSON文件都是配置文件，可以先随意了解一下。其实对于我们小白来说只需要知道一些大概的就行。没必要深入了解。留到以后在说。

然后我们查看index.html可以看到一个/src/main.ts文件是入口文件。打开他我把它修改成了如下代码

第一行是引入vue 第二行是引入组件App.vue 第三行是创建实例。

然后打开app.vue 把模板文件按照格式写入如下图

app.vue 里的ｓｃｒｉｐｔ我认为是写ts代码的地方 template节点是放置html代码的地方。style节点是放置css的地方。根据我提供的demo.rar 里的html文件把相应的代码分离出来，并填入到app.vue即可。然后通过终端打入命令npm run dev就可以成功预览了。

好了，UI已经完成了。明天在来实现这个文件的相应功能。

上一篇: 外链规划蓝图：打造高质量的外链出站链接

下一篇: 大连做网站的公司教您怎么优化自己的网站

vue3自学第一天：设计一个计算器的模板

热门文章