专栏首页黑马【Vue_05】前端工程化

【Vue_05】前端工程化

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端工程化

    所谓前段工程自动化就是:由于前端分裂,有人写css代码,有人写scss,有人写es5,有人写es6,那么就需要翻译工具(命令行工具)翻译成ie或其他所有浏览器能...

    代码之风
  • 前端工程化

    前端工程化指的是:在 企业级的前端项目开发 中,把前端开发所需的 工具、技术、流程、经验等进行规范化、 标准化

    闲花手札
  • 谈前端工程化

    作为前端架构的一部分,工程化是个永恒的话题,我们之所以老生常谈这个事情,核心原因在于浏览器这个环境所支持的三种语言没有在语言层面提供统一的模块化支持,这使得大家...

    ConardLi
  • [第5期] AST 与前端工程化实战AST 与前端工程化实战

    AST 是一个非常基础但是同时非常重要的知识点,我们熟知的 TypeScript、babel、webpack、vue-cli 都是依赖 AST 进行开发的。本文...

    皮小蛋
  • 前端工程化-构建

    构建的核心是资源管理。简单说,构建就是把前端工程师开发的源代码进行编译、压缩、打包等一系列操作,最终产出可以直接上线或者可供后端工程师的资源。 构建可以划分为纯...

    寒月十八
  • 浅析前端工程化

    1. 什么是前端工程化 自有前端工程师这个称谓以来,前端的发展可谓是日新月异。相比较已经非常成熟的其他领域,前端虽是后起之秀,但其野蛮生长是其他领域不能比的。虽...

    寒月十八
  • 前端工程化脑图

    前端工程化是一套流程和规范,可以指导快速迭代和更合理的在前后台分离环境下进行合作,开发。

    娜姐
  • 前端工程化建设

    随着浏览器和前端技术的发展,现在的前端项目越来越大、业务也越来越复杂,前端工程化已经成为一件势在必行的事情。

    谭光志
  • 前端成神之路-vue前端工程化

    小结:推荐使用ES6模块化,因为AMD,CMD局限使用与浏览器端,而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

    海仔
  • F.I.S初探(前端工程化)

    一、初识FIS 在做项目中遇到了静态资源浏览器缓存更新的问题,于是在网络上寻找解决方案。之前虽然没有解决过这个问题,但方法无非就是为其设定新URI使得浏览器强制...

    用户1105954
  • 前端工程化-Feflow实践

    前言 前端工程化是指将开发阶段的代码转变成生产环境的代码的一系列步骤。主要包括构建,分支管理,自动化测试,部署等步骤。本文将介绍团队在前端工程化的实践,主要采...

    QQ音乐前端团队
  • 前端工程化那些事

    创建模式有两种,一种是默认配置(没有带其他辅助功能的 npm包),另一种是手动配置(可按照生产需要进行配置)

    树酱
  • 前端工程化篇之 Gulp

    Peter谭金杰
  • 前端开发的工具化与工程化

    概述 近年来,随着浏览器性能的提升与移动互联网浪潮的汹涌而来,Web前端开发进入了高歌猛进,日新月异的时代。这是最好的时代,我们永远在前行,这也是最坏的时代,无...

    xiangzhihong
  • 前端优化带来的思考,浅谈前端工程化

    这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段...

    哲洛不闹
  • 前端工程化(一)---工程目录搭建

    用户2193479
  • 前端工程化概述,带你全面深刻了解前端工程化思想

    大家好,今天我来和大家一起来了解前端工程化的知识,如有疑问和错误,欢迎指正,一起交流探讨哈!

    全栈加加
  • 带你入门前端工程(三):前端组件化

    在了解模块化、组件化之前,最好先了解一下什么是高内聚,低耦合。它能更好的帮助你理解模块化、组件化。

    谭光志
  • 前端工程化(二)---webpack配置

    用户2193479

扫码关注云+社区

领取腾讯云代金券