定义vote组件，实现投票功能

定义vote组件，实现投票功能

要求：

1. 使用脚手架工具构建一个Vue.js项目

2. 定义vote组件，实现投票功能，点击“投票”按钮，当前候选人票数+1

3. App.vue 当中显示候选人头像、候选人姓名、投票按钮并显示票数

 使用脚手架工具构建一个Vue.js项目

卸载命令如下：

//  注意，第一次使用vue脚手架的同学可直接忽略此步骤

           npm uninstall vue-cli -g

1、vue cli 脚手架的安装

//  通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本，如果不写，则下载最新版本

           npm install -g @vue/cli

          

           PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

          //安装淘宝镜像的命令行

          ①  npm install -g cnpm --registry=https://registry.npmmirror.com

          // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ②  cnpm install -g @vue/cli

        

         //PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org

或者，哪个方式快，用哪个

npm config set registry https://registry.npmmirror.com 

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。

 成功安装界面：

 

2、vue create 命令创建项目

// helloworld 是项目名，可自行定义          

vue create helloworld

执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示： 

此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

配置项	说明
Babel	JavaScript语法编译器
TypeScript	TypeScript是JavaScript的超集，其包含了并扩展了JavaScript的语法，需要被编译输出为JavaScript才能在浏览器运行
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue-router（vue路由）
Vuex	vue的状态管理模式
CSS Pre-processors	CSS预处理器，如less或sass
Linter/Formatter	代码风格检查和格式化（如：ESlint）
Unit Testing	单元测试（unit tests）
E2E Testing	端对端测试

大家根据需求选择相应的配置项，一步步往后创建项目即可。项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword

npm run serve

接下来，在浏览器输入：http://localhost:8080/  地址，即可看到如下页面

 完整的创建脚手架项目的步骤：

视频教程

现在，我们需要创建一个新的Vue组件，名为Vote.vue。在这个组件中，我们需要实现投票功能。这个组件应该包含一个“投票”按钮，当用户点击这个按钮时，当前候选人的票数会增加1。 

定义vote组件，实现投票功能，点击“投票”按钮，当前候选人票数+1 

首先：我们创建一个名为Vote.vue的组件：

<template>

  <div class="vote-component">

     

  <img :src="candidate.avatar" alt="候选人头像"  />

  <p>{{ candidate.name }}</p>

 <button @click="vote">投票</button>

  <p>X{{ votes }}</p></div>

 </template>

 <script>

 export default {

 props: {

 candidate: {

  type: Object,

 required: true,

 },},

  data() {

  return {

  votes: 0,

  };

  },

 methods: {

  vote() {

     if(this.votes<10)

     {

         this.votes++;

     }

 },},};

 </script>

 <style scoped>

 .vote-component {

  align-items: center;

 }

 img {

  width: 180px;

  height: 250px;

  border-radius:10%;

  border:black solid 1px;

 margin: 25px;

 }

 p{margin: 2px;

 }

 img,button,p{

     position: relative;

     top: 150px;

     right: 100px;

 }

 </style>

<style scoped></style>

这个组件接收一个名为

candidate

的属性，这是一个对象，包含候选人的信息。当用户点击“投票”按钮时，如果他们还没有投票，那么就会触发

vote

方法，增加候选人的票数，并发出一个

vote

事件，传递当前的候选人。

这里是设置图片样式：

</script>

 <style scoped>

 .vote-component {

  align-items: center;

 }

 img {

  width: 180px;

  height: 250px;

  border-radius:10%;

  border:black solid 1px;

 margin: 25px;

 }

 p{margin: 2px;

 }

 img,button,p{

     position: relative;

     top: 150px;

     right: 100px;

 }

 </style>

 App.vue 当中显示候选人头像、候选人姓名、投票按钮并显示票数

然后：我们在App.vue中使用这个组件：

App.vue 文件内容如下：

<template>
  <div id="app">
   <h1>为你喜欢的人投票</h1>
  
   <Vote v-for="(candidate, index) in list" :key="index" :candidate="candidate" />
   </div>
  </template>
  
  <script>
  import Vote from "c:/Vue.js/zyx1/helloworld/src/components/Vote.vue";
  
  export default {
   name: "App",
   components: {
   Vote,
  },
   data() {
  return {
    list: [
  
  {avatar: require('C:/Vue.js/zyx1/helloworld/src/assets/jane.png'), name: "Jane"},
  
  {avatar: require('C:/Vue.js/zyx1/helloworld/src/assets/kate.png'), name: "Kate"},
  
  {avatar: require('C:/Vue.js/zyx1/helloworld/src/assets/mike.png'), name: "Mike"},
  
  {avatar: require('C:/Vue.js/zyx1/helloworld/src/assets/tom.png'), name: "Tom"}
  
  ],
   };
  },
  };
  </script>
  
  <style>
  #app {
   text-align: center;
   color: #2c3e50;
   border: #2c3e50 solid 3px;
   width: 1200px;
   height: 600px;
   margin: auto;
    display: flex;  
    flex-wrap: wrap;  
  
  }
  
  h1{position: relative;left: 450px;}
  </style> 

注意：

这里的图片路径一定要写对。

  list: [
  
  {avatar: require('C:/Vue.js/zyx1/helloworld/src/assets/jane.png'), name: "Jane"},
  
  {avatar: require('C:/Vue.js/zyx1/helloworld/src/assets/kate.png'), name: "Kate"},
  
  {avatar: require('C:/Vue.js/zyx1/helloworld/src/assets/mike.png'), name: "Mike"},
  
  {avatar: require('C:/Vue.js/zyx1/helloworld/src/assets/tom.png'), name: "Tom"} 

  ],

 这里是设置全局样式：

<style>
  #app {
   text-align: center;
   color: #2c3e50;
   border: #2c3e50 solid 3px;
   width: 1200px;
   height: 600px;
   margin: auto;
    display: flex;  
    flex-wrap: wrap;  
  
  }
  
  h1{position: relative;left: 450px;}
  </style>  

 完成效果截图如下：