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