Vue项目创建及配置

一、Vue概述

        Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM（Model-View-ViewModel）的架构模式。

MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。它包括三个部分：

• Model（模型）：表示应用程序的数据和业务逻辑。在Vue中，模型通常是一个JavaScript对象。
• View（视图）：表示用户界面。在Vue中，视图通常是使用HTML模板构建的。
• ViewModel（视图模型）：充当模型和视图之间的中间层。它通过数据绑定机制将模型数据自动更新到视图上，并将用户交互事件传递给模型。在Vue中，ViewModel是由Vue实例扮演的。

        Vue的核心思想是通过数据驱动视图，使得界面的渲染和更新更加简单高效。当模型数据发生变化时，Vue能够自动更新对应的视图。同时，用户在视图上的操作也能够通过ViewModel传递给模型进行处理。         

二、安装

安装配置nodejs

NPM的全称是Node Package Manager

        中文名为Node.js包管理器，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。使用NPM可以方便地从一个全球的代码库中获取并安装Node.js模块，这些模块可以用于构建应用程序、工具和包等。开发者可以通过NPM来搜索、安装、更新和卸载各种Node.js模块。此外，NPM还提供了发布和共享代码、管理依赖、版本控制等功能，可以帮助开发者更方便地开发和分享代码。

 1、安装参考

nodejs安装配置参考

 2、设置环境变量

        在系统变量path中添加nodejs的安装路径

 ​

3、管理员身份运行cmd 

node -v 查看node的版本
npm -v 查看npm的版本（新版的node安装自带安装npm）

设置镜像源：

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

 三、创建Vue3项目

这里使用vite直接创建

1、使用npm直接初始化

npm create vite@latest

 这里可能需要使用管理员身份并跳转盘符到需要创建vue项目的指定位置

2、选择项目模板Vue

 3、选择语言结构 JavaScript

四、配置项目

1、打开项目并添加依赖包

以管理员身份运行 VS Code 打开刚刚创建的项目文件夹 easyvuea，

使用 Ctrl键+波浪线~ 打开终端并输入命令，安装依赖包

2、启动项目

npm run dev

 3、项目结构

 4、安装Vue扩展

5、vite.config.js 可以配置项目启动自动打开项目首页 

ctrl+~打开终端管理器 输入npm