Vue.js实战之todolist待办项目

Vue.js 前端

字数统计: 3.2k阅读时长: 13 min

 2022/11/05 

初始化一个新项目

要初始化一个新项目，创建一个文件夹test作为项目目录，打开一个终端将切换路径到test，运行代码：

PS C:\Users\Administrator\Desktop\test> vue create test

运行结果如下：
 Your connection to the default yarn registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? (Y/n)输入Y回车
   Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

使用方向键选择“ Manually select features”（手动选择）选项后按下键盘上的回车键继续。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

可以看到第一个菜单允许选择想要包含在项目中的功能，确保“Babel”和“Linter / Formatter”这两项是被选中的。若它们没有被选中，使用方向键切换，按空格键来选中它们，若它们被选中，按下回车键继续。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

接下来为选择Vue.js版本，使用方向键选中3.x选项后按下键盘上的回车键继续。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

接下来为linter / formatter选择一个配置，使用方向键选中"ESLint with error prevention only"选项后按下键盘上的回车键继续。这样可以辅助我们捕获常见的错误。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

接下来选择需要哪种自动化的Lint，使用方向键选中"Lint on save"选项后按下键盘上的回车键继续。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

接下来选择把配置文件放在哪里。"In dedicated config files"这个选项会把配置文件单独放在一个文件里，另一个选项"In package.json"会把配置文件放仅项目文件package.json里。选择"In dedicated config files"选项后按下键盘上的回车键继续。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

最后选择是否把这次的选择作为未来的预设配置。输入y后按下键盘上的回车键后输入保存的配置名称。然后脚手架工具就开始构建项目，并且安装所需的依赖。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? 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? (y/N)

项目结构

如果前面的步骤都顺利执行的话，脚手架工具已经在项目中创建了一系列的文件和目录，其项目结构如下：

eslintrc.js：是eslint的配置文件，可以通过它来管理校验规则
babel.config.js：是Babel的配置文件，可以在开发中使用JavaScript的新特性，并且将其转换为在生成环境中可以跨浏览器运行的旧语法代码，也可以在这里配置额外的babel插件
.browserslistrc：是Browserslist的配置文件，可以通过它来控制需要对哪些浏览器进行支持和优化
public：该目录包含一些在Webpack编译过程中没有架构处理过的文件（index.html除外）
- favicon.ico：项目的图标，当前是一个Vue的logo
- index.html：应用模板文件，Vue应用会通过这个HTML页面来运行，也可以通过lodash这种模板语法在这个文件里插值
src：Vue应用的核心代码目录
- main.js：应用的入口文件。目前它会初始化Vue应用并指定将应用挂载到index.html文件中的哪个HTML元素上。通常还会做一些注册全局组件或者添加额外的Vue库的操作
- App.vue：Vue应用的根节点组件
- components：用来存放自定义组件的目录，当前里面会有一个示例组件
- assets：用来存放如CSS、图片这类的静态资源，可以用webpack来操作和处理根据创建项目时的配置项不同，可能会有一些其他的预设目录，比如选择了路由配置，会看到一个views文件夹。

`.vue`文件（单文件组件）

组件是构建Vue应用中非常重要的一部分，其可以把一个很大的应用程序拆分为独立创建和管理的不相干区块，然后彼此按需传递数据。

在其他框架鼓励把模板、逻辑和样式的代码区分成不同文件时，Vue提倡使用单文件组件，把模板、相关脚本和CSS整合到一起放在.vue结尾的单文件中。这些文件最终会通过JS打包工具（如Webpack）处理。

使用Vue CLI创建的项目被配置为开箱即用的情况下，可以在CLI创建项目中的src文件夹里看到第一个.vue文件：App.vue。

`App.vue`

打开App.vue文件，可以看到有<template>、<script>和<style>三部分组成，分别包含了组件的模板、脚本和样式相关的内容。所有单文件组件内的结构都是这种类似的结构。

<tamplate>包含了所有的标记结构和组件的展示逻辑。tamplate可以包含任何合法的HTML以及Vue特点的语法。如通过设置<tamplate lang="pug">可以使用Pug模板来替代标准HTML。

<script>包含组件中所有的非显示逻辑，<script>标签默认导出一个JS对象。该对象用于在本地注册组件、定义属性、处理本地状态、定义方法等地方。在构建阶段这个包含<tamplate>的对象会被处理和转换成为一个有render()函数的Vue组件。

