Vue学习笔记5--前端工程化

zoukankan html css js c++ java

Vue学习笔记5--前端工程化
前端工程化

完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ

模块化相关规范

概述

传统开发问题
- 命名冲突
- 文件依赖
模块化
- 含义：把单独的一个功能封装到一个模块（文件）中,模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖别的模块
- 好处：方便代码重用，提升开发效率，方便后期维护
浏览器端模块化规范
- AMD（Require.js）
- CMD（Sea.js）
服务器端模块化规范
- CommonJS
  
  模块分为单文件模块和包
  
  模块成员导出：module.exports 和 exports
  
  模块成员导入：require('模块标识符')
大一统模块发规范：ES6模块化
- 语言层面定义模块化规范，浏览器端和服务器端通用的模块化开发规范
定义：
- 每个js文件都是一个独立的模块
- 导出模块成员使用 export关键字
- 导入模块成员使用 import 关键字
node.js中通过babel使用es6模块化
- 安装bable
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
```
- 项目根目录创建文件babel.config.js
```
const presets = [
    ["@babel/env",{
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
];
module.exports = { presets };
```
- 通过命令执行代码
```
npx babel-node index.js
```
基本语法
- 默认导出与默认导入(每个模块只允许使用一次export default)
  
  export default 默认导出成员
  
  import 接收名称 from '模块标识符'
```
//m1.js
let a = 10;
let c = 20;
//不对外界暴露
let d = 30;

function show() {
    console.log('m1test')
}

export default {
  a,
  b,
  show,
};
```
```
//index.js
import m1 from './m1.js';

console.log(m1);
m1.show();
//输出{ a: 10, c: 20, show: [Function: show] }
```
- 按需导出和按需导入
  
  export let s1 = 10
  
  import { s1 } from '模块标识符'
```
//m1.js
export let s1 = '111';
export let s2 = '222';
export function say() {
  console.log('hello world!');
}
```
```
//index.js 可以与默认导入同时存在import m1,{ s1, s2 as ss2, say} from './m1.js';
import { s1, s2 as ss2, say} from './m1.js';

console.log(s1);
console.log(ss2);
console.log(say());
/* 结果
111
222
hello world!
 */
```
- 直接导入并执行模块代码
  
  使用场景：只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员
```
//m1.js 没有方法，只有代码片段
for (let i = 0; i < 3; i++) {
  console.log(i);
}
```
```
//直接导入并执行代码
import './m1.js'
/* result 
0
1
2 */
```
webpack使用

传统web开发困境
- 文件依赖关系复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级JavaScript特性兼容程度低
webpack概述

前端项目构建工具（打包工具）友好的模块化支持，处理js兼容问题，性能优化

基本使用
- 创建项目的空白目录，进入执行下面代码，初始化包管理配置文件
```
npm init -y
```
- 新建src源代码目录
- src下新建index.html
- 初始化首页基本结构（导入webpack打包之后的包）
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
    <script src="../dist/main.js"></script>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
</body>
</html>
```
- 安装jQuery
```
npm insatll jquery -S
```
- 通过模块化形式实现列表隔行变色（index.js）
```
import $ from 'jquery';

$(function () {
  $('li:odd').css('backgroundColor', 'pink');
  $('li:even').css('backgroundColor', 'lightblue');
});
```
- 运行命令安装webpack相关包
```
npm install webpack webpack-cli -D
```
- 项目根路径创建webpack.config.js的webpack配置文件
```
module.exports = {
    mode: 'development'// mode用来指定构建模式 开发不压缩代码
}
```
- 在package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：
```
"scripts": {
	"dev": "webpack" //scripts 节点下的脚本可以通过npm run 执行
}
```
- 在终端中运行下面命令，启动webpack进行项目打包
```
npm run dev
```
配置webpack打包的入口和出口
- 默认入口文件：src -> index.js
- 默认出口文件：dist -> main.js
修改入口和出口，在webpack.config.js 中新增下面配置信息
```
const path = require('path') //导入 node.js 中专门才做路径的模块
module.exports = {
    entry: path.join(__dirname,'./src/index.js'),//打包入口路径
    output: {
        path: path.join(__dirname,'./dist'),//输出文件存放位置
        filename: 'bundle.js'//输出文件名称
    }
}
```
配置webpack的自动打包功能

每次更新代码后都需要重新打包
- 安装支持项目自动打包的工具
```
npm install webpack-dev-server -D
```
- 修改 package.json --> scripts节点中dev命令
```
"scripts": {
	"dev": "webpack-dev-server" //scripts 节点下的脚本可以通过npm run 执行
}
```
- 将 src -> index.html中 script 脚本引用路径改为 "/buldle.js"
- 运行命令
```
npm run dev
```
- 浏览器中访问 http://locahost:8080 查看打包效果
备注
- webpack-dev-server 会启动一个实施打包的http服务器
- webpack-dev-server 打包生成的输出文件默认放到项目根路径，是虚拟的
配置html-webpack-plugin 生成预览页面

将src目录下的index.html页面复制到根目录，浏览器访问时直接访问首页
- 安装预览页面的插件
```
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 ] //plugins 数组是webpack打包期间会用到的一些插件列表
}
```
项目运行后自动打开浏览器

package.json配置
```
// --open 打包完成后自动打开浏览器
// --host 配置IP地址
// --port 配置端口
"scripts": {
	"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080" //scripts 节点下的脚本可以通过npm run 执行
}
```
webpack中的加载器

打包非js模块

webpack默认只打包处理 .js 后缀名的结尾的模块，其他模块需调用loader加载器才能正常打包，否则会报错

例如：
- less-loader: 可以打包处理 .less 文件
- sass-loader: 可以打包处理 .scss文件
- url-loader: 可以打包处理css中与url路径相关的文件
基本使用

打包处理css文件
- 创建1.css文件
```
li{
    list-style: none;
}
```
- index.js 中导入
```
import './css/1.css';
```
- 安装处理css文件的loader
```
npm i style-loader css-loader -D
```
- 在webpack.config.js 的module.exports --> module --> rules 数组中添加规则
```
module: {
	rules: [
        { test: /.css$/,use: ['style-loader','css-loader'] }
    ]
}
```
test 匹配文件类型（正则）use 表示对应调用的 loader

use 中配置的加载器顺序是固定的

打包处理less文件
- 安装less相关加载器
```
npm i less-loader less -D
```
- webpack.config.js 的module.exports --> module --> rules 数组中添加规则
```
module: {
	rules: [
        { test: /.less$/,use: ['style-loader','css-loader','less-loader'] }
    ]
}
```
打包sass文件
- 安装sass相关加载器
```
npm i sass-loader node-sass -D
```
- webpack.config.js 的module.exports --> module --> rules 数组中添加规则
```
module: {
	rules: [
        { test: /.sass$/,use: ['style-loader','css-loader','sass-loader'] }
    ]
}
```
配置postCSS自动添加兼容前缀
- 安装postCSS相关加载器
```
npm i postcss-loader autoprefixer -D
```
- 在项目根目录创建postcss 的配置文件 postcss.config.js
```
const autoprefixer = require('autoprefixer')//导入自动添加前缀的插件
module.exports = {
    plugins: { autoprefixer } //挂载插件
}
```
- webpack.config.js 的module.exports --> module --> rules 数组中添加/修改规则
```
module: {
	rules: [
        { test: /.css$/,use: ['style-loader','css-loader'，'postcss-loader'] }
    ]
}
```
打包样式表中的图片和字体文件
- 安装相关加载器
```
npm i url-loader file-loader -D
```
- webpack.config.js 的module.exports --> module --> rules 数组中添加规则
```
module: {
	rules: [
        { 
            test: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            use: 'url-loader?limit=16940'
        }
    ]
}
```
? 之后是loader的参数项

limit 用来指定图片的大小，单位是字节（byte），之后小于limit大小的图片，才会被转为base64图片

打包JavaScript的高级语法
- 安装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 的module.exports --> module --> rules 数组中添加规则
```
module: {
	rules: [
        { 
            test: /.js$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }
    ]
}
```
Vue 单文件组成

传统组件问题和解决方案

问题
- 全局定义的组件必须保证组件名称不重复
- 字符串模板没有语法高亮
- 不支持css
- 没有构建步骤限制，不能使用预处理器（babel）
解决方案
- 使用Vue单文件组件
基本用法

组成结构
- template: 组件模板区域
- script：业务逻辑区域
- style：样式区域
```
<template>
  
  <div></div>
</template>

<script>
//定义组件的业务逻辑
export default {
  data() {
    //私有数据
    return {};
  },
  methods: {},
};
</script>

<style scoped>
    /* 定义组件样式 scoped保证样式私有不冲突 */
</style>
```
webpack配置vue文件加载器
- 安装vue文件加载器相关包
```
npm i vue-loader vue-template-compiler -D
```
- webpack.config.js 的module.exports --> module --> rules 数组中添加规则
```
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  module: {
    rules: [{ test: /.vue$/, loader: 'vue-loader' }],
  },
  plugins: [
      //确保引入这个插件
      new VueLoaderPlugin()
  ] 
};
```
webpack项目中使用vue
- 安装vue
```
npm i vue -S
```
- 在src -> index.js 入口文件中通过导入vue构造函数
```
import Vue from 'vue'
```
- 创建vue实例对象，指定要控制的 el 区域
- 通过render函数渲染App根组件
```
import Vue from 'vue'
import App from './components/App.vue'

const vm = new Vue({
  el: '#app',
  render: h => h(App)
})
```
webpack打包发布
- 配置package.json文件，配置打包命令，该命令默认加载webpack.config.js 配置文件
```
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080",
    "bulid": "webpack -p"
  }
```
- 运行打包命令(最好打包之前删除dist目录)
```
npm run bulid
```
Vue脚手架

用于快速生成Vue项目的基础架构

安装
- 安装Vue脚手架
```
npm install -g @vue/cli
```
创建项目
- 方式一：交互式命令
```
vue create my-project
```
- 方式二：图形化界面
```
vue ui
```
- 方式三：基于 2.0 的旧模板创建旧版vue项目
```
npm install -g @vue/cli-init
vue init webpack my-project
```
自定义配置
- 通过 package.json 配置项目，新增下面代码，配置端口和自动打开浏览器
```
  "vue": {
    "devServer": {
      "port": 8888,
      "open": true
    }
  }
```
不推荐此方式，package.json 主要是管理包的配置信息的。为了方便维护，推荐将配置单独定义到 vue.config.js 中
- 通过单独配置文件配置项目，项目根目录创建文件 vue.config.js
```
module.exports = {
  devServer: {
    port: 8888,
    open: true
  }
}
```
Element-UI 的基本使用

一套为开发者，设计师和产品经理准备的基于 Vue 2.0 的桌面组件库

基于命令行安装
- 安装依赖包
```
npm i element-ui -S
```
- 导入 Element-UI 相关资源
```
//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件
Vue.use(ElementUI)
```
基于图形化界面自动安装
- 运行图形化界面命令
```
vue ui
```
- 通过 Vue 项目管理器进入具体的项目配置面板
- 点击插件 --> 添加插件进入插件查询面板
- 搜索 vue-cli-plugin-element 并安装
- 配置插件，实现按需导入，从而减少打包后的项目体积
查看全文

相关阅读:
android进度条
 编解码器的学习笔记（十）：Ogg系列
 logcat使用
 KNN算法的理解
 Ewebeditor最新漏洞和漏洞指数
 HDU 4945 2048(DP)
喜大本\ u0026普，微软的开源
 Problem A: Artificial Intelligence?
Response.Redirect 打开这两种方法的一种新形式
 java Map 之排序（key,value）

原文地址：https://www.cnblogs.com/erkye/p/12839220.html

Vue学习笔记5--前端工程化

前端工程化

模块化相关规范

概述

浏览器端模块化规范

服务器端模块化规范

大一统模块发规范：ES6模块化

基本语法

webpack使用

传统web开发困境

webpack概述

基本使用

配置webpack打包的入口和出口

配置webpack的自动打包功能

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

项目运行后自动打开浏览器

webpack中的加载器

打包非js模块

基本使用

打包处理css文件

打包处理less文件

打包sass文件

配置postCSS自动添加兼容前缀

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

打包JavaScript的高级语法

Vue 单文件组成

传统组件问题和解决方案

基本用法

组成结构

webpack配置vue文件加载器

webpack项目中使用vue

webpack打包发布

Vue脚手架

安装

创建项目

自定义配置

Element-UI 的基本使用

基于命令行安装

基于图形化界面自动安装