Vue快速上手：一、Vue介绍这个专栏系列是对有点前端基础但不多的同时需要快速上手Vue做项目的人群。如果是HTML+C

前言

这个专栏系列是对有点前端基础但不多的同时需要快速上手Vue做项目的人群。如果是HTML+CSS+JavaScript基础比较扎实的人群推荐去阅读Vue官网文档。

学习Vue是需要一定的HTML+CSS+JavaScript的入门基础，刚开始不用很深的基础知识，可以后续一边学习和使用Vue的同时加深自己的前端基础。

准备工作

1、安装Node环境

1、在官网 (nodejs.org/en) 根据自己电脑系统下载对应的安装包安装

2、打开终端命令行工具运行命令: node -v (非windows系统可能需要配置全局环境变量才行)，能正常打印出版本号即安装成功。

3、在终端命令工具运行命令：npm -v，能正常打印出版本号即node的npm包管理器也安装正常。

微信截图_20240905155351.png

2、开发工具的使用

浏览器开发者工具

前端的代码都最是在浏览器运行的，所以我们调试过程基本也都是和浏览器打交道。各大浏览器的使用开发者工具的快捷键基本都最为F12，或右击页面在右键菜单的选择“检查”。当然也可以从浏览器的菜单中去启动，可自行百度了解并学习，也可以在这个文章中学习并了解怎么使用。 blog.csdn.net/qq_16445077…

浏览器Vue插件(可跳过)

浏览器Vue插件在Vue开发中非常好用，但是chrome浏览器想要安装得科学上网才行，可以在Firefox、Edge浏览器直接在扩展插件搜索的地方搜索并安装即可，安装后可在开发者工具中使用。以下为Edge浏览中为例：

微信截图_20240906120131.png

代码编辑器

前端代码编辑器主流的有：Visual Studio Code、Webstorm、Hbuildx、Vim/Nvim等。本人推荐Visual Studio Code，Webstorm虽然是神器但收费，Hbuildx编辑器uniapp开发用得多，Vim/Nvim虽然用着很炫酷但是学习成本太高。

Vue的使用方式

经过了前期的准备后，就开始使用Vue了。

使用script标签引入使用Vue

在HTML页面中直接将下载好的Vue文件引入到文件中或者引用CDN资源库的文件也可，如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue Demo</title>
    <script src="vue.global.js"></script>  <!--使用script标签引入Vue3文件-->
</head>
<body>
    <div id="app">{{ message }}</div>

    <script>
        const { ref, createApp } = Vue; // 引入Vue3相关的方法

        // 创建Vue3实例
        createApp({
            setup() {
                const message = ref('Hello vue!')
                return {
                    message
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

使用script标签引入这种方式使用Vue，虽然简单但是如果项目比较大比较复杂，需要自己手动工程化项目时，比较繁琐费时。

使用Vue脚手架使用Vue

使用终端命令工具定位到需要创建项目的位置，使用命令：npm create vue@latest，然后根据指引一步步创建一个工程化的Vue项目。如下图：

微信截图_20240907124548.png

在上图中，输入 npm create vue@latest 命令后就会有提示指引怎么操作，新手刚开始学习Vue的时候可从开始输入项目名称后，可以全部选否，等学到路由、全局状态管理的时候就可以在Vue Router和Pinia那里选是，至于其它的就看自己后续的学习扩展了。

注意：刚开始学习的这些选项都选否，便于一步步去学习, 不然搭出来的项目结构会比较复杂不利练手。

当项目创建完成后，命令提示行会有如下提示：

微信截图_20240907125329.png

上图中有三行命令提示， cd vue-demo 这条命令是要我在命令行中定位到刚刚创建的项目目录中; npm install 这条命令是在项目中安装Vue项目中所用的npm包依赖，不然项目无法运行; npm run dev这条命令是运行Vue项目，然后提示项目的运行地址，可以直接在浏览器打开这个地址就可以看到Vue项目的运行页面了。同时项目中Vue代码如果有任何改动浏览器也会自动更新显示到页面。