【Vue_05】前端工程化

原创
02/17 21:17
阅读数 584

一、ES6的模块化

1. ES6模块化规范

每个 js 文件都是一个独立的模块

导入模块成员使用 import 关键字

暴露模块成员使用 export 关键字

2. 基本语法

发使用 export default { }导出默认成员

使用 import 接收名称 from "模块路径" 导入

使用 export A 按需导出

使用 import { A, B } from "模块路径" 按需导入

Node 对于 ES6 的支持并不好,所以我们需要引入 babel 来示范

  • 安装 babel 相关

    npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
    npm install --save @babel/polyfill
    
  • 创建 babel.config.js 文件

    var presets = [
      ["@babel/env",
        {
          targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1",
          }
        }]
    ];
    
    module.exports = { presets };
    
  • 创建模块 a.js

    // 定义变量
    var username = "China";
    var password = "66666";
    
    // 定义方法
    var fun = function() {
        console.log("这是a.js的方法发");
    }
    
    // 暴露成员
    export default {	// 一个 js 中只能存在一个
        username,
        fun
    }
    
    var num = 100;
    var sum = 0;
    
    export num;
    export sum;
    
  • 创建模块 index.js 并引用 a.js

    import A from "./a";
    import {num as number , sum} from "./a"
    
    // 打印暴露的成员
    console.log("username: " + A.username);
    // 打印未暴露的成员
    console.log("password: " + A.password);
    
    //调用暴露的方法
    A.fun();
    
  • 执行 index.js

    npx babel-node index.js
    
  • 执行结果

    在这里插入图片描述

3. 详解 package.json

{
	// 模块名称
	"name": "Demo",
	// 模块版本
	"version": "1.0.0",
	// 入口文件
	"main": "index.js",
	// 描述信息
	"description": "第一个 Vue 项目",
	// 作者
	"author": "Demo_Null",
	// 如果值为true,npm将拒绝发布它
	"private": true,
	// 执行命令的脚本
	"scripts": {
		// 执行npm run dev,其实是执行 node build/dev-server.js
		"dev": "node build/dev-server.js",
	},
	// 模块的版本依赖
	"dependencies": {
		"vue": "^2.2.1",
		"vue-router": "^2.3.0"
	},
	// 开发环境依赖
	"devDependencies": {
		"babel-core": "^6.22.1",
		"webpack": "^2.2.1"
	},
	// 项目运行的环境版本范围
	"engines": {
		"node": ">= 4.0.0",
		"npm": ">= 3.0.0"
	},
}

使用 npm init -y 可以初始化 package.json 并使用默认配置

二、webpack

1. webpack是什么

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,可以处理代码压缩混淆、处理 js 兼容性问题、性能优化等。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装 Node.js。

在这里插入图片描述

2. webpack的基本使用

  • 安装 webpack

    npm install webpack webpack-cli -D
    
  • 创建 webpack.config.js 配置文件

    module.exports = {
    	//可以设置为development(开发模式),production(发布模式)
        mode:"development"
    }
    
  • 在 package.json 中新增运行脚本

    "scripts":{
        "dev":"webpack"
    }
    
  • 启动 webpack 进行打包

    npm run dev
    
  • 启动截图

    在这里插入图片描述

等待 webpack 打包完毕之后,找到默认的 dist 路径中生成的 main.js 文件,将其引入到 html 页面中。

3. webpack的相关配置

  • 配置 webpack 打包的入口/出口

默认会将 src/index.js 作为默认的打包入口 js 文件,将 dist/main.js 作为默认的打包输出 js 文件

// node 中操作路径的模块
const path = require("path");
module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/xx.js"),
    //设置出口文件
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置文件名
        filename:"main.js"
    }
}
  • 配置 webpack 自动打包

    // 安装自动打包工具
    npm install webpack-dev-server -D  
    // 修改 package.json 文件执行脚本 	
    "scripts":{
    	// webpack-dev-server --open --host 127.0.0.1 --port 9999  自动打开 ip  端口
       "dev":"webpack-dev-server"
    }
    // 修改页面 js 文件路径 	
    <script src="/main.js"></script>
    

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

