当前位置：首页 > news >正文

从零使用vue脚手架开发一个简易的计算器

news 2025/10/25 14:32:47

目录

1.环境

1.node的安装

2.创建vue项目

1.安装cli脚手架

2.创建项目

3.vs code的安装

4.找到项目目录

3.开发一个简易的计算器

1.开发一个按钮组件

2.使用button按钮

3.编写计算器界面UI

4.修改app.vue的内容如下

5.重新运行项目

1.环境

使用node版本
1. v20.19.5
npm 版本
1. 10.8.2
1.node的安装
1. 如果不知道node如何安装和配置，可以参考一下官网
  1. https://nodejs.cn/download/https://nodejs.cn/download/
  3. 这个是官网，安装简单直接下一步就可以了
  4. 然后设置一下镜像源就可以了
  5. 输入下面的指令就可以了
  6. npm config set registry http://registry.npm.taobao.org/
也可以使用nvm,可参考下面的一篇博客。简易使用上面的，比较简单
1. https://blog.csdn.net/2301_76862031/article/details/140500534?spm=1011.2415.3001.5331https://blog.csdn.net/2301_76862031/article/details/140500534?spm=1011.2415.3001.5331

2.创建vue项目

1.安装cli脚手架
1. ```
自己创建一个目录 然后输入cmd,点击回车就可以了
```
3. npm install -g @vue/cli
5. 出现下面的情况就算是安装成功了
6. 验证版本
7. vue --version
2.创建项目
1. ```
vue create my-vue-app
```
4. 点击Enter
6. 等待安装即可
8. 上面是安装成功了
9. 输入 cd my-vue-app
11. npm run serve
13. 浏览器打开网址
14. http://localhost:8080/
16. vue项目创建成功了
17. 关闭cmd窗口
3.vs code的安装
1. https://code.visualstudio.com/https://code.visualstudio.com/
3. 点击download 下载就可以了
4. 然后一路next就可以了
5. 这里就不做演示了
4.找到项目目录
1. 拖拽到vscode上面
3. 然后点击 trust
5. 出现上面的界面就算是成功了
7. 鼠标右键
8. 点击Open in Integrated Terminal
10. 输入 npm run serve
12. 可以开始编写项目了
安装vue插件
3. 然后我们的语法就有提示了

3.开发一个简易的计算器

1.开发一个按钮组件
1. 找到package.json
  1. "globals": {
    
    "defineProps": "readonly",
    
    "defineEmits": "readonly",
    
    "defineExpose": "readonly",
    
    "withDefaults": "readonly"
    
    }
  2. 添加如上数据
  4. 重新启动 npm run serve
5. 编写MyButton 代码

<template><div><button @click="changeColor" class="dynamic-button" :style="{ backgroundColor: buttonColor }">{{ props.buttonText }}</button></div>
</template><script setup>
import { ref } from 'vue'const props = defineProps({buttonText: {type: String, required: ''}
})// 按钮初始的颜色
const buttonColor = ref('rgb(52, 152, 219)')const changeColor = () => {// 生成RGB随机颜色const r = Math.floor(Math.random() * 256)const g = Math.floor(Math.random() * 256)const b = Math.floor(Math.random() * 256)buttonColor.value = `rgb(${r}, ${g}, ${b})`
}
</script><style scoped>
.dynamic-button {color: white;padding: 12px 24px;border: none;border-radius: 8px;cursor: pointer;font-size: 16px;transition: background-color 0.3s ease;
}
</style>

功能点击随机变化颜色
并且可以传入文本内容

2.使用button按钮

找到app.vue文件
修改里面的内容如下

<template><MyButton :buttonText="1"></MyButton>
</template><script setup></script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

找到main.js
1. 挂载全局组件
2. import MyButton from './components/MyButton.vue'
  
  // 挂载组件
  
  app.component('MyButton',MyButton)
3. ```
import { createApp } from 'vue'
import App from './App.vue'import MyButton from './components/MyButton.vue'
const app = createApp(App)// 挂载组件
app.component('MyButton',MyButton)app.mount('#app')
```
4. 打开网址可以看到我们的按钮
5. http://localhost:8080/
7. 每次点击按钮颜色都会发生不同的变化

3.编写计算器界面UI

