【Vue_05】前端工程化

用户8250147

发布于 2021-02-04 14:46:11

5090

发布于 2021-02-04 14:46:11

文章被收录于专栏：黑马黑马

一、ES6的模块化

1. ES6模块化规范

每个 js 文件都是一个独立的模块导入模块成员使用 import 关键字暴露模块成员使用 export 关键字

2. 基本语法

发使用 export default { }导出默认成员使用 import 接收名称 from "模块路径" 导入使用 export A 按需导出使用 import { A, B } from "模块路径" 按需导入

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

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 打包完毕之后，找到默认的 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中的加载器

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
    }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

webpack