Vue.js前端框架项目实战（微课版） 课件 4.1 创建项目

4.1项目初始化前端框架技术与应用FrontendFrameworks项目工程化Vue.js的开发集成方案有两种：脚本直接引入和工程化构建。在前三章中，我们学习了如何使用脚本直接引入的方式开发Vue应用程序，适合快速上手和小型项目。然而，对于复杂的Vue应用程序，仅掌握Vue本身的语法是不够的。前言为了提高开发效率和代码的可维护性，我们需要使用工具和框架来构建和管理项目。这包括：项目初始化：使用VueCLI或Vite等脚手架工具来创建项目，快速搭建项目结构，配置构建工具（如Webpack或Vite）。模块化开发：采用单文件组件（SFC）模式，利用VueRouter管理路由，使用Vuex或Pinia等状态管理库。代码优化：通过代码分割等功能优化性能，使用ESLint等工具保证代码质量，编写测试确保应用正确性。打包与部署：配置构建工具生成可部署的应用程序包，选择合适的部署方式，并设置CI/CD流程实现自动化部署。通过工程化构建，我们可以充分利用Vue生态系统中的工具和最佳实践。在接下来的章节中，我们将深入探讨Vue工程化构建的各个方面，包括项目脚手架、构建工具、模块化开发、代码优化和部署策略等，帮助你高效开发Vue应用程序。前言1包管理工具2脚手架3创建项目4前端UI框架安装目录|CONTENT1包管理工具采用构建项目的方式开发Vue应用程序，我们需要配置必要的环境和安装工具来创建项目，例如配置Node.js环境，安装包管理工具、脚手架及构建工具等。包管理工具用于管理项目中的第三方库和工具，帮助快速安装、升级和卸载依赖，提升开发效率和项目维护性。目前主流的JavaScript包管理工具是NPM和Yarn。包管理工具1包管理工具包管理工具NPMNPM(NodePackageManager)是Node.js默认的包管理工具，广泛用于JavaScript生态系统。它提供丰富的命令行工具，用于高效管理依赖的安装、升级和版本控制。NPM可以管理本地项目依赖和全局安装的工具。通过package.json文件，NPM可以自动安装项目所需的所有模块，并允许开发者指定依赖版本范围，确保模块更新不会破坏项目。NPM的安装NPM是Vue的默认包管理工具，与Vue构建工具深度集成。NPM随Node.js一起安装，安装Node.js后，NPM会自动配置好，无需单独安装。有了NPM后，我们才能创建Vue的项目。1包管理工具NPM的安装打开Node.js的中文官方网站，点击“下载Node.js(LTS)“按钮，即可开始下载安装包，按照默认配置进行安装即可。待安装完成后，同时按win+R键打开运行窗口，输入cmd，点击确定，打开Windows系统的命令行工具命令提示符（CMD）。依次在其中输入命令node-v和npm-v，若返回相应的版本号，说明安装成功。1231包管理工具NPM的常用命令命令作用npm-v通过查看版本，看NPM是否安装成功npm-h查看命令提示npminstall在项目node_modules目录下安装package.json文件中列出的所有依赖npminstall-g<packageName>全局安装指定的依赖包（该依赖可以直接在命令行里使用）npminstall<packageName>在项目中安装指定的依赖包（写入package.json文件中的dependencies节点）npminstall--save-dev<packageName>在项目中安装指定的依赖包（写入package.json文件中的devDependencies节点，仅在开发环境中使用）npmuninstall<packageName>删除项目中指定的依赖包npmlist-g查看所有全局安装的模块npmlistvue查看Vue包及其直接依赖的包名和版本号npminstall-gnpm@<version>可以更新NPM到某个指定版本npmrun<script>运行某脚本<packageName>后面可加版本号，安装指定版本的依赖，格式为：<packageNamec>@<version>1包管理工具包管理工具YarnYarn是由Facebook开发的JavaScript包管理工具，旨在提升包管理的性能和可靠性。它在安装依赖、锁定依赖版本和缓存依赖等方面进行了优化，通常比NPM提供更快的安装速度。Yarn提供了与NPM兼容的命令行界面，开发者可以无缝切换使用。在大型Vue.js项目中，尤其是在网络环境较差的情况下，Yarn可能是更好的选择。Yarn的安装Yarn可以通过NPM安装。如果已经安装了NPM，安装Yarn只需在命令行中运行以下命令：npminstall-gyarn安装完成后，可以通过以下命令验证Yarn是否安装成功：yarn-version如果命令返回Yarn的版本号，说明安装成功。1包管理工具Yarn的常用命令命令作用yarn-h查看命令提示yarninit新建一个package.jsonyarninstall在项目node_modules目录下安装package.json文件中列出的所有依赖yarnadd<packageName>在项目中安装指定的依赖包（写入package.json文件中的dependencies节点）yarnadd--dev<packageName>在项目中安装指定的依赖包（写入package.json文件中的devDependencies节点，仅在开发环境中使用）yarnremove<packageName>删除指定的依赖包yarnupgrade<packageName>更新指定的依赖包yarnrun<script>运行某脚本无论选择NPM还是Yarn，熟练掌握这些包管理工具的使用，能够帮助我们更高效地管理项目依赖，提高开发效率和代码质量。2脚手架安装包管理工具后，下一步是安装脚手架。脚手架是一个标准项目生成器，通过预设配置初始化项目结构和配置，快速搭建基于特定框架的项目骨架，包括目录结构、配置文件和示例代码。这些工具通常内置构建工具（如Webpack、Rollup、Vite），用于将源代码转换为可部署的产品代码，并提供预配置设置，支持代码分割、TreeShaking等优化功能。脚手架的概念2脚手架常用的脚手架VueCLIVue.js官方脚手架工具，基于Webpack，用于快速搭建单页面应用。它能快速生成Vue.js项目的目录结构，简化项目启动和开发流程。不过，VueCLI已进入维护模式，新项目推荐使用Vite，除非项目依赖Webpack。Vite是一个基于ES模块的现代化Web应用脚手架和构建工具，提供快速的开发体验和高效的生产构建。它利用浏览器的ES模块支持，实现快速冷启动，并支持Vue.js、React等多种框架。这使得Vite成为一个通用的前端脚手架工具和构建工具，适用于各种类型的Web应用程序。凭借其出色的性能和良好的开发体验，Vite正逐步成为Vue.js项目的首选工具。CreateVite是Vite官方提供的脚手架工具，用于快速创建新的Vite项目。它通过命令行交互，根据用户的选择和配置，生成包含必要文件和目录结构的新项目，并安装必要的依赖项。CreateVite2脚手架脚手架CreateVite的安装（1）检查依赖环境首先，确保已安装Node.js，Vite需要Node.js版本14.18或更高版本。如果尚未安装或不确定版本，可以通过命令行检查，可参考上节中的方法。（2）安装Vite在命令行工具中，输入以下命令进行安装：npminstall-gvite等待命令执行完成后输入以下命令，查看Vite版本号，验证是否安装成功：vite-v若返回Vite版本号，说明安装成功。2脚手架脚手架CreateVite的安装（3）安装CreateVite

