一、 Vue工程化简介

Vue是一款用于构建用户界面的渐进式JavaScript框架 。（官方：https://cn.vuejs.org/）

我们已经学习了Vue的基本语法、表达式、指令，并基于Vue的核心包，完成了Vue的案例 。 那今天呢，我们要来实现基于Vue进行整站开发。

1.1 Vue工程化介绍

我们学习了HTML、CSS、JS、Axios、Vue等技术，并可以完成一些前端开发的案例 。我们目前的前端开发中，当我们需要使用一些资源时，例如：vue.js，和axios.js文件，都是直接再工程中导入的。

但是上述开发模式存在如下问题：

• 不规范：每次开发都是从零开始，比较麻烦
• 难复用：多个页面中的组件共用性不好
• 难维护：js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

• 模块化：将js和css等，做成一个个可复用模块
• 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
• 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
• 自动化：项目的构建，测试，部署全部都是自动完成

所以对于前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率，降低开发难度等等。接下来我们就使用vue的官方提供的脚手架帮我们完成前端的工程化。

二、 环境准备

2.1 create-vue介绍

create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

• create-vue提供了如下功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

2.2 依赖环境

依赖环境：NodeJS

2.3 npm介绍

• npm：Node Package Manager，是NodeJS的软件包管理器。

  

三、 创建Vue项目

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

  详细步骤说明：

  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。

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

• 2. 项目创建完成以后，进入vue-project1项目目录，执行命令安装当前项目的依赖：npm install

  

  创建项目以及安装依赖的过程，都是需要联网的。【如果网络不太好，可能会造成依赖下载不完整报错，继续再次执行 命令安装。】

• 3.Vue项目-目录结构

• 4.启动项目，执行命令：npm run dev

• 5.浏览器中可以直接访问，地址：http://127.0.0.1:5173

四、 Vue项目开发流程

如下图：

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

五 、API风格

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

5.1 组合式API

  <script setup>
  import { ref, onMounted } from 'vue';
  const count = ref(0); //声明响应式变量
  
  function increment(){ //声明函数
     count.value++;
  }
  
  onMounted(() => { //声明钩子函数
    console.log('Vue Mounted....'); 
  })
  </script>
  
  <template>
     <input type="button" @click="increment" value="Api Demo1 Count : ">{{ count }}
  </template>
  
  <style scoped>
     
  </style>

• setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。

• ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。

• onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

5.2 选项式API

<script>
export default{
   data() {
      return {
         count: 0
      }
   },
   methods: {
      increment: function(){
         this.count++
      }
   },
   mounted() {
      console.log('vue mounted.....');
   }
}
</script>

<template>
  <input type="button" @click="increment" value="Api Demo1 Count : "> {{ count }}
</template>

<style scoped>

</style>

​

选项式API，可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。