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打包之后的包)




    
    
    Document

    
    


    
  • 这是第1个li
  • 这是第2个li
  • 这是第3个li
  • 这是第4个li
  • 这是第5个li
  • 这是第6个li
  • 这是第7个li
  • 这是第8个li
  • 这是第9个li
  • 安装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:样式区域






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 并安装
  • 配置插件,实现按需导入,从而减少打包后的项目体积

你可能感兴趣的:(Vue学习笔记5--前端工程化)