精华内容
下载资源
问答
  • Vue 3 Babel JSX 插件

    2021-05-13 11:01:28
    Vue 3 Babel JSX 插件 以 JSX 的方式来编写 Vue 代码(直接复制于Github,Github老上不去,自己就保留一份,方便查看) Gitbub: ...

    Vue 3 Babel JSX 插件

    以 JSX 的方式来编写 Vue 代码(直接复制于Github,Github老上不去,自己就保留一份,方便查看)
    Gitbub: https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md

    安装

    安装插件

    npm install @vue/babel-plugin-jsx -D
    

    配置 Babel

    {
      "plugins": ["@vue/babel-plugin-jsx"]
    }
    

    使用

    参数

    transformOn

    Type: boolean

    Default: false

    on: { click: xx } 转成 onClick: xxx

    optimize

    Type: boolean

    Default: false

    是否开启优化. 如果你对 Vue 3 不太熟悉,不建议打开

    isCustomElement

    Type: (tag: string) => boolean

    Default: undefined

    自定义元素

    mergeProps

    Type: boolean

    Default: true

    合并 class / style / onXXX handlers

    enableObjectSlots

    使用 enableObjectSlots (文档下面会提到)。虽然在 JSX 中比较好使,但是会增加一些 _isSlot 的运行时条件判断,这会增加你的项目体积。即使你关闭了 enableObjectSlotsv-slots 还是可以使用

    pragma

    Type: string

    Default: createVNode

    替换编译JSX表达式的时候使用的函数

    表达式

    内容

    函数式组件

    const App = () => <div></div>;
    

    在 render 中使用

    const App = {
      render() {
        return <div>Vue 3.0</div>;
      },
    };
    
    import { withModifiers, defineComponent } from "vue";
    
    const App = defineComponent({
      setup() {
        const count = ref(0);
    
        const inc = () => {
          count.value++;
        };
    
        return () => (
          <div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
        );
      },
    });
    

    Fragment

    const App = () => (
      <>
        <span>I'm</span>
        <span>Fragment</span>
      </>
    );
    

    Attributes / Props

    const App = () => <input type="email" />;
    

    动态绑定:

    const placeholderText = "email";
    const App = () => <input type="email" placeholder={placeholderText} />;
    

    指令

    v-show

    const App = {
      data() {
        return { visible: true };
      },
      render() {
        return <input v-show={this.visible} />;
      },
    };
    

    v-model

    注意:如果想要使用 arg, 第二个参数需要为字符串

    <input v-model={val} />
    
    <input v-model={[val, ["modifier"]]} />
    
    <A v-model={[val, "argument", ["modifier"]]} />
    

    会变编译成:

    h(A, {
      argument: val,
      argumentModifiers: {
        modifier: true,
      },
      "onUpdate:argument": ($event) => (val = $event),
    });
    

    v-models

    注意: 你应该传递一个二维数组给 v-models。

    <A v-models={[[foo], [bar, "bar"]]} />
    
    <A
      v-models={[
        [foo, "foo"],
        [bar, "bar"],
      ]}
    />
    
    <A
      v-models={[
        [foo, ["modifier"]],
        [bar, "bar", ["modifier"]],
      ]}
    />
    

    会变编译成:

    h(A, {
      modelValue: foo,
      modelModifiers: {
        modifier: true,
      },
      "onUpdate:modelValue": ($event) => (foo = $event),
      bar: bar,
      barModifiers: {
        modifier: true,
      },
      "onUpdate:bar": ($event) => (bar = $event),
    });
    

    自定义指令

    const App = {
      directives: { custom: customDirective },
      setup() {
        return () => <a v-custom={[val, "arg", ["a", "b"]]} />;
      },
    };
    

    插槽

    注意: 在 jsx 中,应该使用 v-slots 代替 v-slot

    const A = (props, { slots }) => (
      <>
        <h1>{ slots.default ? slots.default() : 'foo' }</h1>
        <h2>{ slots.bar?.() }</h2>
      </>
    );
    
    const App = {
      setup() {
        const slots = {
          bar: () => <span>B</span>,
        };
        return () => (
          <A v-slots={slots}>
            <div>A</div>
          </A>
        );
      },
    };
    
    // or
    
    const App = {
      setup() {
        const slots = {
          default: () => <div>A</div>,
          bar: () => <span>B</span>,
        };
        return () => <A v-slots={slots} />;
      },
    };
    
    // or
    const App = {
      setup() {
        return () => (
          <>
            <A>
              {{
                default: () => <div>A</div>,
                bar: () => <span>B</span>,
              }}
            </A>
            <B>{() => "foo"}</B>
          </>
        );
      },
    };
    

    在 TypeSript 中使用

    tsconfig.json:

    {
      "compilerOptions": {
        "jsx": "preserve"
      }
    }
    

    谁在用


    Ant Design Vue

    Vant

    Element Plus

    Vue Json Pretty

    兼容性

    要求:

    • Babel 7+
    • Vue 3+
    展开全文
  • vue 配置babel

    千次阅读 2017-07-22 21:43:24
    首先install babel ...cnpm install --save-dev babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-istanbul babel-polyfill babel-preset-stage-2 babel-register

    首先install babel

    cnpm install --save-dev babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-istanbul babel-polyfill babel-preset-stage-2 babel-register


    webpack module配置

    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              scss: 'vue-style-loader!css-loader!sass-loader' // <style lang="scss">
            }
          }
        },
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader'
        }
      ]
    }

    为了兼容ie 入口处加入 babel-polyfil

    entry: {
      app: ['babel-polyfill', './src/main.js']
    },

    然后在根目录新建.babelrc文件 加入配置项

    {
      "presets": [
        ["env", { "modules": false }],
        "stage-2"
      ],
      "plugins": ["transform-runtime"],
      "comments": false,
      "env": {
        "test": {
          "presets": ["env", "stage-2"],
          "plugins": [ "istanbul" ]
        }
      }
    }

    展开全文
  • ./src/main.js Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js): Error: Cannot find module '@vue/babel-plugin-transform-vue-jsx' Require stack: ...


    ./src/main.js Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js): Error: Cannot find module '@vue/babel-plugin-transform-vue-jsx' Require stack:

    解决方案

    npm install @vue/babel-plugin-transform-vue-jsx --save-dev
    展开全文
  • vue安装babel依赖报错

    2017-11-13 11:29:00
    刚刚因为一些原因把依赖包删除,重新install了一下,结果... Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 查了一下,原来是因为Babel已经启弃用...

    刚刚因为一些原因把依赖包删除,重新install了一下,结果报错

    deprecate babel-preset-es2015@* ????  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

    查了一下,原来是因为Babel已经启弃用了babel-preset-es2015,现在最新启用的是babel-preset-env,重新安装一下就好了

    npm install babel-preset-env --save

     

    
    

    转载于:https://www.cnblogs.com/Smiled/p/7825528.html

    展开全文
  • 当我们导入组件ant-design-vue时,为了进行优化,可按需导入,逐个导入太麻烦,就可以通过修改babel.config.js文件来进行按需导入ant-design-vue的组件 首先将babel.config.js文件添加 plugins: [ ['import', { ...
  • babel预设打字稿vue Babel 7.x的TypeScript预设支持用TS编写的Vue.js组件。 替代品。 为什么? 创建此预设以支持使用Babel(不是Microsoft TypeScript)进行,也适用于 ,而无需对所有文件强制执行TS-to-JS转换...
  • vuebabel-polyfill的使用方法

    千次阅读 2019-10-23 17:37:29
    为什么使用babel-polyfill Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而可以在现有环境执行,所以我们可以用ES6编写,而不用考虑环境支持的问题。 Babel 默认只转换新的 JavaScript 句法(syntax...
  • Vuebabel.config.js配置文件详解

    万次阅读 2021-01-04 15:43:36
    一、概述 Babel是一个JS编译器,主要作用是...Vue3.0项目根目录中存在babel.config.js文件,即为Babel的配置文件,作用于整个项目。具体用法暂时不多赘述,详情请参考Babel中文文档:https://www.babeljs.cn/。 ..
  • 如果您将此样板的v1与Vue-CLI 2支持一起使用,请参阅。 此Vue CLI预设允许您快速启动包含以下内容的Web扩展: 多亏了 ,构建Web扩展所需的一切( manifest.json , .zip构建...) 和 (可配置) 与 和(包括...
  • 前两天一个首页项目,想用vue玩耍一下,就用vue-cli搭建了一套vue的开发框架 完成开发、联调和上线后,问题来了 chrome、ff浏览器下都能正常显示的页面,在百度浏览器下愣就显示不出来了 我还以为是调用的uclogin...
  • 解决vue elementUI项目使用webpack打包上线后,服务器环境下IE报语法错误及白屏问题 在最近的项目中,在使用webpack打包后发布,有用户反馈使用IE浏览器访问会白屏,这就不能忍受了,经过排查发现,发生这个错误应该...
  • 由于ie9和一些低版本的高级浏览器对es6新语法并不支持,引用babel-polyfill来解决此问题: 从babel的官方网站下载bebel-polyfill,安装到WEB应用到头部即可,支持ES6所有新的方法: $ npm install —save-dev ...
  • Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js): Error: Cannot find module '@vue/babel-preset-app' from 'C:\Users\Administrator\WebstormProjects...
  • vue项目打包时出现警告:warning Unexpected console statement no-console ...在vue项目中找到babel.config.js文件添加配置 // 这是项目发布阶段需要用到的 babel 插件 const prodPlugins = [] if (process.en
  • 今日在npm启动项目的时候,启动完成后报Cannot find module ‘@vue/babel-plugin-transform-vue-jsx’ 解决方案 npm install @vue/babel-plugin-transform-vue-jsx
  • Vue中使用Babel Vue 中使用 JSX 语法 npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props ** .babelrc 和 babel.config.js ** .babelrc { "presets": ["@vue/babel-preset-jsx"] } babel....
  • vue-cli3 没有webpack.config.js文件,想配置插件找不到地方,解决方案如下: 第一步安装 cnpm i babel-plugin-transform-remove-strict-mode -D 第二步配置 在babel.config.js文件中配置 module.exports = {...
  • vue中引入babel步骤

    千次阅读 2019-04-29 17:37:00
    vue中引入babel步骤  一、vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5。  1、安装babel-polyfill插件  npm install --save-dev babel-polyfill ...
  • 这个问题出现于我 Element-ui 做按需引入,照着... 解决:主要是我使用了 es2015 但是我并没有这个东西,于是我对它进行下载 // 下载 npm install babel-preset-es2015 下载完后又报别的错误,又没找到 状态:未解决
  • vue中配置babel-polyfill

    万次阅读 2020-01-13 14:07:39
    1.为什么要用babel-polyfill Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而可以在现有环境执行,所以我们可以用ES6编写,而不用考虑环境支持的问题; 有些浏览器版本的发布早于ES6的定稿和发布,...
  • npm install --save-dev babel-plugin-transform-object-rest-spread cnpm i babel-core babel-loader babel-plugin-transform-runtime -D cnpm i bable-preset-env babel-preset-stage-0 -D mint Ui import Min...
  • 如果使用Babel 6,请使用3.x 要求 假设您将Babel与模块捆绑器(例如Webpack)一起使用,因为扩展合并帮助器已作为模块导入以避免重复。 这与babel-plugin-transform-react-jsx 。 用法 npm install\ babel-plugin...
  • 一个Babel插件,为vue3提供jsx语法 同时支持jsx和tsx 与Vue3 Compiler行为相同 完全支持v-on / v-model 支持优化模式:分析PatchFlags 用打字稿写 其他指令: v-html / v-text 尝试最小化生成的代码量 用法 安装 npm...
  • vue-cli3 babel polyfill IE10 IE11

    千次阅读 2019-01-22 14:54:00
    通过Vue-cli3创建的项目,package.json引入一些插件。 本地运行编译在IE浏览器中无法打开,控制台并输出以下错误: SCRIPT1002: 语法错误 点击报错具体位置看看是什么插件引起的报错,其在node_modules哪个...
  • vue-cli2、vue-cli3配置babel 兼容低版本安卓5.0 配置babel Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面...
  • vue-template-babel-compiler 为基于启用Optional Chaining和许多新的 ES 功能。 特征 所有特性 Optional Chaining和更多新的 ES 功能 Bigint nullish coalescing 定制...... 演示 用法 # 1: Install in your ...
  • webpack-babel-vue-template 没有VueCli的Webpack + Babel + Vue.js模板 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,602
精华内容 15,840
关键字:

vue3babel

vue 订阅