Vue入门，手把手教你如何快速上手（新手必看，代码分析）

l7_804829222

已于 2024-07-28 16:23:36 修改

阅读量1.2k

点赞数 10

文章标签： vue.js javascript 前端前端框架

于 2024-07-28 16:17:13 首次发布

本文链接：https://blog.csdn.net/l7_804829222/article/details/140749845

版权

vue.js三种方式安装（本文只介绍 NPM方法）

二、选项式API(可以理解为VUE2版本的风格）

三、组合式API(可以理解为VUE3版本的风格）

前言

一、Vue是什么

渐进式JavaScript框架，简单易学，性能出色，适用场景丰富的Web前端框架。

二、为什么要学习Vue

（1）体积小：压缩后只有33k

（2）更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并进行优化的一项技术，因为这种DOM操作归类为预处理操作，所以称为虚拟DOM

（3）双向数据绑定

（4）学习的成本相对比较低，因为市场上拥有了大量成熟的Vue框架以及组件。

三、渐进式框架

Vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求，但Web世界是十分多样化的，不同的开发者在Web上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue的设计非常注重灵活性和”可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用Vue：

无需构建步骤，渐进式增强静态的HTML在任何页面中作为WebComponents嵌入
单页应用（SPA)
全栈/服务端渲染(SSR)
Jamstack/静态站点生成(SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

vue.js三种方式安装（本文只介绍 NPM方法）

一、准备工作

node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像

二、安装node.js

本文中有详细介绍：

VSCode创建Vue项目，以及vue脚手架搭建_vscode搭建vue脚手架-CSDN博客

三、安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后等待，没报错表示安装成功，如下图：

四、安装vue-cli2 脚手架构建工具

1.必须在全局中进行安装

2.在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。检查是否安装成功：vue -V。

创建Vue项目

一、全局安装@vue/cli

命令输入：使用管理员权限运行此命令，之后使用vue --version检查是否安装成功，如果输出版本号即为安装成功

npm install -g @vue/cli

二、创建vue项目

1.在你想要创建vue项目的目录使用管理员权限打开命令行界面，执行命令：

vue create vue_test

或者输入以下指令：

npm init vue@latest

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

根据自行需求选择：

注意：创建名字的时候不要出现大写。

最后，启动vue项目。

执行命令：(在创建的项目路径下执行)

npm run serve

默认为8080端口，我们直接打开浏览器输入显示的网址：http://localhost:8080/，项目启动成功。

Vue API 风格

Vue的组件可以按照两种不同的风格书写：选项式API和组合式API

一、API是什么

API是应用程序编程接口（Application Programming Interface）的缩写。

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。API定义了软件系统不同组成部分衔接的约定，它作为桥梁，使得不同软件组件之间可以进行信息交互。通过API，开发者可以调用已有的功能和服务，而不需要了解其内部实现细节。这极大地简化了软件开发过程，提高了开发效率。

二、选项式API(可以理解为VUE2版本的风格）

概念：使用选项式 API，我们可以用包含多个选项的对象来描述组件的退辑，例如data、methods和mounted。选项所定义的属性都会紧露在函数内部的this上，它会指向当前的组件实例

<script>
    export default {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            increment() {
                this.count++
            }
        },
        mounted() {
            console.log(The initial count is S{ this.count }. ）
    }
    }
</script>
<template>
    <button @click="increment">Count is:{{ count }} </button>
</template>

三、组合式API(可以理解为VUE3版本的风格）

通过组合式 API，我们可以使用导入的 API函数来措述组件逻辑。

<script setyp>
    import { ref, onMounted } from 'vue'
    const count = ref(0)
    function increment() {
        count.value++
    }
    onMounted(() => {
        console.logL(The initial count is ${ count.value })
    })
</script>
<template>
    <button @click="increment">Count is: {{ count }}</button>
    </template>

选项式API和组合式API实现的代码功能相同，但是书写时的代码写法却完全不一样，在生产项目中：
1.当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用Vue，例如渐进增强的应用场景，推荐采用选项式 API
2.当你打算用Vue构建完整的单页应用，推荐采用组合式API+单文件组件