Vue的工程创建

一、环境准备

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成了一个工程化的Vue项目。

功能：

统一的目录结构

本地调试

热部署

单元测试

集成打包

依赖环境：NodeJS

Vue3要求的最低NodeJS的版本为16

配置npm的全局安装路径

以管理员的身份运行命令行cmd，在命令行中执行：

npm config set prefix "D:\develop\NodeJS"（自己安装NodeJS的目录）

更换安装包的源

设置

npm config set registry http:/registry.npm.taobao.org/

检查

npm config get registry

npm:Node Package Manager,是NodeJS的软件包管理器。

二、Vue项目创建和启动

Vue项目-创建

cmd里面

创建一个工程化的Vue项目，执行命令：npm init vue@latest

Project name:---------------------->项目名称，默认值：vue-project，可输入想要的项目名称。

Add TypeScript?------------------->是否加入TypeScript组件？默认值：No。

Add JSX Support？--------------->是否加入JSX支持？默认值：No

Add Vue Router...------------------>是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。

Add Pinia...-------------------------->是否添加Pinia组件来进行状态管理？默认值：No。

Add Vitest...------------------------->是否添加Vites来进行单元测试？默认值：No。

Add an End-to-End...------------->是否添加端到端测试？默认值No。

Add ESLint for code quality?--->是否添加ESLint来进行代码质量检查？默认值：No。

Vue项目-安装依赖

cd vue-project 项目名称（在你创建Vue文件的文件夹里面输入cmd，开始运行后面的命令）

进入项目目录，执行命令安装当前项目的依赖：npm install

用命令行打开项目

code .

Vue项目-目录结构

>.vscode

>node_modules（下载的第三方包存放目录）

>public（公共资源）

>src（源代码存放目录，以后写代码的文件夹）

        >assets（静态资源目录，存放图片、字体等）

        >component（组件目录，存放通用组件）

        APP.Vue（根组件）

        main.js（入口文件）

.gitignore

<>index.html（默认首页）

{}package-lock.json（项目配置文件，不需要修改）

{}package.json（项目配置文件，包括项目名、版本号、依赖包、版本等）

!README.md

vite.config.js（Vue项目的配置信息，如：端口号等）

Vue项目-启动

执行命令：

npm run dev,就可以启动vue项目了

访问地址：localhost:5173（默认）

启动正常：出现Vue的页面。