。。

。。 查看完整档案

福州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

。。 发布了文章 · 2月25日

进阶TypeScript

TypeScript

1. 类型定义:

  • boolean:

    const test: boolean = false
  • number:

    const test: number
  • string:

    const test: string = ''
  • Array:

    const test: number[] = [1,2,3]
    const test: Array<number> = [1,2,3] // Array<number>泛型语法
  • Enum枚举类型:

    // 无初始值,默认为0开始
    enum Test {
        FIRST,
        SECOND,
        THIRD
    }
    // 又初始值,从初始值累加
    enum Test {
        FIRST = 2,
        SECOND,
        THIRD
    }
    
    // 字符串枚举(TypeScript 2.4 开始)
    
    enum Test {
        FIRST = 'FIRST',
        SECOND = 'SECOND',
        THIRD = 'THIRD'
    }
    
    // 异构枚举 (数字和字符串的混合)
    
    enum Test {
        FIRST,
        SECOND = ‘A’,
        THIRD = 8
    }
  • any类型:(顶级类型,任何类型都可以被归为 any 类型)

    const test:any = 666
  • unknown类型:(顶级类型, 所有类型也都可以赋值给 unknown

    let val = unknown
    
    val = true; // OK
    val = 42; // OK
    val = "Hello World"; // OK
    val = []; // OK
    val= {}; // OK
    val = null; // OK
    val = undefined; // OK
  • Tuple元组类型:

    const test: [string, number] = ['test', 123]
  • void类型:

    const fn = ():void => {
        console.log('test')
    }
  • null 和 undefined: (nullundefined 是所有类型的子类型)

    const test: undefined = undefined
  • never类型(表示的是那些永不存在的值的类型)

    function test(): never {
      while (true) {}
    }

2. 接口 (interface)

  • 接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。
  • 基础示例:

    interface person {
        name: sting,
        age: number
    }
    
    const test: person = {
        name: '小明'
    }// 此时会报错,需要实现接口所有属性
    
    const test: person = {
        name: '小明',
        age: 11
    } // ok
  • 可选属性:

    interface person {
        name: sting,
        age?: number
    }
    
    const test: person = {
        name: '小明'
    } // ok
    
  • 只读属性:

    interface person {
        readonly name: sting
    }
    const test: person = {
        name: '小明'
    }
    test.name = '小黑' // error
  • 联合类型:

    interface person {
        age: sting | number
    }
    
    const test: person = {
        age: '25岁'
    } // ok
    
    const test2: person = {
        age: 25
    } // ok
  • 接口继承:

    interface person {
      name: string
    }
    
    interface surperMan extends person{
        age: number
    }
    
    const test: surperMan = {
        age: 25
    } // error,需要实现name

3. class类:

  • 基础使用:

    class Test {
        name: string
        constructor (name:string) {
            this.name = name
        }
    }
  • 继承:

    class ExtendTest extends Test {
        constructor (name: string) { 
            super(name)
        }
        getName (): string {
            return `名字是:${this.name}`
        }
    }
  • 重写:

    class RewriteTest extends ExtendTest {
        constructor (name: string) { 
            super(name)
        }
        getName (): string {
            return `这是重写的方法:${this.name}
        }
    }
  • readonly修饰符:

    class Test {
        readonly name: string
        constructor (name:string) {
            this.name = name // 必须初始化
        }
    }
    // 此时name属性不可更改
  • Getter And Setter:

    class Test {
        private _name:string
        set name (name: string) {
            this._name = name
        }
        get name ():string {
            return this._name
        }
    }
  • 静态属性:

    class Test {
        static name:string = '小明'
    }
    // 此时无需实例化,便可直接访问name属性
  • 抽象类:

    abstract class Test {
        name:string
        abstract say() // 不要具体的实现
    }
    class AbstractTest extends Test{
        // 必须实现父类的抽象方法
        say(){
            console.log(`i’m saying`);
        }
    }

4. 函数:

  • 基础使用:

    function sum(x: number, y: number): number {
        return x + y
    } // 一个函数有输入和输出,要在 TypeScript 中对其进行约束,需要把输入和输出都考虑到, 输入多余的(或者少于要求的)参数,是不被允许的:
  • 可选参数:

    function buildName(firstName: string, lastName?: string):string {
        if (lastName)
            return firstName + " " + lastName;
        else
            return firstName;
    }
  • 默认参数:

    function sum(price:number, rate:number = 0.50): number { 
        const result = price + rate; 
        console.log("计算结果: ",result); 
        return result
    } 

5. 类型断言:

  • 尖括号语法:

    const str: any = "this is a string"
    const length:number = (<string>str).length
  • as语法:

    const str: any = "this is a string"
    const length:number = (str as string).length

6. 泛型:

当我们并不知道返回类型时,泛型函数就解决了这样的问题

  • 基础用法

    function r<T>(args: T): T {
      return args;
    }
    r("icepy");
    r(100)
    r(true)
    // 虽然这看起来和 Any 非常的类似, 由于我们定义的是泛型函数,因此它并不会丢失类型,反而会根据我们传入的参数类型而返回一个类型,这也意味着我们可以将它适用于多个类型。
  • 泛型类:

    class Test<T>{
      public add?: (x: T, y: T) => T;
    }
    
    const test = new Test<number>();
    test.add = (x: number, y: number): number => {
      return x + y;
    }
查看原文

赞 0 收藏 0 评论 0

。。 发布了文章 · 2月23日

Vue Cli对比

vue脚手架2.0和4.0+的对比

1. 命令:

  • 安装

    // 2.0
    npm install vue-cli -g
    // 4.0+
    npm install -g @vue/cli
  • 初始化一个新项目:

    // 2.0
    默认标准版:vue init webpack 项目名
    简化版: vue init webpack-slimple 项目名
    // 4.0+
    vue create 项目名称
    注:安装@vue/cli需要先卸载vue-cli,如需要同时使用vue-cli和@vue/cli
    请安装:npm install -g @vue/cli-init -g //安装完后 就还可以使用 vue init 命令
    
    
    另外在终端输入
       vue ui
    将会在浏览器打开一个页面,可通过可视化的方式新建一个项目

    附上选项:

    Please pick a preset: 选择配置

    • Default ([Vue 2] babel, eslint) // vue2默认配置
    • Default (Vue 3 Preview) ([Vue 3] babel, eslint) // vue3默认配置
    • Manually select features // 手动挑选

      • 可选项:
      • | | | | |
        | :--- | --------------------------------- | ------------------------------------------------------------ | ---- |
        | 序号 | 选项 | 描述 | |
        | 1 | Choose Vue version | 选择Vue版本 | |
        | 2 | Babel | vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5 | |
        | 3 | TypeScript | TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript,TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器,任何操作系统,任何运行JavaScript的地方。 完全开源 | |
        | 4 | Progressive Web App (PWA) Support | 渐进式Web应用程序(PWA)支持 | |
        | 5 | Router | 路由 | |
        | 6 | Vuex | Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 | |
        | 7 | CSS Pre-processors | CSS预处理器,预处理器:比如要用sass或者cssNext就要按照人家规定的语法形式,就是用人家的语法去编写,然后人家把你编写的代码转成css。 | |
        | 8 | Linter / Formatter | 格式化程序 | |
        | 9 | Unit Testing | 单元测试 | |
        | 10 | E2E Testing | 端到端测试(end-to-end) | |

    Pick the package manager to use when installing dependencies: // 选择安装依赖项时要使用的包管理器

    • Use Yarn 默认值
    • Use NPM

    ​ yarn和npm都是包管理工具,但是yarn是崭新的,经过重新设计的npm客户端,于2016年10月发布,相比于npm,yarn在运行速度上有显著的提升,安装时间变少,功能上也有很多改进, yarn的优点:安装速度快 (服务器速度快 , 并且是并行下载和离线模式) 版本锁定 缓存机制

    可参照npm和yarn的区别进一步了解

    • 安装依赖:

      初始化之后需要npm install安装所需要的依赖,而4.0+则无需该操作,在初始化时已自动下载

    • 运行:

       // 2.0
       npm run dev
       // 4.0+
    
    - 组件库手动选择配置:
    
      Check the features needed for your project:
      (\*) Choose Vue version  // 指定vue版本
      (\*) Babel // babel编译
      (\*) TypeScript 
      ( ) Progressive Web App (PWA) Support // 是否支持**渐进式网页应用**(pwa)可见[简单介绍一下Progressive Web App(PWA)](https://juejin.cn/post/6844903556470816781)
      ( ) Router
      ( ) Vuex
      (\*) CSS Pre-processors // 是否启用css预处理器,如sass,stylus
      (\*) Linter / Formatter // 是否进行代码格式化校验,如eslint
      (\*) Unit Testing // 测试框架的引入
    
      ( ) E2E Testing
      
      Choose a version of Vue.js that you want to start the project with (Use arrow keys)  // 选择项目内的vue的版本
      
      > 2.x
       
      3.x (Preview)  
      
      Use class-style component syntax? **YES**   // 是否使用class风格的组件语法(TypeScript)
      
      Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?**YES**  // 是否使用babel做ts转义和提供对jsx的支持
      
      Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) // 选择css预编译器**Sass/SCSS +node-        sass**
    
      Sass/SCSS (with dart-sass)
      
      >Sass/SCSS (with node-sass)
      
      Less
      
      Stylus
    
      ​Pick a linter / formatter config: (Use arrow keys)  // 选择语法检查方式 使用标准版的eslint进行格式校验,tslint已在2019停止维护,并向eslint迁移[放弃 TSLint,使用 ESLint](https://blog.csdn.net/qq_37164975/article/details/109766695)。
    
      ESLint with error prevention only
    
      ESLint + Airbnb config
    

ESLint + Prettier

TSLint (deprecated)


Pick additional lint features: (Press <space> to select, to toggle all, to invert selection)   // 代码检查的触发时机  **保存就检查**  
(*) Lint on save
( ) Lint and fix on commit 

pick a unit testing solution: (Use arrow keys) // 选择测试解决方案  **Jest**

Mocha + Chai
>Jest

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)  // 希望将eslint的配置和babel的配置放在哪   

>In dedicated config files

In package.json

Save this as a preset for future projects? (y/N)   **NO**  保存该配置为以后其他项目的预设

2. 目录:

vue-cli2.0+@vue/cli4.0+
- build // 项目构建(webpack)相关代码
--- build.js // 生产环境构建代码<br/>--- check-version.js // 检查node、npm等版本
--- dev-client.js // 热重载相关
--- dev-server.js // 构建本地服务器
--- utils.js // 构建工具相关
--- webpack.base.conf.js // webpack基础配置
--- webpack.dev.conf.js // webpack开发环境配置
--- webpack.prod.conf.js // webpack生产环境配置

- config // 项目开发环境配置
--- dev.env.js // 开发环境变量
--- index.js // 项目一些配置变量
--- prod.env.js // 生产环境变量
--- test.env.js // 测试环境变量

- src // 源码目录
--- components // vue公共组件
--- asset // 静态资源
--- store // vuex的状态管理
--- App.vue // 页面入口文件
--- main.js // 程序入口文件,加载各种公共组件

-static // 静态文件,比如一些图片,json数据等
.babelrc // babel编译配置
.gitignore // git上传需要忽略的文件格式
README.md // 项目说明
package.json // 项目基本信息
.eslintrc.js // Eslint的配置文件
-public // 公共文件夹
---index.html //入口的html文件

-src
---assets //放置静态文件的目录
---components // vue公共组件
---App.vue // 页面入口文件
---main.ts // 入口文件,因为采用了TypeScript所以是ts结尾
---shims-vue.d.ts // 定义文件, 为了在vue文件中能识别到ts部分
.browserslistrc // 在不同前端工具浏览器和node版本的配置文件作用是设置兼容性
.eslintrc.js // Eslint的配置文件,不用作过多介绍
.gitignore //git上传需要忽略的文件
package.json // 项目基本信息
README.md // 项目说明
tsconfig.json
  • 移除了配置文件目录 config 和 build 文件夹,如果需要自定义配置,需要自己新建vue.config.js文件
  • 移除了 static 静态资源文件夹,新增 public 文件夹,静态资源转移到public目录中,通过/xx.xx可以直接访问,并且 index.html 移动到 public 中
  • 目录结构更加简洁

3.webpack打包:

  • 默认版本不同:

    2.0 + 一般采用webpack3

    4.0 + 一般采用webpack4

    可参照Webpack4.x实践了解更多关于webpack4的内容以及和webpck3之间区别

  • 目录不同:

    • 2.0 + 的目录内存在一个build文件夹存放webpack的各种配置

      +----- build

      ​ ------ build.js // 生产环境构建

      ​ ------ check-versions.js // 检查版本(node, nmp)

      ​ ------ utils.js // 构建所需的相关工具

      ​ ------ vue-loader.conf.js // vue的各种loader配置

      ​ ------ webpack.base.conf.js // webpack基础配置

      ​ ------ webpack.dev.conf.js // webpack开发环境的配置

      ​ ------ webpack.prod.conf.js // webpack生产环境的配置

    • 4.0 + 将webpack的基础配置全部内嵌了,提供了集成的默认值,在目录中将不再出现webpack的config配置

      那么,需要进行特异化的配置的时候怎么办呢?

      官方提供了一个vue.config.js文件进行修改配置

      另可参照vue.config.js 配置 以及 vue 4.0 vue.config.js 配置实战

  • 打包效率:

    4.0 + 在打包和运行效率上要更优于2.0 +

  • 灵活性:

    • cli2个性化强一些,可以更友好的配置webpack。
    • cli4通用性强一些,达到真正的开箱即用,几乎零配置,已经将最适合开发的配置打包封装。

vue cli 3.0和4.0的对比:

两者区别较小

  1. 两者在命令上是一样的
  2. 4.0相比较于3.0有更丰富的自定义选项
  3. 目录上:(3.0 > 4.0)

    • 主要是路由和vuex默认目录的变化
  4. babel配置上babel预设由@vue/appvue / babel-preset-app 改成了@vue/cli-plugin-babel/preset

优化了编译和打包效率

  1. 依赖的升级
  • "@vue/cli-plugin-babel" 由v3 的版本升级到了 v4
  • "@vue/cli-plugin-eslint" 由v3 的版本升级到了 v4
  • "@vue/cli-service" 由v3 的版本升级到了 v4
  • sass-loader由 v7 的版本升级到了 v8
  • core-js由 v2 的版本升级到了 v3
  • webpack-chain由 v4 的版本升级到了 v6
  • css-loader由 v1 的版本升级到了 v3
  • url-loader由 v1 的版本升级到了 v2
  • file-loader由 v3 的版本升级到了 v4
  • copy-webpack-plugin由 v4 的版本升级到了 v5
  • erser-webpack-plugin由 v1 的版本升级到了 v2
  • @vue/cli-plugin-pwa由 v3 的版本升级到了 v4
  • 新增插件 vue add vuex vue add router
  • pug-plain已重命名为pug-plain-loader
  • 废弃vue-cli-service test:e2e
  • @vue/cli-plugin-unit-mocha 升级到Mocha 6
  • @vue/cli-plugin-unit-jest jest由 v23 升级到v24
  • @vue/cli-plugin-typescript 更好的ts(x)支持 ,胜过js(x)
查看原文

赞 1 收藏 1 评论 0

。。 发布了文章 · 2月23日

在vuepress中实现类似element-ui 的代码预览效果

在vuepress中实现类似element-ui 的代码预览效果

1. vuepress-plugin-demo-container

  1. 介绍:是一个基于 Vuepress 的插件,它可以帮助你在编写文档的时候增加 Vue 示例,它的诞生初衷是为了降低编写组件文档时增加一些相关示例的难度
  2. 基本实现原理:

    Demo Container 使用 Vuepress 的 chainMarkdown、extendMarkdown API 拓展了其内部的 markdown 对象,以特定规则识别代码块,扩展markdown.render方法已实现最终渲染。

    1. 其他类似选项:

2. 引入:

    1. 安装:

      npm install vuepress-plugin-demo-container --save-dev
    1. .vuepress/config.js中配置:

      module.exports = {

      ​ plugins: ['vuepress-plugin-demo-container']

      这里因为是以vuepress-plugin开头,也可以写作

      module.exports = {

      ​ plugins: ['demo-container']

    3. 使用方法

    ​ 在vuepress中,可在markdown文件中直接写vue语句

    ​ 那么示例代码写为

    ​ ::: demo 测试文档编写

    ​ \``` vue

    ​ <template>

             <test></test>
    

    ​ </template>

    ​ <script>

         export default {
    
              data  () {
    
                   return {
    
                   }
    
              }
    

    ​ };

    ​ </script>

    ​ \```

    ​ :::

    ​ 这时此代码块将被渲染为element-ui的代码预览效果。

    查看原文

    赞 0 收藏 0 评论 0

    。。 发布了文章 · 2月23日

    css预处理器

    css预处理器

    1. scss的使用

    Sass是成熟、稳定、强大的CSS预处理器,而SCSS是2010年5月的Sass3版本当中引入的新语法特性,种语法旨在通过引入CSS友好语法来缩小Sass和CSS之间的差距。完全兼容CSS3的同时继承了Sass强大的动态功能。

    • sass和scss的区别

      • 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
      • 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
      // sass语法:
      $font-stack: Helvetica, sans-serif  //定义变量
      $primary-color: #333 //定义变量
      body
        font: 100% $font-stack
        color: $primary-color
      
      // scss语法:
      $font-stack: Helvetica, sans-serif;
      $primary-color: #333;
      body {
        font: 100% $font-stack;
        color: $primary-color;
      }
    • scss变量

      变量用来存储需要在CSS中复用的信息,例如颜色和字体。SASS通过$符号去声明一个变量。

      $primary-color: #333;
      body {
        color: $primary-color;
      }
    • scss嵌套:

      nav {
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          li { 
            display: inline-block;
            &>a { // 父选择器的标识符&
              color: red
            }
          }
        }
      }
    • @import引入

      // _reset.scss
      html, body, ul, ol {
        margin:  0;
        padding: 0;
      }
      
      // base.scss
      @import 'reset';
      body {
        font: 100% Helvetica, sans-serif;
        background-color: #efefef;
      }

      在scss中引入scss文件时可以省略文件扩展名

    • 函数:

      • sass自带函数max, min, ceil, floor, 查看所有自带函数列表
      • 自定义函数:

        @function addWidth($width1,$width2){
          @return $width1+$width2;
        }
        div{
          width:addWidth(100px,20px);
        }
    • Mixin混入

      混合(Mixin)用来分组那些需要在页面中复用的CSS声明,开发人员可以通过向Mixin传递变量参数来让代码更加灵活,该特性在添加浏览器兼容性前缀的时候非常有用,SASS目前使用@mixin name指令来进行混合操作。

      @mixin rounded-corners {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
      }
      
      .notice {
        background-color: green;
        border: 2px solid #00aa00;
        @include rounded-corners;
      }

      可以通过在引入混合器时给混合器传参,来定制混合器生成的精确样式。这样方式跟JavaScript的Function很像:

      @mixin link-colors ($normal, $hover, $visited) {
        color: $normal;
        &:hover { color: $hover ;}
        &:visited { color: $visited; }
      }
      a {
        @include link-colors(blue, red, green)
      }
    • @extend继承

      .error {
        border: 1px solid red;
        background-color: #fdd;
      }
      .seriousError {
        @extend .error;
        border-width: 3px;
      }
    • deep深度作用选择器

      <style lang="scss" scoped>
        .button-box{
          /deep/ .el-button{
            padding: 13px 50px;
          }
        }
      </style>
    • 基础运算:

      // 加:+
      .div1{
        width: 10px+10px;
      }
      .div2{
        width: 10px+10;
      }
      
      // 减:-
      .div1{
        width: 10px-5px;
      }
      .div2{
        width: 10px-5;
      }
      
      // 乘: *
      .div1{
        width: 10px*px; //报错
      }
      .div2 {
        width: 20px; 
      }
      
      除:/
      .div1{
        //不正确
        width: 10px/2;
      }
      .div2{
        //不正确
        width: 10px/2px;
      }
      .div3{
        //不正确
        width: (10px/2px);
      }
      .div4{
      //正确
        width: (10px/2);
      }
    • 插值语句

      $height:10px;
      $name:height;
      .div-#{$name}{
        #{$name}: #{$height};
      }
    • @if、@for、@each、@while

      $type: monster;
      p {
        @if $type == ocean {
          color: blue;
        } @else if $type == matador {
          color: red;
        } @else if $type == monster {
          color: green;
        } @else {
          color: black;
        }
      }
      @mixin does-parent-exist {
        @if & {
          &:hover {
            color: red;
          }
        } @else {
          a {
            color: red;
          }
        }
      }
      // 如果没有父选择器,&的值将是空,你可以在一个mixin中使用它来检测父选择是否存在
      @for $i from 1 through 3 {
        .item-#{$i} { width: 2em * $i; }
      }
      
      // 等于
      .item-1 {
        width: 2em;
      }
      
      .item-2 {
        width: 4em;
      }
      
      .item-3 {
        width: 6em;
      }

    2. less的使用

    less是一门css预处理它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

    • 嵌套:

      .container {

      h1 {
        font-size: 25px;
        color:#E45456;
      }
      p {
          font-size: 25px;
          color:#3C7949;
      }
      .myclass {
        h1 {
          font-size: 25px;
          color:#E45456;
        }
        p {
          font-size: 25px;
          color:#3C7949;
        }
      }

      }

    • 变量:

      // 在less中使用@XXX定义变量
      @width: 10px;
      @height: @width + 10px;
      
      #header {
        width: @width;
        height: @height;
      }
      @b: box
      @rem: 64px;
      #{@b}1 {
        width: @width*2;
        height: @width*@rem;
        background: red;
      }
      // 写在{}之间 叫做局部变量,只可以在{}之间起作用
      .box {
        @width: 200px; 
        width: @width;
      }
      
    • 混入

      // 不带参数,无默认值
      .div1 {
        width:200px;
        height:200px;
        backgorund-color;red;
      }
      .div2 {
        border:1px solid red;
        .div1
      }
      // 带参数,无默认值
      .div1(@w) {
        border:solid red @w;
      }
      .div2 {
        widthz;200px;
        height:200px;
        .div2(30px);
      }
      // 带参数带默认值
      .div1(@w:3px) {
        norder:solid red @w'
      }
      .div2 {
        widthz;200px;
        height:200px;
        .div2(); //不传参(但是得有小括号),默认就是3px,传参就是新值
      }
      
      // 混入中增加判断条件
      .width(@weight) when (@weight > 200px)
      {
        width:@weight;
      }
      #box2 { // 无效果
          .width(200px);
      }
      #box3 {
          .width(300px);
      }
    查看原文

    赞 0 收藏 0 评论 0

    。。 发布了文章 · 2月23日

    Vuepress记录文档

    在已有项目中安装

      // 安装:
      npm install -D vuepress
      // 创建一个docs 目录
      mkdir docs
      // 创建一个 markdown 文件(相当于入口页)
      echo '# Hello VuePress' > docs/README.md
      // package.json添语句
      "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
      }

    运行

    npm run docs:dev

    打包

    npm run docs:build

    运行后出现乱码问题:

    解决方式:修改md文件编码为UTF-8, 即可正常显示

    如何使用:

    目录结构

    .
    ├── docs
    │   ├── .vuepress (可选的)
    │   │   ├── components (可选的)
    │   │   ├── theme (可选的)
    │   │   │   └── Layout.vue
    │   │   ├── public (可选的)
    │   │   ├── styles (可选的)
    │   │   │   ├── index.styl
    │   │   │   └── palette.styl
    │   │   ├── templates (可选的, 谨慎配置)
    │   │   │   ├── dev.html
    │   │   │   └── ssr.html
    │   │   ├── config.js (可选的)
    │   │   └── enhanceApp.js (可选的)
    │   │ 
    │   ├── README.md
    │   ├── guide
    │   │   └── README.md
    │   └── config.md
    │ 
    └── package.json
    • docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
    • docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
    • docs/.vuepress/theme: 用于存放本地主题。
    • docs/.vuepress/styles: 用于存放样式相关的文件。
    • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件结尾,具有比默认样式更高的优先级。
    • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量,或者设置新的 stylus 颜色常量。
    • docs/.vuepress/public: 静态资源目录。
    • docs/.vuepress/templates: 存储 HTML 模板文件。
    • docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
    • docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
    • docs/.vuepress/config.js: 配置文件的入口文件,也可以是 YML 或 toml。
    • docs/.vuepress/enhanceApp.js: 客户端应用的增强。

    首页docs/README.md

    该页为项目的首页,支持配置:

    ---
    home: true // 是否
    actionText: 快速上手 →
    actionLink: /guide/
    features:
    - title: 简洁至上
      details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
    - title: Vue驱动
      details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
    - title: 高性能
      details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2018-present xxxxxx
    ---
    

    配置config.js

    结构:

      module.exports = {
        title: '组件库文档',
        description: '组件库使用方法说明',
      }

    官方文档地址配置参考

    这里介绍部分常用属性:

    1. title标题:

      配置当前文档标题(显示在文档左上角和首页位置)

    2. description描述:

      配置当前文档描述部分(显示在文档首页标题之下)

    3. base网站将在其部署的基本 URL。(Default: '/')

      当你的文档默认需要部署在根目录时无需配置,当需要放在doc子路径下时,请配置base: '/doc/', 请注意:这里前后都需要/

    4. port端口号: (Default: 8080)

      运行时的端口号

    5. theme自定义主题:(Default: undefined)

      指定此选项来使用自定义主题。

    6. themeConfig: (Default: {})

      为使用的主题提供配置选项。这些选项将根据你使用的主题而有所不同。具体使用参见默认主题配置(default theme config)

    7. plugins: 插件扩展

      • 直接引入js:

          module.exports = {
            plugins: [
              require('./my-plugin.js')
            ]
          }
      • 使用npm上的插件:

          module.exports = {
            plugins: [ 'vuepress-plugin-xx' ]
          }

        更多属性请参照官方文档

    palette.styl样式变量修改项:

    // 颜色
    $accentColor = #283eb2
    $textColor = #2c3e50
    $borderColor = #eaecef
    $codeBgColor = #282c34
    $arrowBgColor = #ccc
    $badgeTipColor = #42b983
    $badgeWarningColor = darken(#ffe564, 35%)
    $badgeErrorColor = #DA5961
    
    // 布局
    $navbarHeight = 3.6rem
    $sidebarWidth = 20rem
    $contentWidth = 740px
    $homePageWidth = 960px
    
    // 响应式变化点
    $MQNarrow = 959px
    $MQMobile = 719px
    $MQMobileNarrow = 419px

    enhanceApp.js应用增强

    类似vue中的mian.js的作用,用于增强应用的功能,如element-ui将在此处进行注册引入。

    结构:

    import Element from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
     export default ({
       Vue, // the version of Vue being used in the VuePress app
       options, // the options for the root Vue instance
       router // the router instance for the app
     }) => {
       // ...apply enhancements to the app
       Vue.use(Element);
     }

    注意:引入某些库时会出现运行时没任何问题,而打包时报window is not defined或者document is not defined导致打包时失败的话,这是由于vuepress采用的是服务端渲染 所以此时找不到对应的window,请修改为

     import ElementUI from 'element-ui';
     import XXX from "XXX";
     
     
     export default ({
       Vue, // VuePress 正在使用的 Vue 构造函数
     }) => {
       // ...做一些其他的应用级别的优化
       Vue.use(ElementUI);
       Vue.mixin({
         mounted(){
           Vue.component(XXX.name, XXX);
         }
       })
     };

    或者改为

     // 扩展写这里
     import Element from 'element-ui';
     import 'element-ui/lib/theme-chalk/index.css';
     export default async ({
       Vue,
       options,
       router,
       isServer
     }) => {
       const components = await import('XXX')
       Vue.use(Element);
       Vue.use(components.default)
     };
    
    查看原文

    赞 0 收藏 0 评论 0

    。。 发布了文章 · 2月23日

    初涉Webpack

    Webpack记录文档

    1. 概念: webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
    2. 打包第一个文件:

      • 全局安装webpack:

        npm install webpack -g
      • 新建一个文件夹放入两个文件,一个为html一个为就是文件,其中HTML引入该js文件打包后的文件名
      • 执行webpack js文件 打包后的文件名
      • 此时如果出现报错:

        Cannot find module 'webpack-cli'
        请执行: npm install --save-dev webpack

        再执行出现:

        WARNING in configuration 
        The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
        请先执行 npm init -y, 生成package.json
        在新建一个webpack.config.js配置文件,用于配置webpack选项
        写入:
        const path = require('path')
        // 通过Node模块,向外面暴露一个配置
        module.exports = {
          entry:path.join(__dirname, './src/main.js'), // 打包文件
          output: {
            path: path.join(__dirname, './dist') // 打包好的文件名
          },
          mode: 'development' // 设置mode
        }

        此时再执行打包将无报错,且生成的文件将放入当前目录下的dist文件夹, 默认文件名为main.js

    3. 五大核心概念:
      | 中文名 | 配置项 | 概述 |
      | ---- | ---- | ---- |
      | 入口 | entry | 构建依赖图的开端 |
      | 输出 | output | 打包产出位置 |
      | 转化器 | loader | 编译的时候,对各种类型的模块, 进行转换处理 |
      | 插件 | plugin | 对每个任务环节,提供功能 |
      | 模式 | mode | 设置打包环境 |
    4. 认识webpack配置文件(即webpack.config.js)

      • 作用: 把配置参数,抽离到单独的文件,便于项目配置。
      • 基础格式:

        const path = require('path')    // node的基础path模块
        const 插件1 = require('插件1')
        module.exports = {
          //模式——设置开发模式
          mode: 'development',
          //入口——指定src/index.js为入口文件
          entry: {
            main: './src/index.js'
          },
          //输出——指定dist/bundle.js为输出文件
          output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
          },
          //转换器。模块>规则
          module: {
            rules: [
              { test: /\.后缀名$/, 
                use: [
                  {
                    loader: '转换器1',
                    options: {}    //转换器1配置
                  }
                ]
              }
            ]
          },
          //插件
          plugins: [
            new 插件1({
              //插件配置
              })
          ]
        }
    5. 入口(entry):

      • 每个entry属性,对应一个入口文件,便于单页、多页应用的js引入,

        单页面入口
        entry: {
          main: './src/index.js
        }
        // 可缩写为entry: './src/index.js'
        多页面入口
         entry: {
           one: './src/one/index.js',
           two: './src/two/index.js',
           three: './src/three/index.js'
         }

      也可使用node的path模块实现获取相对于配置文件的路径

       const path = require('path')
       module.exports = {
         entry: path.resolve(__dirname, './app.js')
       }
       // 注意,这里的__dirname, 为两个下划线
      • entry支持三种格式:

        对象:

        entry: {
          <key>: <value>
        }
        // key可以是简单的字符串, 对应着output.filename配置中的[name]变量,
        entry: {
          'app-entry': './app.js'
        }
        // key还可以是路径字符串。此时webpack会自动生成路径目录,并将路径的最后作为[name]
        entry: {
          'path/of/entry': './app.js'
        }
        
        // value如果是字符串,而且必须是合理的noderequire函数参数字符串。比如文件路径:'./app.js'(require('./app.js'));比如安装的npm模块:'lodash'(require('lodash')) 
        
        entry: {
          'my-lodash': 'lodash'
        },
        output: {
          path: './output',
          filename: '[name].js'
        }

        数组:

        entry: ['./app.js', 'lodash']
        等价于:
        entry: {
          main: ['./app.js', 'lodash']
        }

        字符串:

        entry: './app.js'
        等价于
        entry: {
          main: './app.js'
        }
    6. output(输出)

      • output是影响编译输出的选项。output选项告诉webpack怎么把编译文件写入磁盘。注意,虽然可以有很多输入口,但是只有一个输出配置

        output: {
          path: path.resolve(__dirname, 'dist')
          filename: [name].js    // 使用[name]占位符,自动识别入口文件名,从而区分打包文件名
        }
      • output.filename: 指定输出到硬盘的文件的的文件名。这里不能是一个绝对的路径!output.path会确定该文件的存在硬盘额路径的。filename仅仅用来给每个文件命名而已。

        [name]被入口的名字替换.

        [hash]被编译器hash替换.

        [chunkhash] 被入口的hash替换.

      • output.path 编译后的文件存放路径,绝对路径,取[hash]将被编译后的文件hash替换
      • output.chunkFilename 非入口chunk的文件名,作为一个相对路径放到output.path里。
    7. module 配置如何处理模块

      • rules配置模块的读取和解析规则,通常用来配置Loader,类型是一个数组,数组里的每一项都描述了怎么去处理特定的文件。

      匹配规则:

      1. 条件匹配: 通过test/include/exclude三个配置项来命中Loader要应用的规则文件
      2. 应用规则: 对选中的文件通过use配置项来应用loader,可以应用一个loader或者从后往前应用一组loader,同时还可以分别给loader传入参数。
      3. 重置顺序,一组loader的执行顺序默认是从右到左执行,通过exforce选项可以让其中一个loader的执行顺序放到最前或者最后。
      
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: ['babel-loader?cacheDirectory'],
                  include: path.resolve(__dirname, 'src')
              },
              {
                  test: /\.scss$/,
                  use: ['style-loader', 'css-loader', 'sass-loader'],
                  exclude: path.resolve(__dirname, 'node_modules')
              },
              { // test、include、exclude还支持数组类型
                  test: [/\.jsx?$/, /\.tsx?$/],
                  include: [
                      path.resolve(__dirname, 'src'),
                      path.resolve(__dirname, 'test')
                  ],
                  exclude: [
                      path.resolve(__dirname, 'node_modules'),
                      path.resolve(__dirname, 'bower_modules')
                  ]
              }
          ]
      }
      
      • 在loader需要传入很多参数的时候,我们还可以通过一个object来描述,如:

        use: [
            {
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true
                },
                 // enforce:'post' 的含义是把该 Loader 的执行顺序放到最后
                // enforce 的值还可以是 pre,代表把 Loader 的执行顺序放到最前面
                enforce:'post'
            }
        ]
      • noParse: 可以让webpack忽略部分未采用模块化的文件的递归解析和处理,类型可以为RegExp, [RegExp], function其中一个
      • 常见的loader配置:

        { // 加载图像
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        }
        
        { // 加载字体
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        }
        
        { // 加载css
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        }
        
    8. plugins:

      //通过new实例,启用插件
      plugins: [
        new webpack.ProgressPlugin(),    //webpack自带一系列插件
        new HtmlWebpackPlugin({template: './src/index.html'})    //使用对象,为插件配置参数
      ]

      常见的plugin:

      • HotModuleReplacementPlugin –开启全局的模块热替换(HMR);
      • NamedModulesPlugin –当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息;
      • CommonsChunkPlugin –提取chunk公共部分;
      • ExtractTextPlugin –独立生成css文件,以外链的形式加载;
      • UglifyJsPlugin –压缩js;
      • HtmlWebpackPlugin –使用模版生成html。
    9. 环境变量:

      webpack可以设置环境变量以区分生产模式还是开发模式,由此执行不同的操作。

      const NODE_ENV = process.env.NODE_ENV // 可获取到环境变量
      可由此对目前是生产模式还是开发模式
    10. 开发模式:webpack.dev.js配置文件
    11. 生产模式:webpack.prod.js配置文件
    12. resolve: webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀。例如:

      resolve: {
          nodules: [path.resolve(__dirname, "node_modules")],
          extensions: ['.js', '.json', '.scss', '.vue', '.json']
          // 模块别名定义,方便后直接引用别名, 无需多写长地址
          alias: {
            '@/static': resolve('static'), // 将@/static指向当前项目,下的static目录
            '@': resolve('src'), // 将@指向src目录
          }
      }
    13. 命令:

      //开发模式,启动服务器
      webpack-dev-server --open --config webpack.dev.js
      //生产模式,打包
      webpack --config webpack.prod.js
    14. webpack还可以支持Node操作,可通过Node对现有文件进行操作,以满足打包所需。

    使用demo参考: 阮一峰的https://github.com/ruanyf/web...

    查看原文

    赞 2 收藏 2 评论 0

    。。 关注了用户 · 2月23日

    小蘑菇 @xiaomogu_5f2124ad3ad42

    关注 644

    。。 关注了专栏 · 2月23日

    终身学习者

    我要先坚持分享20年,大家来一起见证吧。

    关注 52380

    。。 关注了专栏 · 2月23日

    贝塔学JAVA

    公众号:贝塔学JAVA Java程序员所需要掌握的核心知识: 集合框架、JVM机制、多线程与并发框架、网络协议、SpringIOC、SpringAOP、SpringMVC、SpringCloud、Dubbo、 MySQL、分布式、微服务、高并发与高可用等

    关注 1420

    。。 关注了专栏 · 2月23日

    CodeGuide | 程序员编码指南

    公众号:bugstack虫洞栈,回复:设计模式,可以下载《重学Java设计模式》PDF,全网下载量17万+ | 这是一本互联网真实案例实践书籍。以落地解决方案为核心,从实际业务中抽离出,交易、营销、秒杀、中间件、源码等22个真实场景,来学习设计模式的运用。

    关注 15412

    认证与成就

    • 获得 3 次点赞
    • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

    擅长技能
    编辑

    (゚∀゚ )
    暂时没有

    开源项目 & 著作
    编辑

    (゚∀゚ )
    暂时没有

    注册于 2020-09-14
    个人主页被 192 人浏览