webpack之vue项目知识补充

babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

在项目中安装

npm install --save-dev babel-cli

#查看是否安装成功
babel --version

配置.babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{
    "presets": [],
    "plugins": []
}

presets字段设定转码规则，将es2015规则加入 .babelrc：

{
    "presets": ["es2015"],
    "plugins": []
}

安装转码器

npm install --save-dev babel-preset-es2015

export

按名称导出，使用时，导入的变量名必须和导出的名称一致

定义：

export function nameExport (x, y) {
  return x * y
}

引用：

import { nameExport } from './fetch/learnExport'

使用

nameExport()

重命名
为了解决导出命名冲突的问题，ES6为你提供了重命名的方法解决这个问题

import {nameUse as nameList} from "nameList.js"
import {nameUse as pubilcList} from "pubilcList.js"

scoped属性的作用

当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素。
作用功能：
实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块虽然方便但是我们需要慎用，因为当我们使用公共组件时会造成很多困难，增加难度，想知道造成那些难度，需要先从scoped实现原理了解
实现原理：
通过观察DOM结构可以发现：vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用，如图，样式属性上也会多一个该字符，以保证唯一

慎用：
从原理可见，之所以scoped可达到类似组件私有化、样式设置“作用域”的效果，其实只是在设置scoped属性的组件上的所有标签添加一的data开头的属性，且在标签选择器的结尾加上和属性同样的字段，起到唯一性的作用，但是这样如果组件中也引用其他组建就会出现类似下面的问题：

1.父组件无scoped属性，子组件带有scoped，父组件是无法操作子组件的样式的（原因在原理中可知），虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件

2.父组件有scoped属性，子组件无，父组件也无法设置子组件样式，因为父组件的所有标签都会带有data-v-469af010唯一标志，但子组件不会带有这个唯一标志属性，与1同理，虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件
父子组建都有，同理也无法设置样式，更改起来增加代码量

lang

普通的style标签只支持普通的样式，如果想启用scss或者less，需要为style元素设置lang属性

<style lang="scss" scoped>
/* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
// 只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
body {
  div {
    font-style: italic;
  }
}
</style>

vue脚手架 Vue CLI

Vue CLI是用于快速Vue.js开发的完整系统，它提供：

• 通过交互式项目脚手架@vue/cli。
• 通过@vue/cli+ 零配置快速原型@vue/cli-service-global。
• 运行时依赖项（@vue/cli-service）：
  可升级
  建立在webpack之上，具有合理的默认值；
  可通过项目内配置文件进行配置；
  可通过插件扩展
• 丰富的官方插件集合，集成了前端生态系统中的最佳工具。
• 完整的图形用户界面，用于创建和管理Vue.js项目。
  Vue CLI的目标是成为Vue生态系统的标准工具基线。它可确保各种构建工具与合理的默认设置一起顺利运行，因此您可以专注于编写应用程序，而不必花费大量时间进行配置工作。同时，它仍然可以灵活地调整每个工具的配置，而无需弹出。

安装
要安装新软件包，请使用以下命令之一。除非通过Node.js版本管理器在系统上安装了npm（例如n或nvm），否则您需要管理员特权才能执行这些操作。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装后，您将可以vue在命令行中访问二进制文件。您可以通过简单地运行来验证它是否已正确安装vue，这将向您显示一条列出所有可用命令的帮助消息。

您可以使用以下命令检查您的版本是否正确：

vue --version

升级中
要升级全局Vue CLI软件包，您需要运行：

npm update -g @vue/cli

# OR
yarn global upgrade --latest @vue/cli

创建项目 执行:

Vue create vue-learn

进入到vue-learn

cd vue-learn

执行对应的命令:

npm run serve

express-generator脚手架的使用

1.全局安装 express-generator (安装它的目的 是为了 运行 express命令 )

cnpm i express-generator -g

备注: 可以运行命令 express --version 检测一下 是否能使用

2.可以使用 express 命令 来快速从创建一个项目目录
express 项目文件夹的名字 -e
例如：

express demo -e

备注:
项目文件夹的名字: 会自动生成一个项目文件夹
-e: 使用 ejs 模板
3.进入项目目录, 运行 cnpm i, 一次性安装所有的依赖模块

cd demo

cnpm i