babe

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  to select,  to toggle all,  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组件
    
      默认按钮
      主要按钮
      成功按钮
      信息按钮
      警告按钮
      危险按钮
    
    

你可能感兴趣的:(babe)