ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue/cli实现简单待办事项页面

2021-09-20 06:33:44  阅读:184  来源: 互联网

标签:vue cli color 待办 item html background todo


本博客内容基于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,color,待办,item,html,background,todo
来源: https://www.cnblogs.com/lin-green/p/15313491.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有