Vue工程化开发

一、create-vue

1.1、概述

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

1.2、提供的功能 

（1）、统一的目录结构；

（2）、本地调试；

（3）、热部署；

（4）、单元测试；

（5）、集成打包；

1.3、依赖环境 

NodeJS。

注意事项：Vue3要求NodeJS的最低版本为Node16。

二、安装NodeJS 

说明：本次以Node 18.18.0进行安装演示。

2.1、下载安装包 

# 官网
https://nodejs.org/en/download
# 我分享的
链接: https://pan.baidu.com/s/1POiSKuBFuFClIPurEwvfKA?pwd=yyds 提取码: yyds 

2.2、安装

（1）鼠标双击下载下来的"node-v18.18.0-x64.msi"；

（2）选择安装目录；

（3）验证安装是否成功；在cmd控制台依次执行如下指令：

node -v

npm -v

（4）配置npm的全局安装路径

第一步：以管理员身份打开cmd控制台；

第二步：执行如下指令：

npm config set prefix "D:\Programs\NodeJS-18.18.0"

（5）更换镜像为淘宝镜像地址

1、默认的镜像地址

npm config get registry

2、设置为淘宝镜像

npm config set registry https://registry.npmmirror.com

三、创建Vue项目

        创建一个工程化的Vue项目，可以通过执行指令：npm init vue@latest

 四、Vue目录说明

vite.config.js：Vue项目的配置信息，如：端口号等
package.json：项目配置文件，包括项目名、版本号、依赖包、版本等。类似于maven的pom文件
package-lock.json：项目配置文件（不需要修改）
index.html：默认首页
src：核心目录，源代码存放目录（以后写代码的文件夹）
    assets：静态资源目录，存放图片、字体...
    components：组件目录，存放通用组件
    App.vue：根组件
    main.js：入口文件
public：公共资源
node_modules：下载的第三方包存放目录

五、idea配置图形化界面启动