工程化Vue使用

环境准备
Vue项目-创建
Vue项目开发流程
API风格
案例

推荐阅读：

VUE-局部使用

环境准备

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。
create-vue提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包
依赖环境：NodeJS

Node.js安装：https://www.cnblogs.com/zhouyu2017/p/6485265.html

Vue项目-创建

创建一个工程化的Vue项目，执行命令：npm init vue@latest

执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具

Project name：------------------》项目名称，默认值：vue-project，可输入想要的项目名称。
Add TypeScript? ----------------》是否加入TypeScript组件？默认值：No。
Add JSX Support? ---------------》是否加入JSX支持？默认值：No。
Add Vue Router ...--------------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
Add Pinia ...-------------------》是否添加Pinia组件来进行状态管理？默认值：No。
Add Vitest ...------------------》是否添加Vitest来进行单元测试？默认值：No。
Add an End-to-End ...-----------》是否添加端到端测试？默认值No。
Add ESLint for code quality? ---》是否添加ESLint来进行代码质量检查？默认值：No。

进入项目目录，执行命令安装当前项目的依赖：npm install

如何解决 npm install 卡在“sill idealTree buildDeps“的问题：https://q.cnblogs.com/q/148802

Vue项目-目录结构

项目启动

执行命令：npm run dev ，就可以启动vue项目了。

Vue项目开发流程

*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里（*.vue） 。

示例代码(更改的App.vue文件)：

<script>

//写数据

  export default{

    data(){

      return{

        msg:'上海'

      }

    }

  }

</script>

<template>

  <!-- html -->

<!-- <h1>北京</h1> -->

<h1>{{ msg }}</h1>

</template>

<style scoped>

/* 样式 */

h1{

  color: red;

}

</style>

效果：

另一种写法：

<script setup>

  import { ref } from "vue";

  //调用ref函数，定义响应式数据

  const msg = ref('大连')

</script>

<template>

  <!-- html -->

<h1>{{ msg }}</h1>

</template>

<style scoped>

/* 样式 */

h1{

  color: red;

}

</style>

效果：

API风格

Vue的组件有两种不同的风格：组合式API 和 选项式API

选项式API，可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。

组合式API

setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

示例：

App.vue

<template>

<Apivue></Apivue>

</template>

<script setup>

  //导入Api.vue文件

  import Apivue from'./Api.vue'

</script>

Api.vue

<template>

    <!-- 写html元素 -->

	<button @click="increment">count:{{ count }}</button>

</template>

<script setup>

    import {ref,onMounted} from 'vue'

    //声明响应式数据 ref 响应式对象有一个内部的属性value

    const count = ref(0);//在组合式api中，一般需要吧数据定义为响应式数据

    //声明函数

    function increment(){

        count.value++;

    }

    //声明钩子函数 onMounted

    onMounted(()=>{

        console.log('vue已经挂载完毕了...');

    });

</script>

案例

使用表格展示所有文章的数据, 并完成条件搜索功能

钩子函数mounted中, 获取所有的文章数据
使用v-for指令,把数据渲染到表格上展示
使用v-model指令完成表单数据的双向绑定
使用v-on指令为搜索按钮绑定单击事件

接口调用的js代码一般会封装到.js文件中, 并且以函数的形式暴露给外部

注意：使用 async…await 同步接收网络请求的结果

示例案例的代码地址：

欢迎关注公众号：愚生浅末。