模块化:把一个功能封装到一个文件当中,其他文件可以导入该文件,使用其中的功能
ES6模块化开发的定义:
每个js文件都是一个独立的板块
导入模块成员用import关键字,导出用export关键字
babel文件可以把高级的es6 js代码转化为低级的js代码
node js下载babel文件
1.npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2.npm install --save @babel/polyfill
3.项目根目录创建文件babel.config.js
4.在babel.config.js文件当中写入下方代码
const preset = [
[ "@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrom:"67",
safari:"11.1"
}
}]
]
5.通过npx babel-node index.js执行代码
es6模块化默认导入与默认导出:
按需导入与按需导出:按需导出可以多次导出,默认导出只有一次
按需导出:export ;
只执行模块中的代码,不导出任何内容
webpack也可以将高级的es6语法转化为低级的js语法
webpack概述:
index.js文件也必须放在src目录下面
安装webpack文件:
npm install webpack webpack-cli -D(ok)
mode的选项有development和production
手动设置打包的入口和出口:(入口为高级的es6代码的文件路径,出口为把高级js代码编译为低级js代码文件的路径)
更改代码时自动重新打包: npm install webpack-dev-server -D(ok)
输入localhost:8080时自动跳转到index.html页面
npm install html-webpack-plugin -D(ok)
使用npm run dev之后自动打开页面
npm install style-loader css-loader -D(ok)
npm install sass-loader node-sass -D(err)
npm install postcss-loader autoprefixer -D(ok)
npm install url-loader file-loader -D(ok)
npm install babel-loader @babel/core @babel/runtime -D(ok)
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D(ok)
Vue单文件组件都是后缀由.vue构成的文件,script当中的name可以为组件命名,在别的页面当中导入时就可以直接当成标签使用
主页仍然是index.html,但是body标签当中只有一个id为app的div标签,在index.js导入App.vue文件
。index文件为主要的文件,导入其他的组件
单文件组件的组成结构:
template:组件的模板区域
script:业务逻辑区域
style:样式区域
<template>
<!--这里用于定义Vue组件的模板内容-->
</template>
<script type="text/javascript">
//这里用于定义vue组件的业务逻辑
export default{
name:,
data:(){
//私有数据
return {}
},
methods:{
//处理函数
},
//其他业务逻辑
}
</script>
这里用于定义组件的样式,scoped设置样式只在当前组件内生效
<style scoped>
</style>
定义的单文件组件需要在js文件内使用import导入
因为vue文件是以vue为后缀的,js文件编译不了,所以得配置vue组件的加载器
npm install vue-loader vue-template-compiler -D(ok)
Vue脚手架:npm install -g @vue/cli(ok)
网址:https://element.eleme.cn/#/zh-CN/component/icon
element ui提供了许多现成的前端组件
1.安装依赖包
npm install element-ui -S
2.导入Element-UI相关资源
import ElementUI from ‘element-ui’;
在html中使用elementUI只需要用Vue.use就行,在js当中使用需要使用Vue.prototype挂载