前端-Vue的项目流程

环境准备

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

而要想使用create-vue来创建vue项目，则必须安装依赖环境：NodeJS（和Java的依赖概念一样）

NodeJS

在官网找到所需安装版本，安装在没有中文，没有空格 的目录下，NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v。

使用 管理员身份 运行命令行，在命令行中，执行如下指令来配置全局路径

npm config set prefix "D:\develop\NodeJS"

切换为淘宝镜像，加速下载

npm config set registry https://registry.npmmirror.com

在开发前端的项目中，可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了。

创建Vue项目

使用npm create vue@版本 来创建Vue项目（vue@latest就是创建vue最新版）。

例如：

l

 利用VsCode来打开它。

项目的启动

方式一：在命令行中执行命令npm run dev来启动Vue项目

方式二：在VsCode中启动

            步骤1：首先下载依赖  npm  run  dev

            步骤2：

            步骤3： 看到这个界面即可成功

项目的结构

1.整个项目只有一个以html结尾的文件

2.package.json记录了用了哪些依赖（依赖版本的最低要求），最终的依赖都会记录在package-lock.json里面（类似于Java的pom文件，项目迁移也是以他为主），下载的依赖都会在node_modules里面（类似于Java的maven仓库，前端项目迁移的时候不会考虑这个文件，这个文件太大了，项目迁移到手后需要用npm  install来下载所需依赖，也就是这个文件）

3.vite.config.js记录了vue的配置信息，如端口号等

4.README.md是说明文档，让别人可以快速上手

5.public文件一般存放图片，logo等

6.src文件存放目录（以后写代码的文件）

项目的访问流程

1.启动项目时访问index.html文件

2.根据路径来到main.js文件

3.最后的落脚点在App.vue来修改界面

API风格

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

• 组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。代码形式如下：

<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"> Api Demo1 Count : {{ count }}
</template>

<style scoped>
   
</style>

• 选项式API

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

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

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

<style scoped>

</style>