vue框架初识

一：创建vue.js模板项目的步骤

1. 安装Node.js
2. 安装npm命令
3. 安装vue.js脚手架（常见脚手架：vue-cil和vite，在此学习vite)
4. 安装vue.js模板项目
5. 安装vue.js项目的依赖文件
6. 使用npm run dev 命令开发环境，使Vue.js项目运行起来
7. 使用npm run build 命令发布项目的部署文件

补充：vite创建vue项目

1. 新建文件夹，点击文件路径，输入cmd打开命令行
   
   
   
    
2. 输入npm init vite(确保已经提前安装了node.js)回车
   
3. 取项目名字
   
4. 选择vue框架，回车
   
5. 选择javascript
   
6. 按照提示，cd vue3-project进入文件，安装依赖npm install
   
7. 启动服务器npm run dev
   
   注意：在启动服务器的时候常会见到两种命令  npm run dev 和 npm run serve 
   A. 如果使用 Vue CLI 创建了项目，通常在 package.json 中的 scripts 部分会定义以下命令：

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   }

   在这种情况下，应使用 npm run serve 来启动开发服务器。serve 是 Vue CLI 默认的启动命令。
   
   B. 如果使用 Vite 创建了项目，package.json 中的 scripts 部分可能会定义类似于以下的命令：

   json
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   }

   在这种情况下，使用 npm run dev 启动开发服务器。dev 是 Vite 默认的启动命令。
8. 赋值URL到导航栏打开
   
9. 得到页面
   

二.vue项目模板结构中几个常用部分结构的作用：

1. vite.config.js：
   
   作用：配置 Vite 的行为和功能，例如插件、别名、构建选项等。Vite 是一个构建工具， 用于开发和打包 Vue 项目。

          位置：位于根目录，因为它是整个项目的构建工具配置，影响整个项目的构建和开发过程。
 

  2.package.json ：

是Vue 项目模板中的核心配置文件，用于管理项目的依赖、脚本、版本信息 以及其他元数据。具体作用包括：

• 依赖管理：列出项目的所有依赖和开发依赖，确保项目可以在不同环境中一致地安装和运行。

• 脚本定义：定义可以通过 npm run 或 yarn run 执行的脚本，例如启动开发服务器、构建项目或运行测试。

• 项目元数据：包含项目的名称、版本、作者等信息，这些信息有助于识别和管理项目。

• 配置设置：可能包括配置字段（如 Babel、ESLint）的设定，支持与工具和库的集成

3.src/components

文件夹在 Vue 项目中用于存放可重用的 Vue 组件。这些组件是构建应用界面的基本单位，通常包含模板、样式和逻辑。组件可以在不同的页面或其他组件中复用，从而提高代码的模块化和重用性，简化开发和维护过程。

4.src/router文件夹下文件

• router/：存放路由配置文件，通常包括 index.js 或 index.ts 等文件，用于定义应用的路由规则。
• App.vue：根组件文件，通常包括 <template>, <script>, 和 <style> 部分。
• main.js 或 main.ts：项目的入口文件，通常在这里创建 Vue 实例并挂载到 DOM 中。
   

5.views文件夹作用：

views/：存放视图组件，通常对应不同的路由页面。
 

6.node_modules文件夹作用

node_modules 文件夹中存放了通过 npm 或 yarn 安装的所有依赖包。项目中声明的所有依赖（包括 Vue 及其插件、库、工具等）都会被下载到这个文件夹中。依赖包的版本和内容都是从 package.json 文件中的 dependencies 和 devDependencies 字段中获取的。

. 项目的模块化

每个安装的包和模块都会在 node_modules 文件夹中以自己的子文件夹形式存在，这样可以确保项目中需要的每个包和模块都能独立管理，避免版本冲突和依赖问题。

. 缓存管理

node_modules 文件夹中的包和模块是由 npm 或 yarn 进行管理和更新的。它提供了一个本地缓存机制，使得依赖的安装、更新和卸载操作可以更高效。

. 支持本地开发

在开发过程中，node_modules 文件夹为项目提供了所需的所有工具和库。例如，Webpack、Babel、ESLint 等开发工具以及它们的插件和配置，都会被安装到这个文件夹中。

