课程地址【2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_sourcecopy_webvd_sourceb1cb921b73fe3808550eaf2224d1c155目录3 Vue CLI脚手架3.1 Vue CLI介绍和安装3.2 使用脚手架创建项目3.1.1 指令创建Vue CLI项目3.1.2 运行项目3.3 项目结构及介绍3.4 模块化介绍3.5 import导入与export导出3.6 export default默认导出3.7 使用less编写css样式3.8 引入组件和scoped局部样式3.8.1 引入组件3.8.2 scoped局部样式3.9 使用脚手架搭建简易网页3 Vue CLI脚手架介绍 | Vue CLIVue项目脚手架类似建筑脚手架预先构建开发模型并集成Webpack等开发工具通过组合模型形成页面简化了复杂的工具配置流程。脚手架虽然集成了核心工具但实际开发中可能需要额外功能比如特定的UI组件库、状态管理库等这些就像“插件”需要用npm安装到项目里或者通过src目录手动引入本地文件这样才能扩展项目能力。axios就是插件需要npm指令去安装或者使用src引入。Vue脚手架可一键生成VueWebpack项目模板包含依赖库省去手动安装插件、寻找CDN并逐个引入的麻烦专为单页面应用快速搭建复杂开发环境轻松创建应用省去繁琐配置。Webpack 是通用的模块化打包工具可处理各种资源配置灵活但复杂。Vue CLI 是基于 Webpack 封装的 Vue 专用脚手架主要适配 Vue 2配置通过 webpack.config.js 或 vue.config.js插件生态成熟但开发时需先打包再启动速度较慢目前处于维护模式。Vite 则是独立的现代构建工具基于原生 ES 模块和 Rollup适配 Vue 3 最优开发时按需编译启动和热更新速度极快配置简洁通过 vite.config.js对 TypeScript、Less 等支持开箱即用是 Vue 3 新项目官方推荐插件生态快速发展。三者中Vue CLI 依赖 Webpack 作为底层引擎而 Vite 与 Webpack 是不同的构建方案不依赖 Webpack。3.1 Vue CLI介绍和安装安装node.js和Vue CLI。node安装后会自动安装npm。补充node是什么node全称Node.js是一个基于Chrome V8引擎的JavaScript运行环境是一个让JavaScript运行在服务端的开放平台让JavaScript与php、Python、Perl等服务端语言平起平坐的脚本语言。npm是什么程序员想在GitHub开源共享代码但项目常依赖jQuery、Bootstrap等多个包手动管理很麻烦。于是优秀的程序员Isaac ZSchlueter用运行在Node.js上的JavaScript开发了Node Package Manager简称npm——Node包管理器。其基本思路是搭建代码仓库服务器邀请jQuery、Vue等开发团队将代码放入。Node内置npm后用户只需在package.json声明依赖执行npm installnpm就会自动下载所需代码包。下载的代码出现在node_modules目录里就可以随意使用了。安装Vue CLI通过npm进行安装。npm install -gvue/cliinstall可以简写为inpm默认用国外服务器国内访问慢换成cnpm能快很多安装命令是npm install -g cnpm --registryhttps://registry.npmmirror.com之后就能用cnpm代替npm安装包了。查看自己电脑上是否有Vue 脚手架。3.2 使用脚手架创建项目也可以使用图形化界面。终端窗口winR打开也可以在VS Code里打开。3.1.1 指令创建Vue CLI项目在VS Code里创建第一个Vue CLI项目。vue create xxx会有一些选项。选项1选择手动选择配置。选项2选择图中选中的4项。BabelBabel编译将ES6编译为ES5进行兼容Typescript给JavaScript添加特性的语言扩展Progressive Web App(PWA) Support让网页渐进地变成AppRouterVue路由VuexVuexCSS Pre-processorsCSS预编译器Linter/Formater代码检测和格式化Unit Testing单元测试E2E Testing端到端测试Babel 是一个 JavaScript 编译器能把 ES6 的新语法转换成浏览器兼容的 ES5 代码这样写代码时能用新特性又不用担心老浏览器跑不了。比如箭头函数、let/const 这些经过 Babel 处理后老浏览器也能识别。项目里需要它来做语法转换所以创建时建议保留。选项32.x选项4路由方式选择路由方式还是其他方式。选择n不用路由方式。后期可以重新设置选项5CSS编译模式。选择less好用。选项6选择代码规范eslint with ... 进行报错提醒eslint A... 不严谨模式eslint S... 正常模式eslint P... 严格模式选择正常模式。选项7lint何时验证保存的时候验证就行。选项8安装的这些东西放在哪里。选择第一个独立文件。比如.babelrc 或 babel.config.js专门写 Babel 的具体规则这样配置更清晰和依赖管理分开。package.json 里的 “babel” 字段也能写配置但复杂项目一般都用独立文件。选项9问上述配置是否保存为一个文件。3.1.2 运行项目首先进入当前文件夹cd xxx然后启动项目npm run servepackage.json 的 scripts 字段是 key-value 结构key 是自定义的命令名value 是实际要执行的命令。比如 Vue CLI 项目里 serve: vue-cli-service serve执行时输入 npm run serve就会运行 value 里的命令启动开发服务器。所有可执行的 npm 脚本都在这里定义不管是工具自动生成的还是手写的想知道有哪些命令或执行自定义命令都要看这个字段。执行时如果端口冲突可能需要手动在命令后加 --port 换端口而有些编辑器的快捷键可能会自动处理端口冲突。项目启动后点击local路径点击上述链接另外图形化界面创建项目的方式就不介绍了。3.3 项目结构及介绍main.js 作为入口文件会导入 App.vue 这个主组件然后通过 new Vue() 初始化实例把 App.vue 挂载到页面上。App.vue 里通常会放路由视图这样所有页面就能通过路由在 App.vue 里切换显示了。package-lock.json 的作用是精确锁定项目中每个依赖包的具体版本包括它们的子依赖版本还会记录依赖的安装路径和哈希值。这样在不同环境下执行 npm install 时能确保安装的依赖版本和第一次安装时完全一致避免因版本差异导致的问题同时也能让依赖安装速度更快。如果安装依赖失败删除它后重新安装会根据 package.json 里的版本规则安装新的依赖可能和之前的版本不一致团队项目中这种情况需要重新提交新的 package-lock.json。3.4 模块化介绍1 模块化概念模块化是将复杂程序按规则拆分成多个模块每个模块内部的数据和实现是私有的只对外暴露接口或方法与其他模块通信再组合起来完成功能。2 为什么使用模块化实际开发中因变量、函数、对象命名易重复易引发冲突及全局变量污染程序复杂时代码量大且需引入多个类库易导致文件依赖混乱。3 为解决上述问题使用模块化的JS所以模块化的作用就是1. 避免全局变量被污染2. 便于代码编写和维护在 Vue CLI 项目中“模块化的 JS”不仅指独立的 .js 文件模块也包括 .vue 组件中 script 部分的 JS 逻辑。它们都遵循模块化规范内部数据和函数默认私有通过 export 暴露接口其他模块用 import 导入使用以此解决命名冲突、全局污染和依赖混乱问题。同时Vue CLI 中 CSS 也可通过 scoped 实现样式模块化但“模块化的 JS”主要聚焦逻辑层的模块化组织。没有模块化之前多 JS 文件引入易因同名变量导致覆盖。模块化后每个文件的变量和函数默认是 “私有” 的只在模块内部有效。比如 A.js 里有个变量name aB.js 里也有name b如果没模块化两个文件都引入会导致name被后者覆盖。但模块化后A 和 B 是独立模块name只在各自模块内生效除非主动用export暴露且其他模块用import导入时可以重命名自然就不会有变量覆盖了。4 模块化的历程早期 JavaScript 本身未内置模块化机制需依赖第三方库实现模块化。其中AMD 和 CMD 规范适用于浏览器环境CommonJS 规范则用于 Node.js 环境。随着前端业务复杂度提升及前后端分离趋势发展ES6 正式引入原生模块化Module使 JavaScript 首次在语言层面支持模块化且主要面向浏览器环境。5 模块化的使用ES6 模块化通过 export 和 import 实现模块间交互。每个文件即为一个模块内部定义的变量、函数、对象默认对外不可见需通过 export 暴露其他文件可使用 import 导入暴露的内容。6 按需导入和导出注意测试时需要在服务端不然出现跨域问题。测试时需要在服务端是因为直接本地打开 HTML 文件使用 ES6 模块化时Network 里模块 JS 文件的请求地址是 file:/// 开头的本地路径浏览器会将这种 file:// 协议的请求视为不同源触发安全限制报错这本质是对 file:// 协议的限制。本地服务器就是在自己电脑上运行的小型网页服务器能把项目文件“托管”起来。通过本地服务器运行项目比如用 Node.js 安装 http-server 后在项目文件夹执行 http-server 命令浏览器访问 http://localhost:8080此时 Network 里 HTML 和模块 JS 文件的请求地址协议都是 http://、域名都是 localhost、端口也相同属于同一源就不会有跨域问题了。Vue 项目开发环境会自动启动本地服务器所以 .vue 组件中的模块化引入不会有这个问题。3.5 import exportexportimport3.6 export defaultexport default默认暴露一个对象export default { }导入默认暴露的对象时可以给它起名import aaa from /page/page/HelloWorld.js’符号这里被配置为指向src目录这是通过构建工具的路径别名设置的。3.7 使用less编写css样式使用less编写css样式样式可以嵌套。表示标签本身。style langless .box { width: 100px; :hover { background-color: skyblue; } } /style补充在项目中当 import Vue from vue 没有指定路径时会默认去项目的 node_modules 目录中查找 vue 依赖包。而像 import App from ./App.vue 这样使用 ./ 开头的相对路径则表示从当前文件所在目录进入相应文件夹查找目标文件这里即当前目录下的 App.vue 文件。3.8 引入组件和scoped局部样式3.8.1 引入组件在components文件夹下创建一个组件。在 Vue 项目中单文件组件的文件名推荐使用 PascalCase这是官方建议的规范。而在模板中引用组件时推荐使用 kebab-case因为 HTML 标签不区分大小写短横线连接更符合 HTML 习惯。所以文件命名用大驼峰模板引用标签用短横线连接的 kebab-case是不同场景下的规范区分。template div classbox h1web前端开发/h1 p classtitle这是文字描述信息/p /div /template script export default {}; /script style langless h1 { color: red; font-size: 50px; } p.title { color: green; font-size: 30px; } /style然后在App.vue里引入、注册和使用这个组件。3.8.2 scoped局部样式只给itemBox自己的h1标签设置了样式但是App.vue的h1标签的样式被污染了。如果App组件对p标签修改样式那么itemBox组件的p标签的样式也会被污染。结论父子组件的样式会相互污染。但是父组件改子组件样式是正常的App父组件通常是设置全局样式的。解决途径给子组件添加scoped即局部css。结果这样就可以了。3.9 使用脚手架搭建简易网页本节跳过。