本博客内容基于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>