在命令行工具中，输入以下命令进行安装：npminstall-gcreate-vite等待命令执行完成后输入以下命令，查看系统中全局安装的create-vite版本：npmlist-gcreate-vite若返回create-vite版本号，说明安装成功。3项目创建创建项目的步骤脚手架CreateVite安装好后，我们即可使用相关命令进行Vue项目的创建。进入我们准备创建项目的目录，例如D:/Repos/vue，在该目录下打开命令行工具，并输入命令：create-vite<projectName>其中<projectName>是项目名称，可以自取。按上下箭头进行移动，选择框架Vue，按回车进入下一步。选择语言JavaScript，按回车进入下一步。至此项目就创建成功了。3项目创建初始项目架构（1）.vscode/目录下存放的是VSCode编辑器在当前工作区的相关配置文件。例如extensions.json文件中记录了当前项目推荐使用的插件。（2）node_modules/目录下存放的是当前项目所有的依赖。（3）public/目录下存放的是静态文件，这些文件不会被编译，最终会原样复制到打包目录下。地进行开发。（4）src/目录是源代码目录，存放项目的主要代码。3项目创建初始项目架构（5）src/assets/目录下存放静态资源，如图像、字体等。这些文件会由构建工具编译处理，可以通过相对路径引用（6）src/components/目录存放Vue组件，每个组件都是一个独立的.vue文件，这里存放的组件一般为公共的组件，能够在全局中多次调用的。其中src/components/HelloWorld.vue是默认生成的示例组件。（7）一般在src目录下还会建一个名为views目录，一般来说主要界面常写在该文件夹中。当然你也可以自己随便命名，但是在团队开发中保持通用规范。（8）src/App.vue为根组件，整个应用的入口组件。（9）src/main.js为应用的入口文件，负责创建Vue实例并挂载到DOM上。3项目创建初始项目架构（10）.gitignore：Git忽略文件列表，指定哪些文件和目录不被包含在版本控制中。（11）index.html：应用的主HTML文件，Vite会在构建时自动注入生成的静态资源链接。（12）package-lock.json：锁定安装的依赖版本，确保项目依赖的一致性。（13）package.json：项目的依赖、脚本和其他元数据。其中dependencies节点中记录了运行时的依赖，发布后即生产环境中所需要用的依赖；devDependencies节点中记录了开发时的依赖，里面的依赖是开发时用的。（14）README.md：项目的说明文件，通常用于描述项目、如何安装和使用等信息。（15）vite.config.js：Vite的配置文件，用于修改默认配置。熟悉项目目录结构和文件，有助于我们更好地进行开发。4前端UI框架集成ElementPlus集成ElementPlus是Vue3的一个组件库，提供了一套丰富的组件用于构建用户界面。在第一章中我们已经学会了如何在采用渐进式引入Vue的项目中安装ElementPlus框架，现在我们来学习如何在用脚手架创建的Vue项目中安装ElementPlus。打开项目myproject，点击VSCode菜单栏的终端，点击新建终端，此时出现终端的窗口，也可以使用快捷键“Ctrl+shift+`”，终端窗口如下图所示：4