脚本宝典收集整理的这篇文章主要介绍了vue/cli实现简单待办事项页面，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
本博客内容基于b站视频
https://www.bilibili.COM/video/BV1wy4y1k7Lr?share_source=copy_web。
一、使用vue/cli创建工程项目
vue cli是工程脚手架，相当于已经搭建好的服务框架。
安装 使用命令 npm install -g @vue/cli
前提是已经安装了npm 和 node.js
创建项目
使用命令,在指定的目录文件下
vue create <name>
前两个选项分别是默认的vue2 和vue3项目，带有babel编译和eslint代码规范组件。
第三个是自定义安装，可以再添加一些内容
我们选择第二项
然后就会开始下载相应的内容，自动创建项目
系统会用蓝色的命令行提示如何启动项目。我们这里也可以使用vue ui来进入图形化管理界面。不过我自己尝试的时候会出错。
输入命令以后就启动服务了
相当于用本地主机作为服务器，本地端口为8080。疑惑的是，教程中是有网络地址的，我这里则是unavailable。
不知道是不是因为他用的是yarn命令的原因。
然后在浏览器输入相应的地址就可以打开服务
进入创建项目的文件夹，有一个src的源码文件夹。其中App.vue就是项目入口，服务页面就是从这里显示。
components文件夹存放未来要使用的各类组件。assets存放图片，图标等静态资源
main.js创建了一个vue的实例并把它挂载到id为app的dev下。（这个我不太能够理解）
上一层文件夹中的public文件夹放了最后要打包生成的htML文件的模板。最后vue生成的代码都挂载到该html文件下。
二、编写html结构
对于中小型项目，可以在app.vue中直接编写html结构。就是直接把整个页面都敲出来，然后再分别抽分成几个功能模块。
但是对于绝大多数项目来说，为了有效地开发。应该是先在原型阶段将网页的需求和功能划分好单元。写一个html框架，然后每次只写其中一部分功能，向html框架中逐步添加。这样一来，一个是每次工程量并不是很大。而且万一出了bug可以及时修改。
本项目比较简单，就先按照第一种写。当然第一步还是要设计原型，这是最重要的一步。
最后成品如图所示。第一步是编写一个静态的html页面。
在app.vue文件里有三对标签。 <template>用于放置html代码，<scirpt>放置js代码，<style>放置CSS代码。
html内容完成后的效果，再添加css内容
最后的结果，这一步只是简单的使用css做了一个静态的网页。
下一步则是拆分功能模块以及写JS部分。
如果使用原生JS的话，将会浪费很多时间在操作DOM元素上，但是使用VUE框架就不用直接操作DOM元素了。具体的请见下一章。
此时App.vue的源码如下
<template>
<div class="container">
<div class="input-add">
<input ty
PE="text" name="todo"/>
<button>
<i class="plus"></i>
</button>
</div>
<span class="filter active">全部</span>
<span class="filter ">未完成</span>
<span class="filter ">已完成</span>
</div>
<div class="todo-list">
<label>
<input type="checkbox"/>
todo1
<span class="check-button"></span>
</label>
</div>
</div>
</div>
</main>
</template>
<script>
name: 'App',
};
</script>
<style>
* {
padding: 0;
font-f
amily: Arial, Helvetica, sans-serif;
}
main {
width: 100vw;
justify-items: center;
}
.container {
width: 60%;
max-width: 480px;
box-shadow: 0 0 24 rgba(0,0,0,.1);
border-radius: 24px;
padding: 48px 24px;
background-color:#66c
CFf;
}
h1{
color:black;
}
.input-add {
position: relative;
display: flex;
align-items: center;
}
.input-add input{
padding: 16px 52px 16px 18px;
border-radius: 48px;
border:none;
outline: none;
box-shadow: 0 0 24px rgba(0,0,0,.1);
width: 100%;
font-size: 16px;
color: black;
}
.input-add button {
width: 48px;
height: 48px;
border-radius: 50%;
background:linear-gra
dient(#7ed6
DF,#22a6b3);
border:none;
outline: none;
color:white;
position: absolute;
right: 0;
cursor: pointer;
}
.input-add .plus {
display: flex;
width: 100%;
height: 100%;
background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
background-position: center;
background-repeat:no-repeat;
}
.filters {
display: flex;
margin:24px 2px;
color: #c0c2ce;
font-size: 14px;
}
.filters .filter {
margin:14px;
transition: 0.4s;
}
.filters .filter.active {
color:black;
transform: scale(1.2);
}
.todo-list{
display: grid;
row-gap: 14px;
}
.todo-item{
background-color: #fff;
padding: 16px;
border-radius: 8px;
color:#626262;
}
.todo-item label{
position:relative;
display: flex;
align-items: center;
}
.todo-item label span.check-button{
position:absolute;
top:0;
}
.todo-item label span.check-button
::before,
.todo-item label span.check-button:
:after {
content: "";
display: block;
position:absolute;
width: 18px;
height: 18px;
border-radius: 50%;
}
.todo-item label span.check-button::before{
border: 1px solid #e056fd;
}
.todo-item label span.check-button::after {
transition:.4s;
background-color: #e056fd;
transform: translate(1px,1px) scale(0.8);
opacity: 0;
}
.todo-item input {
margin-right: 16px;
opacity:0;
}
.todo-item input:checked + span.check-button::after{
opacity: 1;
}
</style>
脚本宝典总结
以上是脚本宝典为你收集整理的vue/cli实现简单待办事项页面全部内容，希望文章能够帮你解决vue/cli实现简单待办事项页面所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。