课程地址：【2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155

目录

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 CLI

Vue项目脚手架类似建筑脚手架，预先构建开发模型并集成Webpack等开发工具，通过组合模型形成页面，简化了复杂的工具配置流程。

脚手架虽然集成了核心工具，但实际开发中可能需要额外功能，比如特定的UI组件库、状态管理库等，这些就像“插件”，需要用npm安装到项目里，或者通过src目录手动引入本地文件，这样才能扩展项目能力。

axios就是插件，需要npm指令去安装（或者使用src引入）。

Vue脚手架可一键生成Vue+Webpack项目模板，包含依赖库，省去手动安装插件、寻找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 Z，Schlueter用运行在Node.js上的JavaScript开发了Node Package Manager，简称npm——Node包管理器。

其基本思路是搭建代码仓库服务器，邀请jQuery、Vue等开发团队将代码放入。

Node内置npm后，用户只需在package.json声明依赖，执行npm install，npm就会自动下载所需代码包。

下载的代码出现在node_modules目录里，就可以随意使用了。

安装Vue CLI，通过npm进行安装。

npm install -g@vue/cli

install可以简写为i

npm默认用国外服务器，国内访问慢，换成cnpm能快很多，安装命令是`npm install -g cnpm --registry=https://registry.npmmirror.com`，之后就能用cnpm代替npm安装包了。

查看自己电脑上是否有Vue 脚手架。

3.2 使用脚手架创建项目

也可以使用图形化界面。

终端窗口，win+R打开，也可以在VS Code里打开。

3.1.1 指令创建Vue CLI项目

在VS Code里创建第一个Vue CLI项目。

vue create xxx

会有一些选项。

选项1：选择手动选择配置。

选项2：选择图中选中的4项。

Babel：Babel编译，将ES6编译为ES5，进行兼容；

Typescript：给JavaScript添加特性的语言扩展；

Progressive Web App(PWA) Support：让网页渐进地变成App；

Router：Vue路由

Vuex：Vuex

CSS Pre-processors：CSS预编译器

Linter/Formater：代码检测和格式化

Unit Testing：单元测试

E2E Testing：端到端测试

Babel 是一个 JavaScript 编译器，能把 ES6+ 的新语法转换成浏览器兼容的 ES5 代码，这样写代码时能用新特性，又不用担心老浏览器跑不了。比如箭头函数、let/const 这些，经过 Babel 处理后，老浏览器也能识别。项目里需要它来做语法转换，所以创建时建议保留。

选项3：2.x

选项4：路由方式，选择路由方式还是其他方式。选择n，不用路由方式。（后期可以重新设置）

选项5：CSS编译模式。选择less，好用。

选项6：选择代码规范

eslint with ... 进行报错提醒

eslint + A... 不严谨模式

eslint + S... 正常模式

eslint + P... 严格模式

选择正常模式。

选项7：lint何时验证？保存的时候验证就行。

选项8：安装的这些东西放在哪里。选择第一个，独立文件。

比如.babelrc 或 babel.config.js，专门写 Babel 的具体规则，这样配置更清晰，和依赖管理分开。package.json 里的 “babel” 字段也能写配置，但复杂项目一般都用独立文件。

选项9：

问上述配置是否保存为一个文件。

3.1.2 运行项目

首先进入当前文件夹

cd xxx

然后启动项目

npm run serve

package.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 = 'a'，B.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 & export

export

import

3.6 export default

export default默认暴露一个对象

export default { }

导入默认暴露的对象时，可以给它起名

import aaa from '@/page/page/HelloWorld.js’

@符号这里被配置为指向src目录，这是通过构建工具的路径别名设置的。

3.7 使用less编写css样式

使用less编写css样式，样式可以嵌套。

&表示标签本身。

<style lang="less"> .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 class="box"> <h1>web前端开发</h1> <p class="title">这是文字描述信息</p> </div> </template> <script> export default {}; </script> <style lang="less"> 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 使用脚手架搭建简易网页

本节跳过。