Vue前端工程化

模块化：把一个功能封装到一个文件当中，其他文件可以导入该文件，使用其中的功能

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挂载