Vue模块构建与安装教程

需积分: 5 0 下载量 66 浏览量 更新于2024-12-16 收藏 100KB ZIP 举报
资源摘要信息:"Vue模块的构建过程涉及JavaScript、Vue.js框架、SCSS等技术。首先通过npm安装Vue模块的依赖包,然后使用npm run build命令执行构建过程,生成的文件名称列表为vue-modules-master。" 知识点: 1. Vue.js框架:Vue.js是一个开源的JavaScript框架,用于构建用户界面,尤其擅长单页应用(SPA)的开发。它具有轻量级、数据驱动、组件化等特点,使得开发者能够快速地构建界面。 2. JavaScript组件:在Vue.js中,组件是可复用的Vue实例,它允许开发者将页面分割成独立的、可复用的模块。每个组件可以拥有自己的模板、逻辑和样式,并且可以像普通HTML元素一样被引用。 3. SCSS:SCSS是CSS预处理器,是一种扩展的CSS语法,它支持变量、嵌套规则、混合(mixins)、导入等额外功能。在Vue项目中使用SCSS可以更方便地管理样式,提高代码的可维护性和可重用性。 4. npm(Node Package Manager):npm是随同Node.js一起安装的包管理器,它允许开发者从npm注册中心下载并安装各种Node.js包,用于管理和共享代码。在Vue项目中,npm用于安装项目所需的依赖包,如Vue.js、路由管理器、状态管理库等。 5. 构建过程:在Vue项目中,构建过程通常涉及到将开发环境下的源代码转换成生产环境下的可运行代码。这一步骤通常包括压缩JavaScript文件、预处理SCSS文件、编译Vue组件模板等。常用的构建工具包括Webpack、Vue CLI等。 6. Vue CLI:Vue CLI是Vue.js的官方脚手架工具,它提供了一套完整的构建配置,能够快速启动新的Vue项目。它预设了各种插件和配置,简化了构建、开发和测试的过程。 7. 文件压缩和打包:在构建过程中,通常需要对JavaScript、CSS等资源文件进行压缩和打包,以减少文件大小,加快加载速度,提高性能。这通常通过Webpack等构建工具实现,它们能够将多个文件合并成一个或几个较小的文件,并进行压缩处理。 8. git仓库:在给定的文件信息中,虽然没有明确提及,但文件名称列表中的"vue-modules-master"暗示了该项目可能托管在一个git仓库中。git是一个开源的分布式版本控制系统,用于追踪源代码文件的变化,方便团队协作开发。 综上所述,本文涉及的资源摘要信息包含了Vue模块构建的关键步骤和技术细节,详细解释了Vue.js框架、JavaScript组件、SCSS以及npm等构建过程中的核心概念,以及如何使用构建工具进行代码的压缩和打包。这些知识点对于理解和掌握Vue项目的构建流程至关重要。

WARN "css.modules" option in vue.config.js is deprecated now, please use "css.requireModuleExtension" instead. INFO Starting development server... 98% after emitting CopyPlugin WARNING Compiled with 17 warnings 09:43:57 warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'computed' was not found in 'vue' warning in ./src/router/index.js "export 'default' (imported as 'VueRouter') was not found in 'vue-router' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'defineComponent' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'getCurrentInstance' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'h' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'inject' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'nextTick' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onActivated' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onDeactivated' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onUnmounted' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'provide' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'reactive' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'ref' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'shallowRef' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'unref' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'watch' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'watchEffect' was not found in 'vue'这个报错因为什么

2023-06-09 上传