本博客內容基於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>
