Vue项目工程化创建和启动

一.Vue项目创建和启动

1.创建一个工程化的Vue项目

执行命令：npm init vue@latest

---

2.Vue项目安装依赖

执行命令：npm install

---

3.vue项目—目录结构

---

4.启动项目

1.执行命令：npm run dev

2.通过VS code NPM脚本启动

---

二、Vue项目开发流程

App.vue:

---

三.Api风格

组合式api

选项式api

组合式Api

前端工程化案例代码：

<script setup>
    //导入axios npm install axios
    import axios from 'axios';
    import {ref} from 'vue'
    //定义响应式数据 ref
    const articleList = ref([]);
?    //发送异步请求，获取所有文章数据
?    axios.get('http://localhost:8080/article/getAll')
?    .then(result=>{
?      //把服务器相应的数据保存起来
?      articleList.value = result.data;
?    }).catch(err=>{
?      console.log(err)
?    })
        //定义响应式数据 searchConditions
?    const searchConditions = ref({
?        category:'',
?        state:''
?    })
?    //声明search函数
?    const search = function(){
?        //发送请求，完成搜索
?        axios.get('http://localhost:8080/article/search',{params:{...searchConditions.value}})
?        .then(result=>{
?            articleList.value=result.data
?        })
?        .catch(err=>{
?            console.log(err)
?        })
?    }
</script>

<template>
  <div>
            文章分类：<input type="text" v-model="searchConditions.category"/>
            发布状态：<input type="text" v-model="searchConditions.state"/>
            <button @click="search">搜索</button>
            <button v-on:click="clear">重置</button>
            <br/>
            <br/>
            <table border="1 solid" colspa="0" cellspacing="0">
                <tr>
                    <th>文章标题</th>
                    <th>分类</th>
                    <th>发表时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in articleList" :key="index">
                    <td>{{item.title}}</td>
                    <td>{{item.category}}</td>
                    <td>{{item.time}}</td>
                    <td>{{item.state}}</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            </table>
  </div>
</template>
<style >
</style>