模块化、webapck中配置Vue和Vue组件化开发引入

伟庭大师兄

已于 2023-08-29 09:49:50 修改

阅读量521

点赞数 3

分类专栏：计算机基础知识文章标签： vue.js 模块化 webapck中配置Vue Vue组件化开发引入 vue

于 2021-12-25 23:54:54 首次发布

本文链接：https://blog.csdn.net/weixin_45630258/article/details/122135263

版权

计算机基础知识专栏收录该内容

432 篇文章 9 订阅

订阅专栏

本文介绍了JavaScript模块化的必要性，以及在Webpack中配置Vue.js和实现Vue组件化开发的步骤。通过对比传统的js文件组件和Vue文件组件，阐述了Vue文件的结构优势，包括HTML、CSS和JS的清晰分离，提高了代码可读性和维护性。

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

目录

一、模块化：

1、为什么需要模块化？

二、webapck中配置Vue和Vue组件化开发引入：

（1）webpack模块化vue~引入vue.js

（2）Vue组件化开发引入：

1）需要安装：安装vue-loader、 vue-template-compiler和修改webpack.config.js的配置文件

2）Vue组件化开发引入的好处：

（3）对比cpn组件(js文件)和cpn组件（Vue文件），显然Vue文件的结构更加清晰：

① js文件的Vue组件【可以看到模板template，属于html的，跟Vue（js）混在一起】

② Vue文件的Vue组件【html、css、js代码分离，结构清晰】

一、模块化：

1、为什么需要模块化？

● JavaScript 发展初期，代码简单地堆积在一起，只要能顺利地从上往下一次执行即可。但随着网站越来越复杂，造成了很多问题：全局变量冲突、函数命名冲突、引入js文件顺序等等

二、webapck中配置Vue和Vue组件化开发引入：

（1）webpack模块化vue~引入vue.js

步骤一：通过npm安装Vue ： npm install vue --save
步骤二：在webpack.config.js中添加上 resolve（Vue runtime-compiler版本）

注意：去vue官网找安装命令和配置代码

（2）Vue组件化开发引入：

1）需要安装：安装vue-loader、 vue-template-compiler和修改webpack.config.js的配置文件

2）Vue组件化开发引入的好处：

（3）对比cpn组件(js文件)和cpn组件（Vue文件），显然Vue文件的结构更加清晰：

■ 代码对比：

① js文件的Vue组件【可以看到模板template，属于html的，跟Vue（js）混在一起】

//将模板以默认（匿名）对象的方式导出
export default{
  template: `
    <div>
    <button @click="btnClick">点w</button>
    <input type="text" />
    <h1>{{message}}</h1>
    </div>
  `,
  data(){
    return {
      message: '配置Vue啦~'
    }
  },
  methods: {
    btnClick(){
      console.log('感谢你点我哈~');
    }
  }
}

② Vue文件的Vue组件【html、css、js代码分离，结构清晰】

<template>
  <div>
    <button class="btnColor" @click="btnClick">小儿子</button>
    <h5>{{message}}</h5>
  </div>
</template>

<script>
export default {
  name: "cpn",
  data(){
    return {
      message: '配置Vue啦~'
    }
  },
  methods: {
    btnClick(){
      console.log('感谢你点我哈~');
    }
  }
}
</script>

<style scoped>
.btnColor{
  background-color: greenyellow;
}
</style>