Vue开发所遇之坑

7λ

已于 2024-04-24 08:03:13 修改

阅读量444

点赞数 5

文章标签： vue.js javascript 前端

于 2024-04-13 15:57:03 首次发布

本文链接：https://blog.csdn.net/m0_67362047/article/details/137098343

版权

文章讲述了在Vue2项目中按需导入ElementUI组件的方法，包括使用.babel.config.js配置Babel以支持ES2015及以上特性并自动导入ElementUI，同时介绍了Vue插件的使用和注意事项，以及在非脚手架环境下Vue组件开发的配置差异。

摘要由CSDN通过智能技术生成

1. element

在用vue2想按需导入element组件时官方给的代码是

然后你就会知道不到.babeirc文件在哪。.

babeirc文件用于指定Babel如何转译JavaScript代码。

Babel是一个广泛使用的JavaScript编译器，可以将使用了最新JavaScript特性的代码转译成旧版本的浏览器或环境可以执行的代码，从而不用担心版本兼容的问题。

从babel版本7开始引入babel.config.js配置文件，也就是vue2使用脚手架工具默认生成的，它作用于全局配置，而.babel.js是一个局部的配置，但不常用。

且也需要把es2015的版本预设修改为@babel/preset-env预设，它能目标环境自动调整所需的转换，而"es2015"预设仅限于转换ES2015的特性。

整体代码应该是这样

module.exports = {
  presets: [
    /**
     * 1. 这是Vue CLI的Babel预设，专门为Vue项目设计。
     * 2. 它包含了一些默认的Babel插件和配置，用于将Vue组件中的JavaScript代码转换成兼容所有主流浏览器的形式。
     * 3. 这个预设涵盖了Vue特有的语法处理，如单文件组件（.vue文件）的解析
     */
    '@vue/cli-plugin-babel/preset',
    /**
     * 1. 这是Babel的环境预设（preset-env），
     * 2. 它允许你使用最新的JavaScript语法，而不用担心浏览器的兼容性问题。
     * 3. {"modules": false}选项的设置是为了告诉Babel不要将ES6模块语法（如import和export）转换为其他模块类型（如CommonJS），
     * 这通常是为了更好地与webpack这样的模块打包工具配合使用，让打包工具自己处理模块的逻辑
     * 
     */
    ["@babel/preset-env",{"modules":false}]
  ],
  /**
   * 这个插件配置是用来自动按需引入Element UI组件和它们的样式
   */
  plugins:[
    [
      "component",
      {
        "libraryName":"element-ui",
        "styleLibraryName":"theme-chalk"
      }
    ]
  ]
}

2. vue插件

vue浏览器插件是可以检测网站是否使用了vue和用于调试vue。是一个很好用的调试工具，可是有些小bug，实在让人心烦。

当你使用vue插件的时候，如果讲data里的数据是以中文开头的，有时候浏览器会识别不了，尽管vue插件是亮起的状态，可是按f12后会发现没有关于vue的扩展。

就像这样

当把前面的中文去掉就可以了

3.未使用脚手架环境的进行vue组件开发

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <my-component></my-component>
  </div>
  <script>
    const myComponent = Vue.extend({
      template: `
        <ul>
          <li v-for="user of users" :key="user.id">
            {{user.name}}
          </li>
        </ul>
      `,
      data () {
        return {
          users: [
            { id: '001', name: 'lyshang11' },
            { id: '002', name: 'lyshang22' },
            { id: '003', name: 'lyshang33' }
          ]
        }
      }
    })
    const vm = new Vue({
      el: '#app',
      components:{
        myComponent
      },
      data () {
        return {
          msg: 'hello',
        }
      }
    })


  </script>
</body>

</html>

当我们未使用脚手架环境进行vue组件开发时，在new Vue里的配置项components里注册组件使用驼峰命名，使用组件的时候需要用-来进行使用

例如注册组件使用的是myComponent，使用组件时就要<my-component></my-component>这样来使用。

且在未使用脚手架环境中，自闭和标签只能作用于一次。