• Vue前端工程化


    前端工程化

    1.模块化

    传统开发模式的主要问题:命名冲突(重名变量覆盖)、文件依赖(js文件相互引用)

    模块化:把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。

    好处:方便代码的重用,从而提升开发效率,并且方便后期的维护。

    • 浏览器端模块化规范

      AMD:require.js

      CMD:sea.js

    • 服务器端模块化规范

      CommonJS:

      ​ 模块分为单文件模块与包;

      ​ 模块成员导出:module.exportes和exports;

      ​ 模块成员导入:require('模块标识符')

    • 大一统——ES6模块化

      每一个js文件都是一个独立的模块

      导入模块成员使用import关键字

      暴露模块成员使用export关键字

    2.ES6模块化语法

    • 默认导出,只允许使用一次
    // export default 默认导出的成员
    export default {
    // 导出内容
        
    }
    
    • 默认导入
    // import 接受名称 from '模块标识符'
    import m1 from './m1.js'
    
    • 按需导出,可以使用多次
    export let s1 = 10
    export function say(){
        console.log('aaa');
    }
    
    • 按需导入
    import {s1 as ss2} from '模块标识符'
    
    • 直接导入并执行模块代码
    // import '模块标识符'
    import './m2.js'
    

    3.webpack

    当前web开发面临的困境:文件依赖关系错综复杂、静态资源请求效率低、模块化支持不友好、浏览器对高级JavaScript特性兼容程度较低……

    webpack:前端项目构建工具(打包工具),解决当前web开发中面临的困境

    提供友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大功能,提高开发效率和项目的可维护性。

    ①基本使用

    案例:列表隔行变色

    1. 新建项目空白目录,并运行npm init -y,初始化包管理配置文件package.json
    2. 新建src源代码目录
    3. 新建src->index.html首页
    4. 初始化首页基本的结构
    5. 运行npm install jquery -S,安装jQuery
    6. 通过模块化的形式,实现列表隔行变色
    • 在项目中安装和配置webpack,处理js兼容问题

      1. 运行npm install webpack webpack-cli -D,安装webpack相关的包

      2. 在项目根目录中哦,创建webpack.config.js的webpack配置文件

      3. 在webpack的配置文件webpack.config.js中,初始化基本配置

    module.exports={
        mode:'development' //mode指定构建模式 development / production
    }
    
    1. 在package.json配置文件中的scripts节点下,新增dev脚本
    "scripts":{
        "dev":"webpack" // script节点下的脚本,可以通过npm run执行
    }
    
    1. 在终端中运行npm run dev,启动webpack进行项目打包
    • 配置打包的入口和出口

      在webpack的配置文件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' // 输出文件的名称
        }
    }
    
    • 配置自动打包

      1. 运行npm install webpack-dev-server -D,安装支持项目自动打包的工具

      2. 修改package.json->scripts中的dev命令

    "scripts":{
       "dev":"webpack-dev-server" // script节点下的脚本,可以通过npm run执行
    }
    
    1. 将src->index.html中的,script脚本的引用路径修改为’/buldle.js‘

    2. 运行npm run dev,重新打包

    3. 在浏览器中访问http://localhost:8080,查看打包效果

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

      把index复制一份到根目录

      1. 运行npm install html-webpack-plugin -D,安装生成预览页面的插件

      2. 修改webpack.config.js文件头部区域,添加配置信息

    //导入生成预览页面的插件,得到一个构造函数
    const HtmlWebpackPlugin = require ( 'html-webpack-plugin' )
    const htmlPlugin = new HtmlwebpackPlugin({ //创建插件的实例对象
       template: './src/index.html',//指定要用到的模板文件
       filename: 'index.html'//指定生成的文件的名称,该文件存在于内存中,在目录中不显示
    })
    
    1. 修改文件中向外暴露的配置对象,新增如下配置节点
    module.exports = {
    	plugins: [ htmlPlugin ] //plugins数组是webpack打包期间会用到的一些插件列表
    }
    
    • 配置自动打包的相关参数

      package.json

      --open:打包完成后自动打开浏览器页面

      --post:IP地址

      --port:端口号

    "scripts":{
      "dev":"webpack-dev-server --open --host 127.0.0.1 --port:8888" 
    }
    

    配置完成后,重启 npm run dev

    ②加载器loader

    webpack默认只能打包处理.js的模块。

    loader加载器:协助webpack打包处理特定的文件模块

    • 通过loader打包非js模块

      less-loader:打包处理.less相关文件

      sass-loader:打包处理.scss相关文件

      url-loader:打包处理css中与url路径相关的文件

    • 调用过程

    image-20200901103155484
    • 基本使用

      • css文件

        1. 运行npm i style-loader css-loader -D,安装处理css的loader

        2. 在webpack.config.js的module->rules数组中,添加loader规则

          test:匹配的文件类型;

          use:对应要调用的loader,书写顺序固定,调用顺序:从后往前调用

    //所有第三方文件模块的匹配规则
    module: {
       rules: [
       	{ test: /.css$/, use: [ 'style-loader', 'css-loader'] }
       ]
    }
    
    • less文件

      1. 运行npm i less-loader less -D,安装处理less的loader

      2. 在webpack.config.js的module->rules数组中,添加loader规则

    { test: /.less$/, use: [ 'style-loader', 'css-loader','less-loader'] }
    
    • scss文件

      1. 运行npm i sass-loader node-sass -D,安装处理scss的loader

      2. 在webpack.config.js的module->rules数组中,添加loader规则

    { test: /.scss/, use: [ 'style-loader', 'css-loader','sass-loader'] }
    
    • postCSS自动添加css的兼容性前缀

      1. 运行npm i postcss-loader autoprefixer -D

      2. 在项目根目录中创建postcss的配置文件postcss.config.js,并初始化如下配置

    const autoprefixer = require ( 'autoprefixer')//导入自动添加前缀的插件
    module.exports = {
    	plugins: [ autoprefixer ] //挂载插件
    }
    
    3. 在webpack.config.js的module->rules数组中,修改css的loader规则
    
    { test:/.css$/,use: ['style-loader','css-loader','postcss-loader'] }
    
    • 打包样式表中的图片和字体文件

      1. 运行npm i url-loader file-loader -D

      2. 在webpack.config.js的module->rules数组中,添加loader规则

        ?之后的参数limit用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片才会被转为base64图片

    { test: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: 'url-loader?limit=16940'}
    
    • 打包处理js文件中的高级语法

      1. 安装babel转换器相关的包:npm i babel-loader @babel/core @babel/runtime -D

      2. 安装babel语法插件相关的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

      3. 在项目根目录中,创建babel配置文件babel.config.js,并初始化配置

    module.exports = {
    	presets: ['@babel/preset-env'],
    	plugins: ['babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
    }
    
    4. 在webpack.config.js的module->rules数组中,添加loader规则
    
    //exclude为排除项,表示babel-loader不需要处理node_modules 中的js文件
    { test: /.js$/,use: 'babel-loader',exclude: /node_modules/}
    

    4.Vue单文件组件

    传统组件的问题

    1. 全局定义的组件必须保证组件的名称不重复
    2. 字符串模板缺乏语法高亮,在html多行时,需要用到
    3. 不支持css意味着html和JavaScript组件化时,css被遗漏
    4. 没有构建步骤限制,只能使用html和es5 JavaScript,而不能使用预处理器如Babel

    解决方案:使用Vue单文件组件

    ①基本用法

    后缀名.vue

    • 组成结构

      template:组件的模块区域【结构】

      script:业务逻辑区域【行为】

      style:样式区域【表现】

    <template>
    	<div>
          <h1>APP根组件</h1>
      </div>
    </template>
    
    <script>
    export default{
      data(){
          return {}
      },
      methods:{}
    };
    </script>
    
    <style scoped>
      h1{
          color:red;
      }
    </style>
    

    ②webpack中配置vue组件的加载器

    1. 运行npm i vue-loader vue-template-complier -D

    2. 在webpack.config.js的module->rules数组中,添加vue-loader的规则

    const vueLoaderPlugin = require ('vue-loager/lib/plugin')
    module.exports = {
       module: 
           rules: [
               // ...其它规则
               {test: /.vue$/,use: 'vue-loader'}
               ]
           },
    	plugins: [
    		//...其它插件
           new vueLoaderPlugin() //请确保引入这个插件!
    	]
    

    ③在webpack项目中使用vue

    1. 运行npm i vue -S安装vue
    2. 在src->index.js入口文件中,通过import vue from 'vue'来导入vue构造函数
    3. 创建vue的实例对象,并指定要控制的el区域
    4. 通过render函数渲染App根组件
    // 1.导入vue构造函数
    import,vue from 'vue'
    // 2.导入单文件组件  App根组件
    import App from './ components/App . vue'
    
    const vm = new vue ( {
        // 3.指定vm实例要控制的页面区域
        el: '#app ',
        // 4.通过render函数,把指定的组件渲染到el区域中
        render: h => h(App)
    })
    
    

    ④webpack打包发布

    上线之前需要通过webpack将应用进行整体打包,可以通过package.json文件配置打包命令

    //在package.json文件中配置webpack打包命令
    //该命令默认加载项目根目录中的webpack.config.js配置文件
    "scripts": {
        // 用于打包的命令
        "build" : "webpack -p",
        //......
    },
    

    配置文件后,运行npm run build

    5.Vue脚手架

    用于快速生成vue项目基础架构。npm install -g @vue.cli

    error:先卸载旧版本再安装

    ①基本用法

    npm run server

    1. 基于交互式命令行的方式

      vue create my-project

    2. 基于图形化的方式

      vue ui

    3. 基于2.x的旧模板

      npm install -g @vue/cli-init

      vue init webpack my-project

    ②项目结构分析

    image-20200901105115491

    ③自定义配置

    1. 通过package.json配置,不推荐,建议单独定义到vue.config.js配置文件中
    //必须是符合规范的json语法
    
    //端口号 自动打开浏览器
    "vue": {
       "devserver" : {
           "port": "8888",
           "open" : true
       }
    }
    
    1. 通过单独的配置文件配置

      • 在项目根目录创建文件vue.config.js
      • 在该文件中进行相关配置,从而覆盖默认配置
    module.exports={
       devServer : {
           port: 8888,
           open: true
       }
    }
    

    6.Element-UI

    基于vue2.0的桌面端组件库

    ①基本使用

    • 方法一
    1. 安装依赖npm i element-ui -S

    2. 导入Element-UI相关资源

    // main.js
    
    //导入组件库
    import ElementUI from 'element-ui';
    //导入组件相关样式
    import 'elemgnt-ui/lib/theme-chalk/index.css';
    //配置vue插件
    vue.use (ElementUI);
    
    • 方法二
    1. 运行vue ui命令,打开图形化界面
    2. 通过vue项目管理器,进入具体的项目配置面板
    3. 点击插件->添加插件,进入插件查询面板
    4. 搜索vue-cli-plugin-element并安装
    5. 配置插件,选择按需导入import on demand,从而减少打包后项目的体积
  • 相关阅读:
    Mysql-windows安装
    go-jwt生成token
    github下载慢的问题
    mysql主从复制(二)
    软件下载网站推荐
    Ubuntu14.04 安装ssh
    Ubuntu14.04 更换镜像源
    docker安装记录
    k8s安装记录
    Docker(一):Docker入门教程
  • 原文地址:https://www.cnblogs.com/wattmelon/p/13594981.html
Copyright © 2020-2023  润新知