<template><div class="calculator-container"><div class="calculator"><!-- 显示屏 --><div class="display"><div class="previous-operand">{{ previousOperand }} {{ operation }}</div><div class="current-operand">{{ currentOperand || '0' }}</div></div><!-- 按钮区域 --><div class="buttons"><!-- 第一行 --><MyButton :buttonText="'C'" @click="clear">C</MyButton><MyButton :buttonText="'⌫'" @click="deleteLast"></MyButton><MyButton :buttonText="'%'" @click="appendOperation('%')">%</MyButton><MyButton :buttonText="'÷'" @click="appendOperation('÷')">÷</MyButton><!-- 第二行 --><MyButton  :buttonText="'7'" @click="appendNumber('7')">7</MyButton><MyButton :buttonText="'8'"  @click="appendNumber('8')">8</MyButton><MyButton :buttonText="'9'"  @click="appendNumber('9')">9</MyButton><MyButton :buttonText="'x'"  @click="appendOperation('×')">×</MyButton><!-- 第三行 --><MyButton :buttonText="'4'"   @click="appendNumber('4')">4</MyButton><MyButton :buttonText="'5'"  @click="appendNumber('5')">5</MyButton><MyButton :buttonText="'6'"  @click="appendNumber('6')">6</MyButton><MyButton :buttonText="'-'"  @click="appendOperation('-')">-</MyButton><!-- 第四行 --><MyButton :buttonText="'1'"  @click="appendNumber('1')" ></MyButton><MyButton :buttonText="'2'"  @click="appendNumber('2')"></MyButton><MyButton :buttonText="'3'"  @click="appendNumber('3')"></MyButton><MyButton :buttonText="'+'"  @click="appendOperation('+')"></MyButton><!-- 第五行 --><MyButton :buttonText="'0'"  @click="appendNumber('0')">0</MyButton><MyButton :buttonText="'.'"  @click="appendNumber('.')">.</MyButton><MyButton :buttonText="'='"  @click="calculate">=</MyButton></div></div></div>
</template><script setup>
import { ref } from 'vue'// 计算器状态
const currentOperand = ref('')
const previousOperand = ref('')
const operation = ref('')
const shouldResetScreen = ref(false)// 添加数字
const appendNumber = (number) => {if (shouldResetScreen.value) {currentOperand.value = ''shouldResetScreen.value = false}// 防止多个小数点if (number === '.' && currentOperand.value.includes('.')) return// 防止以0开头（除了0.）if (number === '0' && currentOperand.value === '0') returnif (number !== '.' && currentOperand.value === '0') {currentOperand.value = numberreturn}currentOperand.value += number
}// 添加操作符
const appendOperation = (op) => {if (currentOperand.value === '' && previousOperand.value === '') returnif (currentOperand.value === '') {operation.value = opreturn}if (previousOperand.value !== '') {calculate()}operation.value = oppreviousOperand.value = currentOperand.valueshouldResetScreen.value = true
}// 计算结果
const calculate = () => {if (previousOperand.value === '' || currentOperand.value === '' || operation.value === '') returnconst prev = parseFloat(previousOperand.value)const current = parseFloat(currentOperand.value)if (isNaN(prev) || isNaN(current)) returnlet computationswitch (operation.value) {case '+':computation = prev + currentbreakcase '-':computation = prev - currentbreakcase '×':computation = prev * currentbreakcase '÷':computation = prev / currentbreakcase '%':computation = prev % currentbreakdefault:return}currentOperand.value = computation.toString()operation.value = ''previousOperand.value = ''shouldResetScreen.value = true
}// 清空
const clear = () => {currentOperand.value = ''previousOperand.value = ''operation.value = ''
}// 删除最后一位
const deleteLast = () => {if (currentOperand.value === '') returncurrentOperand.value = currentOperand.value.slice(0, -1)
}
</script><style scoped>
.calculator-container {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);padding: 20px;
}.calculator {background: #2d3748;border-radius: 20px;padding: 25px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);width: 320px;
}/* 显示屏样式 */
.display {background: #1a202c;border-radius: 10px;padding: 20px;margin-bottom: 20px;text-align: right;min-height: 80px;display: flex;flex-direction: column;justify-content: space-between;
}.previous-operand {color: #a0aec0;font-size: 14px;min-height: 20px;
}.current-operand {color: white;font-size: 32px;font-weight: bold;word-wrap: break-word;word-break: break-all;
}/* 按钮布局 */
.buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 12px;
}</style>

这里主要使用ref函数，和一些函数的逻辑
1. 清除数据，就是是数据置空 var_info = ''
2. %加减乘除= 就是一些js内置的
3. 使用switch根据传入按钮传入的值触发不同的功能

挂载组件

import { createApp } from 'vue'
import App from './App.vue'import MyButton from './components/MyButton.vue'
import CaculatorUI from './components/CaculatorUI.vue'
const app = createApp(App)// 挂载组件
app.component('MyButton',MyButton)
app.component('CaculatorUI',CaculatorUI)app.mount('#app')

4.修改app.vue的内容如下

<template><CaculatorUI></CaculatorUI>
</template><script setup></script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>