时间戳

首页 > 解决方案 > 将 index.html 转换为完整的 Vue CLI 结构

javascript - 将 index.html 转换为完整的 Vue CLI 结构

问题描述

我创建了这个应用程序来计算一个数字的立方，然后计算输出的各个元素的立方。我在 JS Fiddle 中创建了这个 Vue js 项目来学习 Vue 的基础知识。但我想完成 Vue CLI 项目。我在我的计算机上安装了 Vue.js，但我不知道如何将这个单个文件 index.html 移植到 Vue CLI 项目（App.vue、HelloWorld.vue、main.js）中的不同文件中。谁能告诉我如何将这个单页文件转换为实际的项目文件。

<div id="cubed">
  <input v-model='mainNumber' placeholder='Enter a number.'>
  <button v-on:click="cube">Submit</button>
  <p>
    Cube of the number is: {{ this.result }} <br>
  </p>
 <table id="table">
 <tr v-for="row in 2" :key="item">
   <td v-for="item in result" v-text="row > 1 ? cubeInt(item) : item"></td>
 </tr>
 </table>
</div>


#table {
  border-collapse: collapse;
  width: 50%;
  text-align: center;
}

#table td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#table tr:nth-child(even){background-color: #f2f2f2;}

#table tr:hover {background-color: #ddd;}

new Vue({
  el: "#cubed",
  data: {
    mainNumber: null,
    result: null
  },
  methods: {
    cubeInt: function(int) {
     return int*int*int
    },
    cube: function(event){
      var allowedInput = /^[0-9]/;
      if (this.mainNumber.match(allowedInput)){
        let calc = this.cubeInt(this.mainNumber);
        let strToNum = calc.toString().split('').map(Number);
        this.result = strToNum
      } else {
            alert('Only digits are allowed.');
        }
    },
    }
})

标签： javascriptvue.jsvuejs2

解决方案

所以使用 Vue cli 我们有 vue 文件，每个文件都有一个

  • 模板
  • 脚本
  • 样式（可选）

我建议查看：本网站的 Project Anatomy 部分：

并在 youtube 上查看 netninja 的一些教程，它们真的很有帮助！

如果你想让它现在工作，但在导入组件等方面遇到困难，作为测试，用下面的 vue 格式代码替换并保存 HelloWorld.vue 文件：

<template>
<div id="cubed">
  <input v-model='mainNumber' placeholder='Enter a number.'>
  <button v-on:click="cube">Submit</button>
  <p>
    Cube of the number is: {{ this.result }} <br>
  </p>
 <table id="table">
 <tr v-for="row in 2" :key="item">
   <td v-for="item in result" v-text="row > 1 ? cubeInt(item) : item"></td>
 </tr>
 </table>
</div>
</template>

<script>
export default {
  name: "HelloWorld",
  data: {
    mainNumber: null,
    result: null
  },
  methods: {
    cubeInt: function(int) {
     return int*int*int
    },
    cube: function(event){
      var allowedInput = /^[0-9]/;
      if (this.mainNumber.match(allowedInput)){
        let calc = this.cubeInt(this.mainNumber);
        let strToNum = calc.toString().split('').map(Number);
        this.result = strToNum
      } else {
            alert('Only digits are allowed.');
        }
    },
    }
}
</script>

<style scoped>
#table {
  border-collapse: collapse;
  width: 50%;
  text-align: center;
}

#table td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#table tr:nth-child(even){background-color: #f2f2f2;}

#table tr:hover {background-color: #ddd;}
</style>

推荐阅读