babel安装

安装依赖包 cnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node cnpm install --save @babel/polyfill 根目录创建文件babel.config.js const presets = [ ["@babel/env",{ targets:{ edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ]; module.exports = {presets}; 创建index.js console.log("ok") 运行index.js npx babel-node index.js

02 默认导出和默认导入

默认导出语法 //默认导出语法只能使用唯一的一次 export default{} let a = 10 let c = 20 let d = 30 function show() { } export default { a,c,show } 默认导入语法 import 接收名称 from '模块标识符' import m2 from './m2.js' console.log(m2)

03 按需导出和按需导入

按需导出 export let s1 = 10 export let s1 = 10 export let s2 = 'ccc' export function say() { } 按需导入 import {s1} from '模块标识符' import {s1,s2 as ss2,say} from "./m3"; console.log(s1) console.log(ss2) console.log(say)

04 直接导入并执行模块代码

//m4.js for (let i = 0;i<10;i++){ console.log(i) } //index04.js import "./m4";

04 webpack

1. 创建隔行变色项目

新建空白目录，运行npm init -y命令，初始化报管理配置文件package.json新建src源代码目录新建src->index.html首页初始化首页基本的结构运行npm install jquery -s命令，安装jQuery通过模块化的形式，实现列表隔行变色效果

2. webpack的安装

运行npm install webpack webpack-cli -D命令，安装webpack相关的包在项目根目录中，创建名为webpack.config.js的webpack配置文件在webpack的配置文件中，初始化如下基本配置： module.exports={ //mode指定构建模式 production development mode:'development' } 在package.json配置文件中的script节点下，新增dev脚本如下： "script":{ //script节点下的脚本，可以通过npm run执行 "dev":"webpack" } 在终端中运行npm run dev命令，启动webpack进行项目打包

3. 配置打包的入口和出口

默认打包入口和出口 入口为src->index.js出口为dist->main.js 配置打包入口和出口 //在webpack.config.js中新增配置信息 //导入操作路径的模块 const path = require('path') module.exports={ //mode指定构建模式 // mode:'development' mode:'production', //打包入口文件的路径 entry:path.join(__dirname,'./src/index.js'), output:{ //输出文件的存放路径 path:path.join(__dirname,'./dist'), //输出文件名称 filename:'bundle.js' } }

4. 自动打包功能

解决的问题

修改完index.js文件后需要重新执行npm run dev重新生成转换后的js

步骤

运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具修改package.json->scripts中的dev命令 "scripts":{ //script节点下的脚本，可以通过npm run执行 "dev":"webpack-dev-server" } 将src->index.html中，script脚本引用路径修改为/bundle.js运行npm run dev命令，重新打包在浏览器中访问，查看自动打包效果

注意

webpack-dev-server会启动一个实时打包的http服务器webpack-dev-server打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

5. 配置html-webpack-plugin生成预览页面

运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件

修改webpack.config.js文件的头部区域，添加如下配置信息：

//导入生成预览页面的插件，得到一个构造函数 const HtmlWebpackPlugin = require('html-webpack-plugin') const htmlPlugin = new HtmlWebpackPlugin({ //源文件 template:'./src/index.html', //生成文件（存在内存中，目录中不显示） filename:'index.html' })

修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：

module.exports={ //插件列表 plugins:[htmlPlugin] }

6. 配置打包相关参数

解决的问题

需要复制地址打开浏览器访问

修改package.json的配置

//package.json中的配置 //--open 打包完成后自动打开浏览器页面 //--host 配置IP地址 //--port 配置端口 "script":{ "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888" }

7. 加载器

打包css文件

运行npm i style-loader css-loader -D命令，安装处理css文件的loader在webpack.config.js的module->rules数组中，添加loader规则如下： //所有第三方文件模块的匹配规则 module:{ rules:[ //test表示匹配的文件类型 use表示对应要调用的loader {test:/\.css$/,use:['style-loader','css-loader']} ] } 注意 use数组中指定的loader顺序是固定的多个loader的调用顺序是：从后往前调用

打包less文件

运行npm i less-loader less -D命令，安装处理less文件的loader在webpack.config.js的module->rules数组中，添加loader规则如下： //所有第三方文件模块的匹配规则 module:{ rules:[ //test表示匹配的文件类型 use表示对应要调用的loader {test:/\.less$/,use:['style-loader','css-loader','less-loader']} ] }

打包scss文件

运行npm i sass-loader node-sass -D命令，安装处理scss文件的loader（中文路径会安装失败）在webpack.config.js的module->rules数组中，添加loader规则如下： //所有第三方文件模块的匹配规则 module:{ rules:[ //test表示匹配的文件类型 use表示对应要调用的loader {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']} ] }

8.配置postCSS自动添加css的兼容前缀

解决的问题

浏览器前缀自动添加

步骤

运行npm i postcss-loader autoprefixer -D命令在 //导入自动添加前缀的插件 const autoprefixer = require('autoprefixer') module.exports={ //挂载插件 plugins:[autoprefixer] } 在webpack.config.js的module->rules数组中，添加loader规则如下： //所有第三方文件模块的匹配规则 module:{ rules:[ //test表示匹配的文件类型 use表示对应要调用的loader {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']} ] }

9.打包样式中的图片和字体文件

运行npm i url-loader file-loader -D命令

在webpack.config.js的module->rules数组中，添加loader规则如下：

//所有第三方文件模块的匹配规则 module:{ rules:[ //test表示匹配的文件类型 use表示对应要调用的loader { test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:'url-loader?limit=10284988' } ] }

图片大小小于limit会被转化为base64，大于或等于不会转换为base64

10.打包ES6高级js语法

安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D

安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下：

module.exports = { presets:['@babel/preset-env'], plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties'] }

在webpack.config.js的modules->rules数组中，添加loader规则如下：

//exclude为排除项，表示babel-loader不需要处理node_modules中的js文件 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

11.Vue单文件组件加载器

运行npm i vue-loader vue-template-compiler -D命令

在webpack.config.js配置文件中，添加vue-loader的配置项如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module:{ rules:[ {test:/\.vue$/,loader:'vue-loader'} ] }, plugins:[ new VueLoaderPlugin() ] }

12.webpack中使用Vue

运行npm i vue -S安装vue

在src->index.js入口文件中，通过import Vue from 'vue'来导入vue构造函数

创建vue的实例对象，并指定要控制的el区域

通过render函数渲染App根组件

//导入Vue构造函数 import Vue from 'vue' //导入App根组件 import App from './components/App.vue' const vm = new Vue({ //指定要控制的el区域 el:"#app", //通过render函数渲染App根组件 render:h=>h(App) })

13.webpack简单打包发布

修改package.json文件配置打包命令

//在package.json文件中配置webpack打包命令 "scripts":{ "build":"webpack -p" }

Vue脚手架

1.安装

npm install -g @vue/cli vue -V

2. 创建Vue项目

//1. 基于交互式命令行的方式，创建新版vue项目 vue create my-project //2. 基于图形化界面的方式，创建新版vue项目 vue ui //3. 基于2.x旧模板，创建旧版vue项目 npm install -g @vue/cli-init vue init webpack my-project 命令行创建步骤 Vue CLI v4.2.2 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a linter / formatter config: Standard ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> t o invert selection)Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config f iles ? Save this as a preset for future projects? Yes ? Save preset as: vueSetting cd my-project npm run serve

3. 自定义配置

方式一：在package.json中添加如下信息，实现修改端口并自动打开网页"vue": { "devServer": { "port": 8888, "open": true } } 方式二（推荐）：通过单独的配置文件配置项目 根目录创建vue.config.js添加如下配置module.exports = { "devServer": { "port": 8888, "open": true } }

4. Element-UI的使用

命令行安装 安装依赖包npm i element-ui -S在main.js导入Element-UI相关资源 //导入组件库 import ElementUI from 'element-ui' //导入样式 import 'element-ui/lib/theme-chalk/index.css' //配置Vue插件 Vue.use(ElementUI) 在App.vue中导入Element-UI组件 <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row>