对于App.vue，默认导出将组件的名称设置为app，并通过将HelloWorld组件添加到components属性中来注册它。以这种方式注册组件时，意味着就是在本地注册，本地注册的组件只能在注册它们的组件内部使用，因此需要将其导入并注册到使用它们的每个组件文件中。

<script>
import HelloWorld form './components/Helloworld.vue'
    
export default{
    name:'app',
    components:{
        //在这里本地注册组件
        HelloWorld
}
}
</script>

若想要使用TypeScript语法，可以将<script>标签的lang属性设置为<script lang='ts'>。

组件的CSS应写在<style>标签里，若添加了<scoped>属性（如<style scoped>)，Vue会把样式的范围显示在单文件组件的内容里。设置类似于CSS-in-JS的解决方案，只不过是允许书写纯粹的CSS。

注意：若通过CLI创建项目是选择了CSS预处理器，则可以将lang属性添加到<style>标签中，以便Webpack可以在构建时处理内容。如<style lang="scss">将允许在样式信息中使用SCSS语法。

本地运行程序

Vue CLI带有内置的开发服务器，因此可以无需自己配置服务器便可在本地运行并测试应用程序。CLI会以npm脚本的形式将serve命令添加到项目的package.json文件中，因此可以轻松地运行它。

在终端中，切换到项目所在的路径，输入npm run serve或者yarn run serve即可运行服务器，此时的终端应输出以下类似的内容：

PS C:\Users\Administrator\Desktop\test\test> npm run serve

> test@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 1995ms                                                                          14:28:36


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.17.212.3:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.



 WAIT  Compiling...                                                                                             14:28:36

Compiling...


 DONE  Compiled successfully in 70ms                                                                            14:28:36


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.17.212.3:8080/

若在浏览器中打开http://localhost:8080/或http://10.17.212.3:8080/，便可以看到应用程序。当前它应该包含欢迎信息、Vue文档的链接、使用CLI初始化应用程序时添加的插件链接，以及指向Vue社区和生态系统的其他有用链接。

改动应用

对应用做出第一步改动，删除Vue logo。打开App.vue文件，在template部分删除<img>元素

1	<img alt="Vue logo" src="./assets/logo.png">

服务器仍在正常运行时，可以看到logo是即时从之前渲染的页面中消失。接下来再把HelloWorld组件也删掉。

首先删除下面这一行：

1	import HelloWorld from './components/HelloWorld.vue'

若这时候保存App.vue文件，渲染好的应用会因为找不到HelloWorld组件而抛出一个错误。

在<script>中将引入和注册组件的那几行删掉：

1
2
3

components: {
  HelloWorld
}

此时渲染好的应用不再显示错误了，只有一个空页面。

接下来来创建一个任务清单的应用。打开App.vue文件，将下列代码删除：

1	<HelloWorld msg="Welcome to Your Vue.js App"/>

编写代码如下，在<div id="app">中新增一个<h1>标签，并将标题文案设为"To-Do List"：

<template>
  <div id="app">
    <h1>To-Do List</h1>
  </div>
</template>

此时服务器会展示To-Do List标题。

小结

学习至此，我们已经为示例应用程序创建了一些脚手架，使其可以运行，检查并进行了一些初步更改。后续将进一步研究并构建示例应用程序。使之允许存储项目列表，完成后将其选中，并按所有、已完成和未完成待办事项来过滤。

创建第一个Vue组件

Vue组件是由管理应用程序数据的JavaScript对象和映射到基础DOM结构的基于HTML语法的模板语法组成的。接下来要创建一个组件来表示待办事项列表中的每一个项目。

创建一个`ToDoItem`组件

ToDoItem组件将用来显示单一的待办事项，用它来建立待办事项列表。

在test/srx/components目录下，创建一个ToDoItem.vue的新文件并打开
在文件顶部添加<template></template>部分来创建组件中的模板部分
在模板部分下面创建一个<script></script>部分。在<script>标签内，添加一个默认导出对象export default{}作为组件对象:
1
2
3
4
<template> </template>
<script>
export default{};
</script>

现在加上为ToDoItem添加实际内容。Vue模板目前只允许一个根元素--一个元素需要包裹模板内的所有内容，因此要为该根元素使用一个<div>。

在组件模板中添加一个空的<div>

在<div>里添加一个checkbox和一个对应的label。给复选框添加一个id，并添加一个for属性，将复选框映射到标签上。

<template>
    <div>
        <input type="checkbox" id="todo-item" checked="false" />
        <label for="todo-item">My Todo Item</label>
    </div>
</template>