1.安裝vue/cli

npm i -g @vue/cli

2. 創(chuàng)建項(xiàng)目目錄

vue create mycode

3. 編寫配置文件（針對指定的IP和post）

touch vue.config.js
vim vue.config.js
const HOST= process.env.HOST;

module.exports = {
    devServer :{
        host: HOST||'0.0.0.0',
        port: 8080,
        disableHostCheck: true,
    }
}

4. 啟動(dòng)命令

cd mycode
npm run serve

5. todolist(vue3版本的簡單demo）

<template>
    <div class="todo-list">
    <div class="header">todolist</div>
    <input type="text" v-model="name" placeholder="請輸入名字">
    &nbsp;&nbsp;
    <input type="text" v-model="sex" placeholder="請輸入性別">
    &nbsp;&nbsp;
    <button @click="add" v-if="index1.index === null">添加</button>
    <button @click="update" v-else>更新</button>
    <button @click="clear">清空數(shù)據(jù)</button>
    <ul>
    <li v-for="(item, index) in list" :key="index">
    <span>姓名： {{item.name}}</span>
    <span>性別： {{item.sex}}</span>
    &nbsp;
    <button @click="del(index)">刪除</button>
    &nbsp;
    <button @click="edit(index)">編輯</button>
    </li>
    </ul>
    </div>
</template>
<script>
import { ref,reactive } from 'vue';
export default {
    name : "todolist",
    setup(){
        let list = ref([]);
        let name = ref("");
        let sex = ref("");
        let index1 = reactive({
            index:null
        });
        const add = ()=>{
            if(!name.value||!sex.value){
                return;
            }
            list.value.push({
                name: name.value,
                sex: sex.value,
            });
            name.value = "";
            sex.value = "";
        };
        const edit = (index)=>{
            let item = list.value[index];
            name.value = item.name;
            sex.value = item.sex;
            index1.index = index;
            console.log(index);
        };
        const update = ()=>{
            if (!name.value||!sex.value){
                return
            }
            list.value[index1.index].name = name.value;
            list.value[index1.index].sex = sex.value;
            sex.value = "";
            name.value = "";
            index1.index = null;
        };
        const del = (index)=>{
            list.value.splice(index, 1)
            index1.index = null;
            name.value = "";
            sex.value = "";
            
        };
        const clear=()=>{
            list.value.length = 0;
        }


        return{
            list,
            name,
            sex,
            index1,
            add,
            edit,
            update,
            del,
            clear,
        }
    }
}
</script>
<style lang="scss" scoped>
  .todo-list {
    width: 600px;
    margin: auto;
    .header {
      height: 60px;
      line-height: 60px;
      background-color: #3e3e3e;
      color: #dddddd;
      font-size: 48px;
      margin-bottom: 20px;
    }
    button {
      display: contents;
      cursor: pointer;
    }
    ul {
      padding: 0;
      li {
        text-align: left;
        height: 30px;
        margin-bottom: 10px;
        background-color: #ffffff;
        line-height: 30px;
        border-left: 5px solid #629a9c;
        border-radius: 5px;
        padding-left: 30px;
        padding-right: 30px;
        color: #ffdfa5;
        .btndiv {
          float: right;
        }
        .btn {
          margin-right: 20px;
          display: contents;
          cursor: pointer;
          text-align: right;
        }
      }
    }
  }

  li {
    list-style: none;
  }
</style>