本文主要是介绍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>
<main>
<div class="container">
<h1>欢迎使用待办事项</h1>
<div class="input-add">
<input type="text" name="todo"/>
<button>
<i class="plus"></i>
</button>
</div>
<div class="filters">
<span class="filter active">全部</span>
<span class="filter ">未完成</span>
<span class="filter ">已完成</span>
</div>
<div class="todo-list">
<div class="todo-item">
<label>
<input type="checkbox"/>
todo1
<span class="check-button"></span>
</label>
</div>
</div>
</div>
</main>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
main {
width: 100vw;
min-height: 100vh;
display: grid;
align-items: center;
justify-items: center;
background-color: #fff;
}
.container {
width: 60%;
max-width: 480px;
box-shadow: 0 0 24 rgba(0,0,0,.1);
border-radius: 24px;
padding: 48px 24px;
background-color:#66ccff;
}
h1{
margin: 24px 0;
font-size: 28px;
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-gradient(#7ed6df,#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-size: 50% 2px, 2px 50%;
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实现简单待办事项页面的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!