. 避免版本冲突

不同的项目可能需要不同版本的依赖包。node_modules 文件夹的存在使得每个项目都有自己独立的依赖环境，避免了全局依赖版本冲突的问题。

 三.vue 文件结构

src/component文件下存放的都是组件文件

以下是vue.js组件的标准结构，尽量不要改变。

<template>
  
</template>


<script>

</script>


<style>

</style>

1.注意：template节点中的根节点只能有一个标签

<template>
  <div></div>
</template>

//或者

<template>
  <h1></h1>
</template>


//但是如果写成以下就会报错
<template>
  <div>
    <h1></h1>
  </div>
</template>

2.vue3中script标签会有提示 写为<script setup>。

• import { ref, onMounted } from 'vue': 从 Vue 中导入 ref 和 onMounted 函数。

  • ref 用于创建响应式状态。
  • onMounted 是一个生命周期钩子，在组件挂载到 DOM 上后执行。
• const count = ref(0): 使用 ref 创建一个响应式变量 count，初始值为 0。ref 是 Vue 中的一个响应式引用，用于跟踪和响应变量的变化

• function increment() { count.value++ }: 定义了一个 increment 函数，用于增加 count 的值。当按钮被点击时，这个函数会被调用，从而更新 count。

• onMounted 钩子函数会在组件挂载完成后执行。在这里，它用于在组件挂载时输出 count 的初始值到控制台。
• <button @click="increment">Count is: {{ count }}</button>: 这是组件的模板部分，定义了一个按钮。当按钮被点击时，会调用 increment 函数。按钮上显示的内容是 count 的当前值，{{ count }} 是 Vue 的插值语法，用于显示 count 的值。

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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

3.css样式表比较灵活，可以用scss,sass,less,stylus类型的样式表。注意：scoped一定要加入，否则组件样式就会影响到全局样式

<style lang="scss" scoped>
</style>

四：安装组件库

安装ElementUI组件库：Element 是一个基于 Vue.js 的组件库，提供了一套丰富的 UI 组件，旨在帮助开发者快速构建美观且一致的用户界面。它包括按钮、表单、对话框、通知等常用组件，并提供了多种主题和配置选项，以适应不同的应用需求。这个库特别适合用于构建后台管理系统

在命令行输入以下命令

npm install element-plus --save

在 npm 中，--save 标志用于将安装的包添加到项目的 package.json 文件中的 dependencies 部分。这样做的好处是，当其他人（或者你自己在其他机器上）运行 npm install 时，这些依赖会被自动安装。

不过，从 npm 版本 5.0.0 开始，--save 标志已成为默认行为。因此，安装依赖时无需显式指定 --save，因为依赖会自动被添加到 package.json 文件中。如果你使用的是较新的 npm 版本，--save 标志可以省略。

注意：element-ui支持的是 vue2，element-plus支持的是 vue3

五.单文件组件：

在大多数启用了构建工具的 Vue 项目中，使用一种类似 HTML 的文件格式编写 Vue 组件，称为单文件组件（也称为文件，缩写为 SFC）。Vue SFC，顾名思义，将组件的逻辑 （JavaScript）、模板 （HTML） 和样式 （CSS） 封装在一个文件中。下面是前面的示例，以 SFC 格式编写：*.vue。（例如，vue项目模板中components文件夹下的HelloWorld.vue文件）

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

六.API样式

Vue 组件可以用两种不同的 API 样式编写：Options API 和 Composition API，分别对应vue2和vue3，在此主要使用Composition API

当使用Composition API编写时，代码中会有提示，例如 

<script setup> </script>  

如果是Options API则不会有setup

七.创建vue应用实例

每个vue应用程序都从1使用createApp函数创建一个新的应用程序实例开始

import {createApp} from 'vue'
const app = createApp ({
/*根组件*/

})

要传入的对象实际是一个组件，每个应用都需要一个"根组件"，该组件可包含其他组件作为其子组件createApp

若使用的是单文件组件，通常会从另一个文件导入根组件

import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)

挂载应用程序

<div id="app"></div>

app.mount('#app')