【Vue3从零开始-第七章】7-1 vue-cli脚手架安装和单组件应用编写TodoList

2022-09-27 205

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第七章】7-1 vue-cli脚手架安装和单组件应用编写TodoList

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

之前的内容中我们都是在index.html中引入vue的cdn包之后进行开发的，如果需要开发一个大型项目的话，使用这种方式肯定是不可取的，所以我们就需要用到vue-cli脚手架了。

如果我们需要从头到尾开发一个vue的项目，可能需要使用到webpack这样的打包工具，也可能需要自己去设计项目的工程目录。但是脚手架工具实际就是把vue里面一些最佳的实践都沉淀下来了，我们通过脚手架工具可以快速的生成一个vue的工程，这个工程项目中目录如何组织，webpack如何对代码进行打包，这些东西在脚手架工具里面都已经打包好了。你也可以直接理解为它是帮助我们快速搭建vue工程的一个工具！！！

安装 nodejs

我们可以去node官网或者node中文网下载nodejs的安装包，根据自己的系统选择稳定版下载即可，傻瓜式安装方式就不详细讲解了。

💢 确保nodejs版本是在10.0以上，否则不支持vue3.x。

安装完成之后可以在命令行输入node -v查看版本号。

S61$@(Q}RR0OA5(Y2D90JZC.png

nodejs安装完成之后，还会附带一个npm包管理的命令。可以通过npm -v 查看版本号。

A[KXL%G2`L~NUV@`K)%)QIV.png

安装 vue-cli

为了确保大家的vue-cli脚手架环境是干净的，可以使用npm uninstall vue-cli -g删除掉本机的vue-cli脚手架，然后重新进行安装最新版本的vue-cli脚手架。

安装命令：npm install -g @vue/cli

QY@4QWFY2WW~KY~(~RLX}43.png

vue-cli脚手架工具安装完成之后会直接显示出它的版本号，我这里使用的版本是4.5.9。

创建vue项目

先在命令行中使用 cd Desktop命令进入桌面文件夹中，然后在用vue create demo命令来创建一个vue项目。

demo是指项目名称，可以根据自己的需要随便取名。

M3WI9G%K`P1Z8YKEX[29EZS.png

在创建vue项目的过程中，可以使用键盘上的⬆和⬇来选择，↩来确认并进行下一步。

创建完成之后，可以使用vscode来打开这个项目了。

%CZX[9EU79}1QJ@_T1WYOTE.png

这时候我们就可以在vscode的终端中使用npm run serve来运行vue项目了。

如果打开vscode之后没有显示终端，可以点击顶部操作栏中的终端下选择新建终端即可。

J@8%F}D%]C6%IDL0]4]03AD.png

运行完成之后，就可以将Local中的链接复制到浏览器中打开。

我这里运行完成之后的Local是http://localhost:8082。

Q`JX9Q96EWCJ1%E7PS)R$PC.png

打开后就是一个vue的页面了。

项目目录

)`$(R(]H6K`4ZMWDC0(L1NP.png

在项目的目录中有许多的文件和文件夹，在本章节中主要户使用App.vue和HelloWorld.vue来写一个TodoList的小功能。

App.vue是项目中的根组件，也是vue实例的一个文件。

components文件夹下面会创建项目所需的子组件或者公共组件。

main.js会引入一些第三方插件等内容。

其他文件或文件夹会在后面的实战篇章中具体说明。（本章节暂时不会用到这些内容）

TodoList

首先我们将App.vue文件里面的内容修改一下，因为默认生成的页面我们是不需要的。

<template>
  <input type="text" v-model="message">
  <button>添加</button>
  <p>{{message}}</p>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup () {
    const message = ref('123')
    return {
      message
    }
  }
}
</script>
<style>
</style>
复制代码

template标签就是前面章节中学过的模板内容。

这里的ref是用import导入的，和之前写在setup函数中有所不同哦。

其他的内容大致上和前面章节中学过的一样。

JVLJ2FW3VP4X_Q3E)E$%O7T.png

😏这样我们就完成了一个双向数据绑定的模板页面了。

下面我们就可以开始做TodoList的功能了，在以前的章节中我们已经写过几次了，所以大致的方法就不细说了，直接开干！！

<template>
  <input type="text" v-model="message">
  <button @click="handleClick">添加</button>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{item}}</li>
  </ul>
</template>
复制代码

模板标签中还是和以前一样，循环li标签渲染出list中的内容。

<script>
import {ref, reactive} from 'vue'
export default {
  name: 'App',
  setup () {
    const message = ref('')
    const list = reactive([])
    const handleClick = () => {
      list.push(message.value)
      message.value = ''
    }
    return {
      message,
      list,
      handleClick
    }
  }
}
</script>
复制代码

js中首先需要引入ref和reactive用来定义双向数据绑定的值。

在handleClick方法中将message内容追加给list数组。

追加完成之后可以将message内容清空。

并将所有数据值和方法返回给外部。

JVLJ2FW3VP4X_Q3E)E$%O7T.png

拆分组件实现TodoList

首先在components目录中新建一个vue文件：ListItem.vue

GB`P)(QAHZG4LJ]9RK]DXAS.png

然后在App.vue文件中引入ListItem.vue文件。

import ListItem from './components/ListItem.vue'
复制代码

引入文件之后，肯定需要通过components注册一下的。

components: {
    ListItem
},
复制代码

再讲引入的子组件写在模板标签中进行循环渲染。

<template>
  <input type="text" v-model="message">
  <button @click="handleClick">添加</button>
  <ul>
    <list-item v-for="(item, index) in list" :key="index" :msg="item" />
  </ul>
</template>
复制代码

将循环出来的item通过绑定的msg属性传给子组件。

最后在子组件中接收根组件传递过来的值并渲染出来。

<template>
    <li>{{msg}}</li>
</template>
<script>
export default {
    name: 'ListItem',
    props: {
        msg: String
    },
}
</script>
<style>
</style>
复制代码