首页 > 其他分享> 文章详细

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

2020-05-06 22:03:25 阅读：194 来源： 互联网

标签：npm Vue 笔记 loader webpack vue module 工程化 js

前端工程化

模块化相关规范

概述

传统开发问题

命名冲突
文件依赖

模块化

含义：把单独的一个功能封装到一个模块（文件）中,模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖别的模块
好处：方便代码重用，提升开发效率，方便后期维护

浏览器端模块化规范

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>

    <!-- 导入转换之后的js文件 -->
    <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 并安装
配置插件，实现按需导入，从而减少打包后的项目体积

标签：npm,Vue,笔记,loader,webpack,vue,module,工程化,js
来源： https://www.cnblogs.com/erkye/p/12839220.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

前端工程化

模块化相关规范

概述

浏览器端模块化规范

服务器端模块化规范

大一统模块发规范：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 的基本使用

基于命令行安装

基于图形化界面自动安装