前言

本章内容为VUE前端环境搭建与相关前端技术讨论。

下一篇文章地址：

Vue 3：玩一下web前端技术（二）_Lion King的博客-CSDN博客

一、环境搭建

1. 安装Node.js

Vue是基于Node.js的，因此首先需要安装Node.js。官网地址：Node.js

2. 安装Vue CLI

Vue CLI是一个用于快速构建Vue项目的脚手架工具，可以输入以下命令来全局安装Vue CLI：

npm install -g @vue/cli

3. 创建Vue项目

在命令行工具中，使用以下命令创建一个新的Vue 3项目：

vue create my-project

4. 配置Vue项目

创建项目后，Vue CLI将会询问您关于一些配置选项，直接按下回车键使用默认配置。

5. 启动开发服务器

项目创建完成后，进入项目文件夹：

   cd my-project

   然后使用以下命令启动开发服务器：

 npm run serve

6. 访问开发服务器

根据提示，在浏览器中输入网址即可 ：

7.开发环境

采用VScode进行开发。官网地址：https://code.visualstudio.com/

二、前端相关技术讨论

1、一定要用vue-cli么？

可以不安装，只是要配置工程比较麻烦。如果使用这种集成工具，有好有坏。好的是可以了解配置项，增加技术底蕴；坏的是效率不高，用起来不爽。而本系列文章将是爽文，要爽起来，就各种工具直接使用，必要的时候再去研究也不迟。

实际上，Vue 3已不再推荐使用脚手架，一是服务的启动速度慢，从而导致调试效率不高（项目越大越明显）；二是有更好的替代品，详见Vue相关文档：介绍 — Vue.js。

2、npm与cnpm

npm是Node.js官方提供的软件包管理工具，用于安装、更新和卸载Node.js模块。

cnpm是由淘宝团队开发的一个npm的镜像工具，旨在解决npm在国内下载速度慢的问题。

使用cnpm和npm的方式基本相同，都可以通过命令行工具进行安装、更新和卸载模块。

如果你在国内使用npm下载速度缓慢，可以考虑使用cnpm来代替npm。但是，在一些特殊情况下，可能还是需要使用npm，比如cnpm运行不了的服务，npm能运行。

3、为什么选择Vue

其实都行，一个真正的前端开发不只要会Vue，还要会一些主流的前端框架，而我只是想玩玩，并且相信不同编程语言的编程是想通的，因此才会有系列文章。

4、为什么选择VScode

其实都行，开源免费，使用的人很多，生态不错，有搞头，开发环境选择一种顺手的就好，无需纠结。

5、前端技术都要会哪些？

这可就多了，在日益更新的技术里，简直就是学不过来。html、css、js这些基础总是要会一点的，反正逃不掉，我一般不记这些，用到的时候查一下文档就好，即使记了很快也会忘掉，因为就不是那种专业的前端技术人员。

6、我们该如何学习VUE

VUE官方建议先掌握前端的基本技术再学习，因此可以按照以下步骤进行：

（1）熟悉HTML、CSS和JavaScript：Vue.js是一个基于JavaScript的框架，要学习Vue.js首先需要对这些基础的前端技术有一定的了解。

（2）了解Vue.js的核心概念：Vue.js有一些核心的概念，包括组件、模板、生命周期等。弄清楚这些概念对于理解和使用Vue.js非常重要。

（3）安装Vue.js：你可以通过下载Vue.js的源码，或者直接使用CDN等方式来引入Vue.js。另外，你也可以使用Vue CLI来快速搭建Vue.js项目。

（4）创建一个Vue实例：Vue.js的核心是Vue实例，可以通过创建一个Vue实例来构建你的应用程序。在创建实例时，你需要指定一些选项，例如挂载点、数据等。

（5）学习Vue的指令和模板语法：Vue.js提供了一些指令，用于操作DOM和绑定数据，在学习Vue.js时，掌握这些指令并了解模板语法非常重要。

（6）理解Vue的组件化开发：Vue.js是一个面向组件的框架，通过组件化的开发方式可以使代码更加模块化和可重用。学习如何创建和使用组件是掌握Vue.js的重要一步。

（7）掌握Vue的生命周期：Vue.js的每个组件都有一个生命周期，这些生命周期钩子函数可以在组件不同的阶段执行一些操作。理解和使用生命周期函数对于处理组件的行为和数据非常有用。

（8）学习Vue的状态管理：当应用程序变得复杂时，管理组件之间的状态可能变得困难。Vue.js提供了Vuex作为状态管理工具，学习如何使用Vuex可以更好地管理和共享状态。

（9）练习和项目实践：通过练习和实际项目实践，你可以加深对Vue.js的理解和应用。尝试使用Vue.js构建一些小项目，以巩固你所学的知识。

不过，本系列文章将不会直接涉及HTML、CSS和JavaScript，但会间接涉及，用到的时候我们再说。