三、 webpack中的加载器

1. CSS

// 安装相关 loader
npm install style-loader css-loader -D
// 配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                // test 设置需要匹配的文件类型,支持正则
                test:/\.css$/, // 以 css 结尾的文件
                // use 表示该文件类型需要调用的loader,优先级从后往前
                use:['style-loader','css-loader']
            }
        ]
    }
}

2. 图片及字体文件

// 安装
npm install url-loader file-loader -D
// 配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
            	// | 表示或者
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数,只有小于limit值的图片,才会转换为base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

3. 高级 JS 语法

// 安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
// 安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
// 在项目根目录创建并配置babel.config.js文件
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
// 配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                test:/\.js$/,
                use:"babel-loader",
                // exclude 为排除项,意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

四、Vue单文件组件

1. 什么是 vue 单文件组件

Vue单文件组件每个单文件组件的后缀名都是.vue 优化了传统全局组件的一些弊端(模板缺乏高亮、没有 css 等) 每一个Vue单文件组件都由template、script、style 三部分组成

<template>
   // 组件代码区域
</template>

<script>
   // js代码区域
</script>

<style scoped>
   // 样式代码区域
</style>

2. 配置 vue 单文件组件加载器

// 安装 vue 组件的加载器
npm install vue-loader vue-template-compiler -D
// 配置规则:更改 webpack.config.js 的 module 中的 rules 数组
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
    ......
    plugins:[ vuePlugin  ],
    module : {
        rules:[
        { 
                test:/.vue$/,
                loader:"vue-loader",
          }
     }
}

3. webpack 中使用 Vue

/*
	一般是 src/main.js
*/
// 安装Vue
npm install vue -S
// 在index.js中引入vue
import Vue from "vue"
// 创建 Vue 实例对象并指定 el,最后使用 render 函数渲染单文件组件
const vm = new Vue({
    el:"#first",
    render:h=>h(app)
})

/*
	打包发布
*/
// 配置 package.json
"scripts":{
    "dev":"webpack-dev-server",
    "build":"webpack -p"
}

五、 Vue 脚手架

1. 安装 Vue 脚手架

npm install -g @vue/cli

2. cmd 中使用脚手架创建 Vue 项目

  • 命令

    vue create 项目名称

  • 选择预设

    在这里插入图片描述

  • 选择特性(使用空格选中)

    在这里插入图片描述

  • 是否启用历史模式的路由

    在这里插入图片描述

  • ESline 选择

    在这里插入图片描述

  • 何时进行 ESline 语法校验

    ​​​​​​​ 在这里插入图片描述

  • 配置文件如何放

    ​​​​​​​ 在这里插入图片描述

  • 是否将当前设置存为模板

    ​​​​​​​ 在这里插入图片描述

  • 创建成功

    ​​​​​​​在这里插入图片描述

    在这里插入图片描述

  • 启动项目(npm run serve)

    ​​​​​​​ 在这里插入图片描述

    在这里插入图片描述

3. 使用可视化界面创建 Vue 项目

  • 命令

    vue ui

    在这里插入图片描述

  • 新建项目

    ​​​​​​​在这里插入图片描述

4. Vue 脚手架自定义配置

// 通过 package.json 进行配置 [不推荐使用]
"vue":{
    "devServer":{
        "port":"9990",
        "open":true
    }
}
// 通过单独的配置文件进行配置,创建vue.config.js
module.exports = {
    devServer:{
        port:8888,
        open:true
    }
}
展开阅读全文
打赏
1
1 收藏
分享
加载中
赞啊
02/20 14:44
回复
举报
更多评论
打赏
1 评论
1 收藏
1
分享
返回顶部
顶部