vue3简介与快速使用_vue3非工程化开发组件-优快云博客

简介

Vue.js 3 是一种流行的 JavaScript 框架，用于构建用户界面和单页面应用程序。
声明式渲染：Vue基于标准HTML扩展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和js之间的关系
响应性：Vue会自动跟踪js状态并在其发生变化时响应式更新DOM

非工程化的vue使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Non-CLI Example</title>
    <!-- 引入Vue 3的CDN链接 -->
    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里使用Vue的双大括号语法插入数据 -->
        <p>{{ message }}</p>
        <!-- 在这里添加一个按钮，点击后修改message -->
        <button @click="changeMessage">Change Message</button>
    </div>

    <script>
        // 创建一个Vue实例
        const { createApp, ref } = Vue;
        const app = createApp({
            setup() {
                // 使用ref()定义响应式数据
                const message = ref("Hello, Vue 3!");

                // 定义一个方法，在点击按钮时调用以改变message
                function changeMessage() {
                    message.value = 'Vue 3 is awesome!';
                }

                // 在return中返回变量/方法，与HTML元素关联
                return {
                    message,
                    changeMessage
                };
            }
        });

        // 将Vue实例挂载到页面上
        app.mount('#app');
    </script>
</body>
</html>

使用Vite实现工程化

构建步骤

步骤 1: 创建一个 Vue 3 项目
首先，确保你已经安装了 Node.js（推荐使用 LTS 版本）。然后，使用 Vue CLI 创建一个新的 Vue 3 项目：

第一次使用会提示下载vite，输入y再回车即可
选择 vue js选项即可

npm create vite@latest

步骤 2: 安装依赖
进入项目目录后，安装项目所需的依赖：

npm install

步骤 3: 运行项目
运行开发服务器，以便在本地预览项目：

npm run dev

步骤 4: 构建项目
要构建生产环境的项目版本，运行：

npm run build

步骤 5: 自定义配置
Vite 提供了一些默认配置，但如果需要自定义配置，可以在项目根目录创建一个 vite.config.js 文件，并按需配置，比如修改端口、代理等。

步骤 6: 添加插件
Vite 支持插件系统，你可以根据需要添加各种插件来扩展项目功能。

步骤 7: 部署项目
部署项目时，将构建后的文件部署到服务器上，确保服务器支持 SPA 路由模式。

vite+vue3项目的目录结构

my-vue3-project/
│
├── public/
│   ├── index.html
│   └── ...
│
├── src/
│   ├── assets/
│   │   ├── logo.png
│   │   └── ...
│   │
│   ├── components/
│   │   ├── Button.vue
│   │   └── ...
│   │
│   ├── views/
│   │   ├── Home.vue
│   │   └── ...
│   │
│   ├── router/
│   │   ├── index.js
│   │   └── ...
│   │
│   ├── store/
│   │   ├── index.js
│   │   └── ...
│   │
│   ├── App.vue
│   └── main.js
│
├── .gitignore
├── babel.config.js
├── package.json
└── ...

这是一个简单的 Vue 3 项目目录结构示例，其中包含了一些常见的文件和文件夹：

public/：包含了静态资源，公共资源，比如 index.html 文件和其他不需要经过构建处理的文件。
src/：主要的源代码目录，包括了js、css、vue组件、图像、字体等资源，开发过程中这些文件会被vite实时编译和处理，并再浏览器中实行实时预览和调试。
assets/：存放项目中使用的静态资源文件，比如图片、样式表等。
components/：存放 Vue 组件。
views/：存放页面级别的 Vue 组件。
router/：存放 Vue Router 相关的配置文件。
store/：存放 Vuex 相关的配置文件。
App.vue：根组件，整个应用的入口。
main.js：应用的入口文件，初始化 Vue 用实例等。
其他配置文件和常用文件，比如 .gitignore、babel.config.js、package.json 等。

单文件组件

单文件组件（Single File Component）是一种在Vue.js框架中使用的组件化开发方式。在单文件组件中，一个组件的模板、样式和逻辑都被封装在一个文件中，通常以.vue为扩展名。

一个典型的Vue单文件组件包含三个部分：

模板（Template）：组件的结构和布局，通常使用Vue的模板语法编写。
脚本（Script）：组件的行为和逻辑，通常是JavaScript代码，可以包含组件的数据、方法等。
样式（Style）：组件的样式，通常是CSS或预处理器（如Sass、Less）编写的样式。
使用单文件组件的好处包括：

结构清晰：将模板、样式和逻辑分离，使代码更易于维护和理解。
可复用性：组件化开发使得组件可以被轻松地复用。
更好的开发体验：通过Vue的单文件组件开发，可以使用Vue提供的特性，如组件化、指令等，提高开发效率。
在一个典型的Vue单文件组件中，可以像下面这样组织代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    increment() {
      this.message += '!';
    }
  }
};
</script>

<style>
h1 {
  color: blue;
}
</style>