持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

前言

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

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

安装 nodejs

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

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

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

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

安装 vue-cli

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

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

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

创建vue项目

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

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

在创建vue项目的过程中，可以使用键盘上的⬆和⬇来选择，↩来确认并进行下一步。
创建完成之后，可以使用vscode来打开这个项目了。

这时候我们就可以在vscode的终端中使用npm run serve来运行vue项目了。
如果打开vscode之后没有显示终端，可以点击顶部操作栏中的终端下选择新建终端即可。

运行完成之后，就可以将Local中的链接复制到浏览器中打开。
我这里运行完成之后的Local是http://localhost:8082。

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

项目目录

在项目的目录中有许多的文件和文件夹，在本章节中主要户使用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函数中有所不同哦。
其他的内容大致上和前面章节中学过的一样。

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

下面我们就可以开始做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内容清空。
并将所有数据值和方法返回给外部。

chrome-capture-2022-5-9 (1).gif

拆分组件实现TodoList

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

然后在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>

chrome-capture-2022-5-9 (2).gif

🧐 TodoList的拆分组件就完成了，大家可以结合以前的内容拆分更多更细一点，这样可以帮助大家更快的熟悉vue-cli脚手架工具中的内容。

总结

由于掘金上有很多安装vue-cli脚手架的文章，所以本篇内容描述的不够仔细，但是大家在安装的过程中有啥问题是可以通过留言的方式一起讨论的哦~~

本篇文章主要还是和大家一起学习了vue-cli脚手架工具和创建一个vue项目工程的内容，并用工程项目编写了todoList的例子，希望可以带着大家正式熟悉这样的开发模式哦。大家加油💪💪

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

前言