Vue全家桶之VueCLI 脚手架V2→V4版本(三)(2)

vue 规定：组件内的<style>节点是可选的，开发者可以在<style> 节点中编写样式美化当前组件的UI 结构。

1.1.4、让style中支持less语法

让 <style> 标签上添加 lang="less" 属性,即可使用 less 语法编写组件的样式：

1.1.5、组件之间的样式冲突问题

默认情况下，写在.vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是：

1. 单页面应用程序中，所有组件的DOM 结构，都是基于唯一的index.html 页面进行呈现的

2. 每个组件中的样式，都会影响整个index.html 页面中的DOM 元素

为了提高开发效率和开发体验，vue 为style 节点提供了 scoped属性，从而防止组件之间的样式冲突问题

1.1.6、/deep/样式穿透

• 如果给当前组件的style 节点添加了scoped 属性，则当前组件的样式对其子组件是不生效的。

• 如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

1.2、使用组件的三个步骤

---

App 根组件

1.3、私有子组件

---

通过 components 注册的是私有子组件

例如：

在组件A的components 节点下，注册了组件F。则组件F 只能用在组件A 中；不能被用在组件C 中。

1.4、注册全局组件

---

在vue 项目的main.js 入口文件中，通过Vue.component() 方法，可以注册全局组件。示例代码如下：

// 导入需要全局注册的组件

import Count from ‘./components/Count.vue’

// 参数1:字符串格式,表示组件的注册名称

// 参数2:需要被全局注册的那个组件

Vue.component(‘MyCount’,Count)

2、Vue CLI2

============================================================================

• CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架

• Vue CLI是一个官方发布 vue.js 项目脚手架

• 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置

• Vue CLI官网：https://cli.vuejs.org/zh/

• vue-cli 是Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的Vue 项目的过程

• 程序员可以专注在撰写应用上，而不必花好几天去纠结webpack 配置的问题

2.1、安装Vue脚手架

---

全局安装 cli

npm install -g @vue/cli

这样安装的是脚手架的最新版本，如果我们想安装脚手架 2 版本呢？

全局安装脚手架2版本，这样的话我们就既可以用脚手架2的版本，也可以用脚手架最新的版本

npm install -g @vue/cli-init

• Vue CLI2 初始化项目命令

vue init webpack my-project

• Vue CLI 3 初始化项目命令

vue create my-project

• 查看 VueCLI 版本（注意 V 要大写）

vue -V

2.2、Vue CLI2 初始化项目

---

在终端输入 vue init webpack my-project

2.2.1、目录结构详解

2.2.2、运行项目

我们使用脚手架初始化项目之后如何运行呢？

cd 到对应目录，在终端输入 npm run dev 就可以运行了

2.2.3、解释

我们来看 main.js

• Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容

• 而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板

• template 模板也就是 App.vue 里面的内容

2.2.4、关闭Eslint

若我们在初始化项目时候开启了 ESlint 代码检测，我们不想用的时候方法如下：

3、Vue CLI3

============================================================================

Vue-cli 3 与 2 版本有很大区别

• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

• vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

Vue CLI 3 初始化项目命令：

vue create my-project

3.1、目录结构详解

---

3.2、运行项目

---

使用 Vue CLI3 初始化项目之后，运行项目。只需要看 package.json 下的 scripts 就知道运行命令

3.3、配置

---

• 方式一：启动图形化界面 Vue ui

• 方式二：自定义配置 vue.config.js

module.exports = {

}

4、Vue CLI4

============================================================================

4.1、单页面应用程序SPA

---

单页面应用程序（英文名：Single Page Application）简称SPA，顾名思义，指的是一个Web 网站中只有唯一的一个HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

我们现在的开发模式就是单页面，一次将所有的资源请求完，这样我们点击此单页面的功能，就不会再去请求资源，极大的节约了我们的带宽。

4.2、Vue项目的运行流程

---

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

• App.vue 用来编写待渲染的模板结构

• index.html 中需要预留一个el 区域

• main.js 把App.vue 渲染到了index.html 所预留的区域中

4.3、安装VueCLI4

---

npm install -g @vue/cli

查看版本

vue --version

4.4、创建项目

---

1. 在控制台输入如下命令会创建 hello-world 项目

vue create hello-world

2. 会弹出如下选择预设

箭头上下键控制选择，选择 Manually select features 手动配置

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

@vue/cli

查看版本

vue --version

4.4、创建项目

---

1. 在控制台输入如下命令会创建 hello-world 项目

vue create hello-world

2. 会弹出如下选择预设

箭头上下键控制选择，选择 Manually select features 手动配置

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】