Skip to main content

基于Vue2+TypeScript实现简单的夹娃娃游戏

· 预计阅读时间：2 分钟
note

使用Vue2+TypeScript实现简单的H5夹娃娃小游戏，项目实现爪子上下伸缩，娃娃从右向左循环移动，爪子下落到底部后检查是否夹中娃娃；夹中时移动的娃娃消失且爪子上显示夹中的娃娃一同上升，未夹中则空爪上升

1、通过脚手架VueCli3快速创建项目#

1.1、脚手架创建项目命令#

vue create 项目名称

1.2、配置仅参考#

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, TS, Router, CSS Pre-processors, Linter

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)

? Pick a linter / formatter config: Airbnb

? Pick additional lint features: Lint on save

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

? Save this as a preset for future projects? No

2、项目移动端适配#

  • 安装依赖和loader
npm i postcss-px2rem lib-flexible npm i postcss-loader --dev
  • 配置postcss-px2rem项目根目录下创建vue.config.js文件并配置
/* eslint-disable @typescript-eslint/no-var-requires */const px2rem = require('postcss-px2rem');
module.exports = {  css: {    loaderOptions: {      css: {        // 这里的选项会传递给 css-loader      },      postcss: {        // 这里的选项会传递给 postcss-loader        plugins: [          px2rem({            remUnit: 37.5,          }),        ],      },    },  },};
  • 项目入口文件main.ts文件中导入lib-flexible
import 'lib-flexible';import Vue from 'vue';import App from './App.vue';import router from './router';
Vue.config.productionTip = false;
new Vue({router,render: (h) => h(App),}).$mount('#app');
  • 入口页面 index.html 中设置<meta>标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
文章目录