Vue工程化方法

Vue工程化方法

采用工程化、模块化的模式来管理及构建大型vue项目，有两种Vue工程化项目构建工具：webpack和vite，本课程主要采用最新的Vue官方构建工具Vite。

• 首先，安装node.js最新版；

• 其次，创建一个vue工作目录，如，E:\vscode\web\vue；

• 第三，在工作目录下打开控制台窗口；

• 第四，使用如下命令创建一个vue项目：npm create vue@latest，并按照提示信息填写项目名称以及选择项目相关依赖组件（目前主要选择：Router、Pinia、Vitest、ESLint、Prettier等）
  

• 第五，构建并运行vue项目：

  cd <your-project-name> //进入新创建的项目目录
  npm install  // 安装项目依赖
  npm run format // 项目代码格式化，使其遵循一致的风格和规范。之后，**查看一下生成的项目目录结构！**
  npm run dev  // 启动项目
  

• 第六，打开控制台窗口出现的项目访问地址：Ctrl+click。
  
  

• 第七，工程化的项目结构逻辑解读。
  
  该方式创建的是一个vue项目模板（样板），可以基于此模板进行简单项目的开发。前期，为了方便功能测试，我们暂时采用HTML文档方式，然后根据熟悉程度，逐步转换到Vue工程化的开发模式上——模块化组件开发。

• 项目入口1——index.html，即整个项目的访问都是从index.html开始，其中仅包含如下两个主要内容，App容器和容器模块main.js。
  

• 项目入口2——main.js容器模块，创建Vue应用实例、注册根组件App.vue并将其挂载到App容器中。
  

• 根组件——App.vue
  

• components项目视图依赖组件——项目所依赖的所有功能子组件，一般均放置到项目的components组件目录下，比如，模板项目中的HelloWorld.vue和TheWelcome.vue等。

• assets项目静态资源——项目所依赖的所有静态资源，比如，组件基本样式、图片、静态数据等。

• router路由管理——创建项目时选择了Router时自动创建，主要实现组件页面的导航设置，js或ts源文件。

• states状态管理——创建项目时选择了Pinia时自动创建，主要实现多组件共享状态的管理，js或ts源文件。

• views项目组件视图——项目中所有单文件页面.vue视图。

• node_modules项目依赖库——项目所依赖的所有第三方库，在项目根目录下执行npm install后自动生成，其会根据package.json配置文件中的依赖信息自动下载需要的第三方库到该目录下。

• package.json——项目依赖信息配置

• vite.config.js——项目构建配置

• vitest.config.js——项目测试配置

• dist生产目录——npm run prod命令运行后自动生成项目的生产环境版本。

• index.html——项目启动入口页面

• main.js——项目组件实例入口逻辑