精华内容
下载资源
问答
  • Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝。期待Vue3.0会用TS重构且会有较大改进。不过目前有一些第三方的库可以曲线优化对TS的支持。主要就介绍下过下面两个库来写Vue。总体体验尚可,类型检查,...

    Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝。期待Vue3.0会用TS重构且会有较大改进。不过目前有一些第三方的库可以曲线优化对TS的支持。主要就介绍下过下面两个库来写Vue。

    总体体验尚可,类型检查,智能提示该有的都有,顺滑中带着一丝蹩脚。

    如果要支持组件Props的类型检查及智能提示,则必须放弃template通过render写TSX, 总有种写React的感觉。

    介绍kaorun343/vue-property-decorator​github.com

    vue-property-decorator定义了很多的装饰器,如 @prop,@component,@watch 等。已经相当齐全了,不多介绍了,而且此库已经集成进了 vue-cli 3.0中,通过cli创建的项目也集成demo页面。wonderful-panda/vue-tsx-support​github.com

    vue-tsx-support 主要是用于支持再Vue的渲染函数中使用TSX,Vue本生是支持render JSX渲染的,在不涉及自定义Prop、事件时不使用该库也可以。但如果component中有自定义prop,event,TS的类型检查就会报错。大致逻辑是在原有的Vue类上有包装了一层,将属性、事件、作用域插槽以泛型方式传入接口定义,再将接口定义应用到TSX中。

    CSS Module

    Vue 默认是 scoped 方式引入css ,防止样式污染 ,通过vue模板使用也很方便。实际CSS 选择器使用 scoped 这种方式效率低于 CSS Module,使用TSX渲染时样式也只能通过CSS Module这样方式引用。这里再介绍个库 classNames ,通过这个库可以方便的组合样式名。

    创建项目

    使用vue-cli 3.0 创建一个项目 , 必选 typescript Babel ,其他根据需要选。创建完成后已经引入了Vue 及 TS 相关包了,也包括上面提到的 vue-property-decorator。包含了一个实例代码,npm install,npm run serve 已经可以跑起来了。

    导入和配置

    1. 安装 vue-tsx-support 包

    npm install vue-tsx-support --save

    2. 导入TS声明,有两种方式

    编辑tsconfig.js

    ...

    "include": [

    "node_modules/vue-tsx-support/enable-check.d.ts",

    "src/**/*.ts",

    "src/**/*.tsx",

    "src/**/*.vue",

    "tests/**/*.ts",

    "tests/**/*.tsx"

    ]

    // 注意:将exclude内的 "node_modules" 删掉,不然永远也无法被引用到了

    ...

    或者在main.js中 import

    import "vue-tsx-support/enable-check";

    3. 删除根目录下的 shims-tsx.d.ts ,否则会报重复定义的错误。

    4. 根目录新建 vue.config.js

    module.exports = {

    css: {

    modules: true // 开启CSS module

    },

    configureWebpack: {

    resolve: {

    extensions: [".js", ".vue", ".json", ".ts", ".tsx"] // 加入ts 和 tsx

    },

    },

    devServer: {

    port: 8800 // webpack-dev-server port

    }

    };

    创建视图组件

    来创建个按钮组件:

    import { Component, Prop } from "vue-property-decorator";

    import * as tsx from "vue-tsx-support";

    export enum ButtonType {

    default = "default",

    primary = "primary"

    }

    export enum ButtonSize {

    large = "large",

    small = "small"

    }

    export interface IButtonProps {

    type?: ButtonType;

    size?: ButtonSize;

    num: number;

    }

    @Component

    export default class Button extends tsx.Component {

    @Prop() public type!: ButtonType;

    @Prop() public size!: ButtonSize;

    @Prop({ default: 0 }) public num!: number;

    protected render() {

    return (

    id:{this.num}

    {this.type &&

    type:{this.type}

    }

    {this.size &&

    size:{this.size}

    }

    );

    }

    }

    再创建Container 用TSX引用组件Button:

    import { Component, Prop } from "vue-property-decorator";

    import { Component as tsc } from "vue-tsx-support";

    import Button, { ButtonType, ButtonSize } from "./button";

    interface IContainerProps {

    name?: string;

    }

    @Component

    export default class Container extends tsc {

    @Prop() public name!: string;

    protected render() {

    return (

    container Name:{this.name}

    {this.$slots.default}

    button:

    );

    }

    }

    此时即使在Container 的 Render 方法同样会对 Props 进行类型检查 ,而VS Code也有智能提示和自动引入,这体验棒极了。

    CSS Module 导入样式

    注意:使用CSS module 前 需要在vue.config.js 中配置 css.modules = true

    注意:如要添加全局样式可在 App.vue 中 @import 方式引用公用样式,这样就不会被CSS Module 加上后缀了。

    然后加入TS定义

    declare module "*.scss" {

    const content: any;

    export default content;

    }

    可以配合classnames库,更方便的操作CSS类classnames​www.npmjs.com

    示例:vaynewang/SampleCode​github.com

    展开全文
  • 前言 最近尝试了vue+ts的组合...ts+vue的插件会少上很多,但是肯定会随着vue对ts的支持插件也会越来越多当前项目demo预览(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(g...

    前言

    最近尝试了vue+ts的组合个人感觉vue对于ts并没有特别的像angular2这样的友好,但是对于ts和js之间个人还是选择ts的。语法糖来说es6简直舒爽,下面我详细介绍下怎么使用ts+vue。ts+vue的插件会少上很多,但是肯定会随着vue对ts的支持插件也会越来越多当前项目demo预览(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的)第二集

    游泳健身了解一下:github JQ插件


    内容总结

    1. vue cli3的安装。
    2. vue config文件配置
    3. 项目结构文件搭建
    4. 路由的使用
    5. vue cli启动以及启用下载ts 支持vue 的插件
    6. ts aixo的使用
    7. vue X的使用
    8. 图片上传(批量上传)//ts element的使用
    9. 分页的使用
    10. 重制按钮的分装
    11. 富文本编译器
    12. 表单验证

    1.VueCLI 3.0

    VueCLI 3.0 首先安装node.js自己百度安装

    安装:

    # 然后我们安装vuecli3.0 npm 或者 yarn都是可以的网上慢的小伙子可以用yarn
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    复制代码

    创建一个项目:

    vue create my-project
    # OR
    vue ui
    复制代码

    1. 第一个是自己创建过的模版。
    2. 第二个是系统默认的
    3. 第三个自己选配置
      我这边有创建过一个,我们选红色选中的这个

    我们这样选择。空格键是否选中,上下选择

    直接回车(默认同意)

    一路回车然后选择package.json 看下我们选择了啥ts 然后sass 语法检查esl

    然后再回车就进行最后的cli项目的下载了。耐心等待

    我们下载好了

    # 输入
    vue ui
    复制代码

    欢迎来到vuecli3.0 图形话界面,现别着急现看我们的项目文件结构

    2.vue config文件配置


    下面是我们的文件的结构

      ##  文件介绍
     
     1.   node_modules //当前node模块存放处
     2.   public //index页面所在镜头文件也可以放这个里面
     3.   src //当前项目存放
            assets //静态文件存放
            components //组件存放
            views //项目存放
            app.vue //这个我们文件的主要路由输入地方
            main //总的js文件
            router //路由文件
            shims-tsx.d //兼容jsx
            shims-vue.d //兼容vue
            store //vuex总文件
     4.   pakeage.js //文件(我们安装的依赖都再里面可以看到,也可以根据这个去下载node_modules)
     5.   我们还少一个vue.config.js 和 pakeage.js 同级
    复制代码
    为我等伸手党送上一份福利
    // vue.config.js
    module.exports = {
        // 选项...
        // 当使用基于 HTML5 history.pushState 的路由时;
        // 当使用 pages 选项构建多页面应用时。
        baseUrl:"",
        // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
        outputDir:"webApp",
        // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
        assetsDir:"assets",
        // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
        indexPath:"index.html",
        // 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。
        filenameHashing:true,
        // 多页面
        pages:undefined,
        // 编译警告
        lintOnSave:false,
        // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。
        runtimeCompiler:false,
        // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
        transpileDependencies:[],
        // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
        productionSourceMap:false,
        // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
        crossorigin:undefined,
        // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。另外,当启用 SRI 时,preload resource hints 会被禁用,因为 Chrome 的一个 bug 会导致文件被下载两次。
        integrity:false,
        // 反向代理
        devServer:{
            // devServer: {
            //     proxy: {
            //       '/api': {
            //         target: '1',
            //         ws: true,
            //         changeOrigin: true
            //       }
            //     }
            // }
        }
    }
    复制代码

    vue+ts基本的项目搭建就完成了

    小结

    内容比较多我分6个专题来写这个vu+ts+element,如中间有问题可以直接下面留言 第二集

    判断是否可以使用ts+vue是否支持福利链接

    展开全文
  • 前言 最近尝试了vue+ts的组合...ts+vue的插件会少上很多,但是肯定会随着vue对ts的支持插件也会越来越多当前项目demo预览(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(g...

    前言

    最近尝试了vue+ts的组合个人感觉vue对于ts并没有特别的像angular2这样的友好,但是对于ts和js之间个人还是选择ts的。语法糖来说es6简直舒爽,下面我详细介绍下怎么使用ts+vue。ts+vue的插件会少上很多,但是肯定会随着vue对ts的支持插件也会越来越多当前项目demo预览(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的

    游泳健身了解一下:githubJQ插件 技术文档 技术文档会持续更新


    内容总结

    1. vue cli3的安装。
    2. vue config文件配置
    3. 项目结构文件搭建
    4. 路由的使用
    5. vue cli启动以及启用下载ts 支持vue 的插件
    6. ts aixo的使用
    7. vue X的使用
    8. 图片上传(批量上传)//ts element的使用
    9. 分页的使用
    10. 重制按钮的分装
    11. 富文本编译器

    1.VueCLI 3.0

    VueCLI 3.0 首先安装node.js自己百度安装

    安装:

    # 然后我们安装vuecli3.0 npm 或者 yarn都是可以的网上慢的小伙子可以用yarn
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    复制代码

    创建一个项目:

    vue create my-project
    # OR
    vue ui
    复制代码

    1. 第一个是自己创建过的模版。
    2. 第二个是系统默认的
    3. 第三个自己选配置
      我这边有创建过一个,我们选红色选中的这个

    我们这样选择。空格键是否选中,上下选择

    直接回车(默认同意)

    一路回车然后选择package.json 看下我们选择了啥ts 然后sass 语法检查esl

    然后再回车就进行最后的cli项目的下载了。耐心等待

    我们下载好了

    # 输入
    vue ui
    复制代码

    欢迎来到vuecli3.0 图形话界面,现别着急现看我们的项目文件结构

    2.vue config文件配置


    下面是我们的文件的结构

      ##  文件介绍
     
     1.   node_modules //当前node模块存放处
     2.   public //index页面所在镜头文件也可以放这个里面
     3.   src //当前项目存放
            assets //静态文件存放
            components //组件存放
            views //项目存放
            app.vue //这个我们文件的主要路由输入地方
            main //总的js文件
            router //路由文件
            shims-tsx.d //兼容jsx
            shims-vue.d //兼容vue
            store //vuex总文件
     4.   pakeage.js //文件(我们安装的依赖都再里面可以看到,也可以根据这个去下载node_modules)
     5.   我们还少一个vue.config.js 和 pakeage.js 同级
    复制代码
    为我等伸手党送上一份福利
    // vue.config.js
    module.exports = {
        // 选项...
        // 当使用基于 HTML5 history.pushState 的路由时;
        // 当使用 pages 选项构建多页面应用时。
        baseUrl:"",
        // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
        outputDir:"webApp",
        // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
        assetsDir:"assets",
        // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
        indexPath:"index.html",
        // 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。
        filenameHashing:true,
        // 多页面
        pages:undefined,
        // 编译警告
        lintOnSave:false,
        // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。
        runtimeCompiler:false,
        // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
        transpileDependencies:[],
        // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
        productionSourceMap:false,
        // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
        crossorigin:undefined,
        // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。另外,当启用 SRI 时,preload resource hints 会被禁用,因为 Chrome 的一个 bug 会导致文件被下载两次。
        integrity:false,
        // 反向代理
        devServer:{
            // devServer: {
            //     proxy: {
            //       '/api': {
            //         target: '1',
            //         ws: true,
            //         changeOrigin: true
            //       }
            //     }
            // }
        }
    }
    复制代码

    vue+ts基本的项目搭建就完成了

    3.项目搭建

    先看一波完成后的项目介绍(webstorm里面ts不支持引入vue所有爆红色,强迫症患者可以用vscode支持会更好)

      public //当前文件
        static //可以放静态资源不会被打包(我放的是富文本编译器的文件后期会太慢可以换成cdn直接引入到index.html)
      src //当前项目文件
        assets //静态资源存放需要被打包
        components //组件存放处
            beforeUpload //单个图片上传组件 (基于element)
            pagination //分页插件 (基于element)
            reset //重置按钮组件
            tinyMceEditor //富文本编译器(这个是重点ts支持的vue插件当前对于我们伸手党来说比较少)
            uploadListImg //批量图片上传(基于element)
            verification //表单验证
        utils //当前项目公用方法
        views //当前项目存放地址
            aixo //当前项目ajax封装
            content //当前项目业务逻辑
            filters //当前项目过滤器
            haveNot //404页面
            layout //项目结构布局
            login //当前项目登陆页面
            method //当前项目的静态遍历存放
            store //当前项目vuex存放(不要为了用vuex而用,其实很多项目都不需要用到vuex的)
            system //权限管理相关
            typings //ts定义使用
            utils //存放其他文件(我这边存了cookie的文件)
        app.vue //全局路由页面
        main.ts //启始的js
        permission.ts //路由中转页面
        route //路由页面
        shims-tsx.d //支持jsx
        shims-vue.d //支持vue
        vue-config //vue配置
        vue-shim.d.ts //声明全局方法(ts会自动抓取.d.ts文件部分全局方法需要定义才可以使用)
    复制代码

    组件组件后面会一个一个讲解,公共方法也会讲,先要下载当前需要的ts的插件

    ##   最主要到是这3个
    1.   aixo
    2.   element
    3.   js-cookie
    复制代码

    看下package.js 可以看到我们当前到依赖

    然后我们去下载当前到依赖


    福利篇

    教你如何看插件是否可以使用当前到vue + ts项目(当前ts+vue还是比较少) TypeSearch
    如果和下面的图一样能搜索出来的基本可以判断支持ts


    下载当前项目依赖

    我们打开当前图形管理工具

    选择然后下载(还要下载当前ts的)
    这样才算把整个aixo下载好(其他插件都一样都需要下载2个)
    第二个主要是在node_modules里面的@types里面定义一遍才可以使用
    路由页面和vue的页面差别不是很大
    main.js差别也不大

    app.vue文件

    讲一下这个把 vue-property-decorator不然小伙伴们对这个会很不懂的

    ### vue-property-decorator
    @Prop  父子组件之间传值
       ## 使用方式
       @Prop({
            type: String,
            default: 'Default Value'
        }) msg: string;
        
    @Model  数据双向绑定
        @Model('change') checked: boolean
        
    @Watch  监听数据变化    
        //监听路由变化
        @Watch('$route')
        onRouteChanged(route: any, oldRoute: any) :void {
            this.$forceUpdate() ## 刷新当前的数据
        }
        
    @Provide  提供  /  @Inject  注入   
        ## 父
         @Provide('users')
          users = [
            {
              name: 'test',
              id: 0
            }
          ]
        ## 子  
        @Inject('users') users;  
    
    修饰器
        const Log = (msg) => {
          return createDecorator((component, key) => {
            console.log("#Component", component);
            console.log("#Key", key); //log
            console.log("#Msg", msg); //App
          })
        }
        @Log('fullMessage get called')
        get fullMessage() {
          return `${this.message} from Typescript`
        }
    
    复制代码

    可能您还是不懂建议看下官方文档vue-property-decorator这里就不详细赘述了,由于本人比较愚钝(伸手党一枚)

    我们的项目总的是在layout文件夹里面的先看下这个文件

        layout
            content
                AppMain.vue //当前文件为我们的主要路由
                index.ts //作为我们的总的转接的文件
                navbar.vue //当前项目的左侧导航
                newtab.vue //定义的组件
                prompt,vue //最左侧的结构(先预留起来)
            layout.vue //总项目的文件 
            style.scss //当前项目的css
    复制代码

    看我们引入的是一个文件夹,会自动获取到index.ts然后index.ts里面es6的写法

    ## 新写法ES6 (有时间的老爷可以看下es6)有不懂的可以加群里面直接询问项目结构大概就是这样各位老爷可以github一下即可查看当前代码
        components: {
            Navbar,
            AppMain,
            Prompt
        }
    ## 老写法   
        components: {
            Navbar: Navbar,
            AppMain: AppMain,
            Prompt: Prompt
        }
    复制代码

    2.element的引入

    1.先安装依赖

    2.引入css

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    复制代码

    3.main.ts 引入全局

    4.可以使用了

    复制粘贴一下element的代码

    http://element.eleme.io/#/zh-CN/component/time-picker
    复制代码

    我们这边使用一定要public共有变量, 别使用这个private私有变量(上面的html里面会找不到下面的变量虽然不会报错)

    5.效果图

    3.aixo的使用(ajax

    图形化界面去下载两个一个是用来兼容 ts

    附上封装好的ajax代码

    import Axios from 'axios';
    import { Message } from 'element-ui';
    import { getToken } from '@/views/utils/auth'; // token 不需要可以不要
    
    const httpServer = (opts: any) => {
            const httpDefaultOpts = { // http默认配置
                method: opts.method,
                baseURL: 'https://xxxx.com',  // 测试
                url: opts.url,
                timeout: 100000,
                params: opts.params,
                data: opts.params,
                headers: opts.method == 'get' ? {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'Content-Type': 'application/json; charset=UTF-8',
                'systoken': '',
                } : {
                'Content-Type': 'application/json;charset=UTF-8' ,
                'systoken': '',
                },
        };
            if (getToken()) {
            const token: any = getToken();
            httpDefaultOpts.headers.systoken = token;
        }
            if (opts.method == 'get') {
            delete httpDefaultOpts.data;
        } else {
            delete httpDefaultOpts.params;
        }
            const promise = new Promise(function(resolve, reject) {
            Axios(httpDefaultOpts).then(
            (res) => {
                if (res.data.code == -3) {
                    resolve(res.data);
                } else {
                    resolve(res.data);
                }
            },
            ).catch(
            (response) => {
                reject(response);
            },
            );
        });
            return promise;
    };
    
    export default httpServer;
    
    复制代码
    import Http from '@/views/aixo/http';
    
    /**
     * 总系统角色菜单 | 根据用户ID获取所属角色的菜单
     * @param userId 用户id
     */
    export const managxxxMenuUserId = (userId: any) => {
        return Http({
            url: `/xxx/${userId}`,
            method: 'post',
        });
    };
    
    复制代码

    使用方式

    1.vueX的使用(划重点

    首先我们先在图形话界面去下载当前需要到依赖(版本号以及axios都需要一致不知道可以去我们都第一章看看

    先建4个文件,我一个文件一个文件讲,观众老爷耐心听

    1.state文件(不了解的可以先去看下vuex官网

    这里我们把全局的变量放里面(说一下不是为了用vuex才用vuex的,有些项目完全可以不用当然可以不用)

    import { getToken, setToken, removeToken } from '@/views/utils/auth'
    const state: any = {
        token: getToken(),
        imgUrl: 'https://api.uat.iyuedian.com/iyd-imall-manage/imall/v1/upload'
    }
    export default state
    复制代码

    2.mutations文件

    这个文件就是提交改变当前的state里面的值的不懂interface的可以看下慕课网

    export default mutations{
        ## 老方法
        SET_TOKEN(state: any, data: any) {
             state.token = data
        },
     }
     
    import { MutationTree } from 'vuex'
        ## 新方法 MutationTree<any> 相信应该有些人不理就是一个接口
    const mutations: MutationTree<any> = {
        'SET_TOKEN'(
            state: any,
            data: any
        ): void {
            state.token = data
        }
    }
    复制代码

    vuex 里面的源码可以看一下

    3.actions文件

    这个文件可以执行mutations文件里面的方法公共的方法都可以放到这个里面async定义一个一步函数总是实际返回值总是一个 Promise 对象

    import { sysUserLogin } from '@/views/interface/login';
    import { getToken, setToken, removeToken } from '@/views/utils/auth';
    import { ActionTree } from 'vuex';
    import { Message } from 'element-ui';
    
    const actions: ActionTree<any, any> = {
        /**
         * 登陆
         * @param param0
         * @param userInfo 登陆信息
         */
        async Login({state, commit} , userInfo: any) {
            return new Promise((resolve, reject) => {
                sysUserLogin(userInfo).then((response: any) => {
                  setToken(response.data.systoken);
                  console.log(response.data.systoken);
                  commit('SET_TOKEN', response.data.systoken); ## 这边调用了上面的方法
                  resolve(response);
                }).catch((error) => {
                  reject(error);
                });
              });
          },
        /**
         * 深拷贝
         * @param param0
         * @param params
         */
        async deep({state, commit} , params: any) {
          let obj = {};
          obj = JSON.parse(JSON.stringify(params));
          return obj;
        },
    
    };
    
    export default actions;
    复制代码

    4.getters文件

    getters 可以定义是 store 的计算属性可以将 state 进行过滤然后return出来

    ## 老方法
    export default {
        token: (state:any) => state.token,
    }
    
    ## 新方法
    import {GetterTree} from 'vuex'
    const mutations: GetterTree<any,any> = {
        'token'(
            state: any,
        ): any {
            return state.token
        }
    }
    export default mutations
    复制代码

    vuex使用方式vuex-class

    ## 获取state的值 (先要定义一遍才可以使用)
    @State imgUrl
    @Action('Login') Login;
    @Getter('Login') getterFoo;
    @Mutation('Login') mutationFoo;
    // 简写方式
    @State foo
    @Getter bar
    @Action baz
    @Mutation qux
     //最先开始执行 
    created() {
        ## 后面的是原来的使用方式
        console.log(this.imgUrl); // ->  this.store.state.imgUrl
        console.log(this.getterFoo(2)) // -> this.store.getters.Login
        this.Login({ value: true }).then() // -> this.store.dispatch('Login', { value: true })
        this.mutationFoo({ value: true }) // -> this.store.commit('Login', { value: true })
    }
    复制代码

    2.图片上传(以及批量的图片上传

    这里我们用的是element的图片上传 如有不懂的可以看下element的组件

    单张图片上传

    我们想要更佳简便的使用方式

    // 单张图片上传(组件)
    <template>
        <div>
            <el-upload
                    class="avatar-uploader"
                    :action="$store.state.imgUrl" ## 我们图片上传的地址
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="BeforeUploadImg" :src="BeforeUploadImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
    </template>
    
    <script lang="ts">
    
        import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';
    
        @Component
        export default class BeforeUpload extends Vue {
    
            ## 初始值
            @Prop(String)BeforeUploadImg:string;
    
            ## 生命周期最先开始执行 void 表示没有返回值
            created():void {
            }
    
            public handleAvatarSuccess(res:any, file:any) {
                ## 本地图片预览; update: 这样配合父组件可以实现父子组件的双向绑定
                this.$emit('update:BeforeUploadImg',res.data[0].newFileName);
            }
            
            public beforeAvatarUpload(file:any) {
                // const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                // if (!isJPG) {
                //     this.$message.error('上传头像图片只能是 JPG 格式!');
                // }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                // return isJPG && isLt2M;
                return isLt2M;
            }
        }
    </script>
    
        # 使用方式
        # html .sync 配合update可以实现双向绑定
        <BeforeUpload :BeforeUploadImg.sync="BeforeUploadImg"></BeforeUpload>
        
        # script
        import BeforeUpload from '@/components/beforeUpload/beforeUpload.vue';
        import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';
        @Component({
            components: {
                BeforeUpload,
            }
        })
        export default class Content extends Vue {
            ## 默认图片
            public BeforeUploadImg: string = '';
        }
    
    复制代码

    批量图片上传

    我们想要更佳简便的使用方式

    // 批量图片上传(组件)
    <template>
        <div>
            <el-upload
                    class="upload-demo"
                    :action="$store.state.imgUrl"
                    :on-preview="handlePreview"
                    :on-success="handleOnSuccess"
                    :on-remove="handleRemove"
                    :file-list="UploadListsImg"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过1024kb</div>
            </el-upload>
        </div>
    </template>
    
    <script lang="ts">
        import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';
    
        @Component
        export default class UploadListImg extends Vue {
            // 初始值
            @Prop(null)UploadListsImg:object[];
            //最先开始执行
            created():void {
                // tinyMce.init({})
            }
            /**
             * 删除图片
             * @param file 删除的图片
             * @param fileList 剩下的图片
             */
            public handleRemove(file:any, fileList:any) {
                console.log(file, fileList);
                this.$emit('update:UploadListsImg',fileList)
                this.$emit('removeListImg',file)
            }
            public handlePreview(file:any) {
                console.log(file);
            }
    
            /**
             * 添加图片
             * @param response 成功的返回值
             * @param file 当前的这个图片
             * @param fileList 当前所有的图片
             */
            public handleOnSuccess(response:any, file:any, fileList:any){
                file.url = response.data[0].newFileName;
                file.name = response.data[0].originalFilename;
                this.$emit('update:UploadListsImg',fileList)
            }
    
        }
    </script>
        ## html UploadListsImg为当前剩下的图片的list    removeListImg为删除掉的list 使用方式
        <UploadListImg :UploadListsImg.sync="UploadListsImg"  @removeListImg="removeListImg" style="width: 400px"></UploadListImg>
        ## script
        import UploadListImg from '@/components/uploadListImg/uploadListImg.vue';
        import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';
        @Component({
            components: {
                UploadListImg,
            }
        })
        export default class Content extends Vue {
            public UploadListsImg: object[] = [
                {
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                },
                {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }
            ];
            public removeListImg: object[] = []
        }
    复制代码

    3.分页的使用

    分页我们想要更加简便的使用方式

    // 分页组件
    <style scoped lang="scss">
        .t-pagination{
            width: 100%;
            overflow: hidden;
        }
        .t-pagination-content{
            float: right;
            margin: 20px;
        }
    </style>
    <template>
        <div class="t-pagination">
            <div class="t-pagination-content">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10, 20, 30, 40, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Paginationtotal">
                </el-pagination>
            </div>
        </div>
        
    </template>
    
    <script lang="ts">
    import Utils from '@/utils/utils'
    import { Component, Vue, Model, Prop, Watch } from 'vue-property-decorator';
    
    @Component
    export default class Reset extends Vue {
        // props声明
        @Prop() private Paginationtotal!: number;
        private pageSize:number = 20;
        private currentPage4:number = 1;
        //最先开始执行
        created():void {
            if (this.$route.query.pageNum) {
                this.currentPage4 = Number(Utils.deep(this.$route.query.pageNum));
                this.pageSize = Number(Utils.deep(this.$route.query.pageSize));
            }else {
                this.currentPage4 = 1;
                this.pageSize = 20;
            }
        }
        //监听路由变化
        @Watch('$route')
        onRouteChanged(route: any, oldRoute: any) :void {
            if (route.query.pageNum) {
                this.currentPage4 = Number(Utils.deep(route.query.pageNum))
                this.pageSize = Number(Utils.deep(route.query.pageSize));
            }else {
                this.currentPage4 = 1;
                this.pageSize = 20;
            }
            this.$forceUpdate()//强刷当前
        }
        private handleSizeChange(val:any) {
            let data:any = Utils.deep(this.$route.query);
            [data.pageNum,data.pageSize] = [1,val]
            this.start(data)
            console.log(`每页 ${val} re条`);
        }
        private handleCurrentChange(val:any) {
            let data:any = Utils.deep(this.$route.query);
            data.pageNum = val
            data.pageSize = this.pageSize
            this.start(data)
            console.log(`当前页: ${val}re`);
        }
        private start(ret:any) {
            this.$store.dispatch('paramsUrl',ret).then((res:any) => {
                this.$router.push(`${this.$route.path}${res}`)
            })
        }
    }
    </script>
    # html 使用方式
    <Pagination :Paginationtotal="Paginationtotal"></Pagination>
    # script
    import Pagination from '@/components/pagination/pagination.vue';
    import { Component, Vue, Model, Watch, Provide } from 'vue-property-decorator';
    @Component({
        components: {
            Pagination
        }
    })
    export default class Content extends Vue {
        Paginationtotal:number = 0;
    }
    复制代码

    4.重制按钮的分装

    我们重置只需要把当前的分页重置成第一页 20跳数据即可

    // 重置按钮
    <template>
        <el-button size="mini" @click="reset(searchReserved)">重置</el-button>
    </template>
    
    <script lang="ts">
        import { Component, Vue, Model, Prop } from 'vue-property-decorator';
    
        @Component({
        })
        export default class Reset extends Vue {
            // props声明 paramsUrl 为定义的当前的vuex里面的方法
            @Prop() private searchReserved!:object
            public reset(search:any) {
                [search.pageNum,search.pageSize] = [1,20]
                this.$store.dispatch('paramsUrl',search).then((res:any) => {
                    this.$router.push(`${this.$route.path}${res}`)
                })
            }
        }
    </script>
    
    ## html 使用方式
    <Reset :searchReserved="searchReserved"></Reset>
    ## script
    import Reset from '@/components/reset/reset.vue';
    @Component({
        components: {
            Reset
        }
    })
    export default class Content extends Vue {
        searchReserved = {}
    }
    复制代码

    5.富文本编译器

    关于富文本编译器,我想大家应该不陌生了,我推荐一筐tinyMce来使用到我们当前到项目里面来富文本编译器ts都支持还不是多,我找来很多来尝试,最后决定用tinyMce下载一下这两个,中间踩了很多坑,给我们伸手党线上开箱即食的代码把

    把cdn放上速度更快

    重要的说一下我们的静态的这个文件放public 下面这个一定要放这,下面的这个一定要放进去不然页面食用不了文件链接

     ## 富文本编译器 ## EditorContent 默认值 onChangeHandler 改变的事件 editorInit 初始配置 
     ## 基本上图片上传都需要form表单方式上传  FormData
    <template>
        <div>
            <Editor :initial-value="EditorContent" @onChange="onChangeHandler" id="tinyMce" :init="editorInit"></Editor>
        </div>
    </template>
    
    <script lang="ts">
        import 'tinymce/themes/modern/theme';
        import Editor from '@tinymce/tinymce-vue';
        import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';
    
        @Component({
            components: {
                Editor
            }
        })
        export default class Content extends Vue {
            // 父组件传进来的html
            @Prop(String) EditorContent: any;
            // 初始值
            public initialVal:any = '';
            public editorInit:any = {
                language_url: './static/zh_CN.js',
                language: 'zh_CN',
                selector: 'textarea',
                skin_url: './static/skins/lightgray',
                height: 300,
                // width:600,
                images_upload_url: 'https://api.uat.iyuedian.com/iyd-imall-manage/imall/v1/upload',
                plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
                toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
                images_upload_handler: function (blobInfo:any, success:any, failure:any) {
                    let xhr:any, formData:any;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', this.$store.state.imgUrl);
                    xhr.onload = function() {
                        if(xhr.status<200||xhr.status>=300){
                            failure(xhr.status);
                            return;
                        }
                        let json = JSON.parse(xhr.responseText);
                        if(json.code==0){
                            success(json.data[0].newFileName);
                        } else {
                            failure('HTTP Error: ' + json.msg);
                        }
                    };
                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
                    xhr.send(formData);
                },
                // images_upload_url: 'https://api.iyuedian.com/iyd-imall-manage/imall/v1/upload'
            }
            //最先开始执行
            created():void {
                // tinyMce.init({})
            }
            //监听路由变化
            @Watch('$route')
            onRouteChanged(route: any, oldRoute: any) :void {
                this.$forceUpdate()
            }
            /**
             * 富文本内容变化时事件
             */
            public onChangeHandler(res:any,index:any,tag:any){
                //width height小程序不支持这个把这个替换了
                let html = res.level.content.replace("width","xxx")
                html = html.replace("height","yyy")
                // console.log(html)
                this.$emit('update:EditorContent',html)
            }
        }
    </script>
    ## html 使用方式
    <Editor :EditorContent.sync="EditorContent"></Editor>
    ## script
    import Editor from '@/components/tinyMceEditor/tinyMceEditor.vue';
     @Component({
            components: {
                Editor
            }
        })
    export default class Content extends Vue {
        // 默认图文详情
        public EditorContent: string = '';
    }
    
    复制代码

    1.

    使用方式

    小结

    基本的插件都讲了一下有问题可以添加上面的qq群

    展开全文
  • Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝。期待Vue3.0会用TS重构且会有较大改进。不过目前有一些第三方的库可以曲线优化对TS的支持。主要就介绍下过下面两个库来写Vue。总体体验尚可,类型检查,...

    4f308a10658288133d146477f2a37ad4.png

    Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝。期待Vue3.0会用TS重构且会有较大改进。不过目前有一些第三方的库可以曲线优化对TS的支持。主要就介绍下过下面两个库来写Vue。

    总体体验尚可,类型检查,智能提示该有的都有,顺滑中带着一丝蹩脚。
    如果要支持组件Props的类型检查及智能提示,则必须放弃template通过render写TSX, 总有种写React的感觉。

    介绍

    kaorun343/vue-property-decoratorgithub.com

    vue-property-decorator 定义了很多的装饰器,如 @prop,@component,@watch 等。已经相当齐全了,不多介绍了,而且此库已经集成进了 vue-cli 3.0中,通过cli创建的项目也集成demo页面。

    wonderful-panda/vue-tsx-supportgithub.com
    69084fa9b0cf0bbfca6bf3b7fa8c470c.png

    vue-tsx-support 主要是用于支持再Vue的渲染函数中使用TSX,Vue本生是支持render JSX渲染的,在不涉及自定义Prop、事件时不使用该库也可以。但如果component中有自定义prop,event,TS的类型检查就会报错。大致逻辑是在原有的Vue类上有包装了一层,将属性、事件、作用域插槽以泛型方式传入接口定义,再将接口定义应用到TSX中。

    CSS Module

    Vue 默认是 scoped 方式引入css ,防止样式污染 ,通过vue模板使用也很方便。实际CSS 选择器使用 scoped 这种方式效率低于 CSS Module,使用TSX渲染时样式也只能通过CSS Module这样方式引用。这里再介绍个库 classNames ,通过这个库可以方便的组合样式名。

    创建项目

    使用vue-cli 3.0 创建一个项目 , 必选 typescript Babel ,其他根据需要选。创建完成后已经引入了Vue 及 TS 相关包了,也包括上面提到的 vue-property-decorator。包含了一个实例代码,npm install,npm run serve 已经可以跑起来了。

    导入和配置

    1. 安装 vue-tsx-support 包

    npm install vue-tsx-support --save

    2. 导入TS声明,有两种方式

    编辑tsconfig.js

      ...
    "include": [
        "node_modules/vue-tsx-support/enable-check.d.ts",  
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx"
      ]
    // 注意:将exclude内的 "node_modules" 删掉,不然永远也无法被引用到了
      ...

    或者在main.js中 import

    import "vue-tsx-support/enable-check";

    3. 删除根目录下的 shims-tsx.d.ts ,否则会报重复定义的错误。

    4. 根目录新建 vue.config.js

    module.exports = {
      css: {
        modules: true // 开启CSS module
      },
      configureWebpack: {
        resolve: {
          extensions: [".js", ".vue", ".json", ".ts", ".tsx"] // 加入ts 和 tsx
        },
      },
      devServer: {
        port: 8800 // webpack-dev-server port
      }
    };

    创建视图组件

    来创建个按钮组件:

    import { Component, Prop } from "vue-property-decorator";
    import * as tsx from "vue-tsx-support";
    
    export enum ButtonType {
      default = "default",
      primary = "primary"
    }
    
    export enum ButtonSize {
      large = "large",
      small = "small"
    }
    export interface IButtonProps {
      type?: ButtonType;
      size?: ButtonSize;
      num: number;
    }
    
    @Component
    export default class Button extends tsx.Component<IButtonProps> {
      @Prop() public type!: ButtonType;
      @Prop() public size!: ButtonSize;
      @Prop({ default: 0 }) public num!: number;
    
      protected render() {
        return (
          <div>
            <p>id:{this.num}</p>
            {this.type && <p>type:{this.type}</p>}
            {this.size && <p>size:{this.size}</p>}
          </div>
        );
      }
    }
    

    再创建Container 用TSX引用组件Button:

    import { Component, Prop } from "vue-property-decorator";
    import { Component as tsc } from "vue-tsx-support";
    import Button, { ButtonType, ButtonSize } from "./button";
    
    interface IContainerProps {
      name?: string;
    }
    
    @Component
    export default class Container extends tsc<IContainerProps> {
      @Prop() public name!: string;
    
      protected render() {
        return (
          <div>
            <p>container Name:{this.name}</p>
            <p>{this.$slots.default}</p>
            <p>
              button:
              <Button num={9} type={ButtonType.primary} size={ButtonSize.large} />
            </p>
          </div>
        );
      }
    }
    

    此时即使在Container 的 Render 方法同样会对 Props 进行类型检查 ,而VS Code也有智能提示和自动引入,这体验棒极了。

    CSS Module 导入样式

    注意:使用CSS module 前 需要在vue.config.js 中配置 css.modules = true

    注意:如要添加全局样式可在 App.vue 中 @import 方式引用公用样式,这样就不会被CSS Module 加上后缀了。

    然后加入TS定义

    declare module "*.scss" {
      const content: any;
      export default content;
    }

    可以配合classnames库,更方便的操作CSS类

    classnameswww.npmjs.com
    7a486e370f9fea361e32ec316bf4b514.png

    示例:

    vaynewang/SampleCodegithub.com
    0338e58b68e62eb378b8340521797cb3.png
    展开全文
  • vue+ts的书写规范

    2021-04-02 11:15:42
    由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不依赖于浏览器的支持,也并不会带来兼容性问题。 TypeScript 是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法。并在此之上 ...
  • Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝。期待Vue3.0会用TS重构且会有较大改进。不过目前有一些第三方的库可以曲线优化对TS的支持。主要就介绍下过下面两个库来写Vue。总体体验尚可,类型检查,...
  • Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝。期待Vue3.0会用TS重构且会有较大改进。不过目前有一些第三方的库可以曲线优化对TS的支持。主要就介绍下过下面两个库来写Vue。 总体体验尚可,类型检查...
  • vue + ts Vuex篇

    千次阅读 2019-09-29 20:09:32
    VuexTypescript的支持,仍十分薄弱,官方库只是添加了一些.d.ts声明文件,并没有像vue 2.5这样内置支持。 第三方衍生库vuex-typescript,vuex-ts-decorators,vuex-typex,vuex-class等等,我个人的总结,除了vuex-...
  • 1. 简介TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和 ES6 的支持。网上关于ts的学习资料很多,这里不做详细介绍。可参考的学习网站:ts.xcatliu.com/typescript.bootcss.com/2. 安装依赖包cnpm i ...
  • 网上大多数vue+ts的项目都是用的ts+template但是template对ts的支持有多差,应该都有感受,毕竟用上了ts还用template是没有灵魂的。那tsx到底哪里比template好呢?1、template的不能感知到组件内部的属性而tsx是可以...
  • ts的大势所趋,你还在吭哧吭中徘徊在vue+js大门口吗?来吧,是时候表演真正的技术了~~...虽然目前vue2+对ts的支持没有像react、ng等支持的更友好,但是随着社区相关工具链的完善,其生产项目使用vue+ts也是完全ok...
  • vue3-admin 基于VueCli4+Ts+ElementUI构建后台系统。采用组件化开发模式及Flex布局,支持移动端适配。使用了最新vue框架,运用组件化开发模式,遵循组件单一原则,后期维护有着很大帮助。快速安装# 克隆项目...
  • 目录1、TS简介2、尤大大对vue 2.x 支持 TS的观点3、vue-cli3引入ts代码改造() 3.1 :npm对应包 3.2 :新增tsconfig.json 3.3 :vue.config.js配置ts-loader 3.4 :根目录下添加vue-shim.d.ts文件 3.5 :改造.vue文件...
  • 刚刚做完一个小项目,用时大概一周左右,我迫不及待的用上了vue3,开发体验还是非常的好。自从有了组合API,逻辑代码也可以复用了,大家可以开始写祖传的代码了...vue3TypeScript的支持比2.x好太多了。你也不用写cl...
  • TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和 ES6 的支持。网上关于ts的学习资料很多,这里不做详细介绍。可参考的学习网站: ts.xcatliu.com/ typescript.bootcss.com/ 2. 安装依赖包 cnpm i ...
  • vue3-admin 基于VueCli4+Ts+ElementUI构建后台系统。采用组件化开发模式及Flex布局,支持移动端适配。使用了最新vue框架,运用组件化开发模式,遵循组件单一原则,后期维护有着很大帮助。快速安装# 克隆项目...
  • (内容全部手打,错别字见谅)刚刚做完一个小项目,用时大概一周左右,我迫不及待的用上了vue3,开发体验还是非常的好。自从有了组合API,逻辑代码也可以复用了,大家可以开始写祖传的代码...vue3TypeScript的支持比2...
  • 让你项目使用Ts

    2019-09-25 05:14:49
    vue对ts的支持也越来越好, React也有TSX组件 还在犹豫什么 本文不涉及框架内容,因为框架的cli已经帮你搭好了ts环境。。。 本文只教你如何在一个demo里搭建Ts环境,好了,我们开始吧 第一步,安装 全局安装...
  • 笔者也是刚学的TypeScript,对TS的运用还有待提高,后续会触入更多的TypeScript特性。 使用vuex类 更多TypeScript的优化技巧 等出了Vue3.0,用Vue3.0进行重构 服务器渲染SSR 前端主要技术 所有技术都是当前最新的。 ...
  • vue3.0和vue2.0比较

    2021-01-22 09:43:56
    4.更好的支持ts,因为他是ts写的 5.暴露了自定义渲染的API 6.提供过了更先进的组件 二.vue3.0是如何变快的 1. diff方法优化 2.静态提升 3.事件侦听器缓存 4.ssr渲染 三.创建vue3.0的三种方式 1.Vue-CLI ...
  • 添加.vue文件格式化支持这里我们添加 .vue 文件格式化支持。1. 安装 Vetur 插件2. 在 VS Code 设置中添加如下规则:{"vetur.format.defaultFormatter": {"html": "prettier","css": "prettier"...
  • 自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合。 开文记录下vue和ts整合之旅和...
  • -------------持续更新------------- ...哈哈!各位大佬可以留下博客路口。大家互相增加 (代码下载模本,新网站代码在这开发中-----个人开发感觉自己进度...支持直接vscode ts开发调试(其他调试开发工具不敢保证)
  • 配置webpack对TS,TSX的支持,以便于我们在Vue项目中使用Typescript和tsx。 module.exports = { entry: './index.vue', output: { filename: 'bundle.js' }, resolve: { extensions: ['.ts', '.t
  • 虽然 vue2.x TypeScript的支持还不是非常完善,但是从今年即将到来的3.0版本在GitHub上的仓库 vue-next 看,为TS提供更好的官方支持应该也会是一个重要特性,那么,在迎接3.0之前,不妨先来看看目前版本二者的...
  • vue-typescript

    2019-04-30 03:20:16
    自尤大神去年9月推出vue对typescript的支持后,一直想开箱尝试vue+ts,最近一个新项目准备入手typescript,也遇到了很多坑,下面就一步步来吧!!! 1. 项目创建和初始化 1.1 安装脚手架、创建项目 全局安装 vue-cli...
  • vue 官方文档已经简略地 typescript 的支持进行了介绍,我们使用 Vue Cli3 直接生成项目 创建项目 :question_mark:为什么使用 Vue Cli3 构建项目 官方维护,后续升级减少兼容性问题 使用以下配置进行项目的生成...
  • Vue3.0中使用JSX简单入门

    千次阅读 2020-10-08 18:14:52
    直入正题,vue3 jsx 和 ts 的支持更加完善,看一下 vue3 的 jsx 官方文档部分: 非常的简陋了,但是他给我们指引了 vue3 中 jsx 的 babel 转换插件 jsx-next 。 感兴趣的可以看一下他的 README,下面开始安装...
  • monaco editor + vue的配置

    2017-07-28 14:26:00
    功能非常强大,使用方便轻巧,js\ts等等语言支持都良好,能方便扩展以支持其他语言或者自定义特性。 夸了这么多,这里只说它一个问题: 这货和vue不兼容。 解决这个问题很简单,使用vue-monaco-editor即可,...

空空如也

空空如也

1 2 3 4 5
收藏数 94
精华内容 37
关键字:

vue对ts的支持

vue 订阅