请简述什么是Vue组件化开发_vuecli和webpack

请简述什么是Vue组件化开发_vuecli和webpack前言真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程演变过程1.0一般情况下vue都是单页面开发,所以项目中只会有一个inde

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程
 

演变过程1.0

一般情况下vue都是单页面开发,所以项目中只会有一个index.html文件,而且大多数时候这个html中的内容都是固定死的,之前我们都是把模板代码写在html中,现在我们把模板代码抽离出来,写在js文件中,模板代码只写入如下代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js/"></script>
</body>
</html>

我们在js中写入模板代码如下:

import Vue from 'vue'
const app = new Vue({
  el: "#app",
  data: {
    message: "hello",
    name: "jkc"
  },
  methods: {
    btnClick(){
      console.log("test")
    }
  },
  template: `
    <div>
      <h2>{{message}}</h2>
      <button @click="btnClick">按钮</button>
      <h2>{{name}}</h2>
    </div>
  `,
})

上面的template模板中的代码vue内部会自动替换掉html代码中的div标签中的内容,所以我们打包以后,页面展示的都是template中的内容
请简述什么是Vue组件化开发_vuecli和webpack

这里我们其实还可以再进阶以下,改成以下代码

import Vue from 'vue'

const App = {
  template: `
    <div>
      <h2>{{message}}</h2>
      <button @click="btnClick">按钮</button>
      <h2>{{name}}</h2>
    </div>
  `,
  data(){
    return{
      message: "hello",
      name: "jkc"
    }
  },
  methods: {
    btnClick(){
      console.log("test")
    }
  },
}

const app = new Vue({
  el: "#app",
  template: `<App></App>`,
  components: {
    App
  }
})

上面代码做的事情:将之前放在父组件中代码,创建一个App对象,然后在父组件中注册,最后在模板中引用该组件,同样我们打包后在页面查看的效果与之前是一样的
 

演变过程2.0

上面我们发现main.js中写的App这个对象代码太多了,在main.js文件中如果有多个,那样会显得很臃肿,所以我们可以把这个对象抽离出来,放在一个单独的js文件中,我们在项目的src文件夹中创建一个vue文件夹,在它下面创建一个app.js文件,将之前main.js中的App对象的代码复制到里面,然后导出

// app.js
export default {
  template: `
    <div>
      <h2>{{message}}</h2>
      <button @click="btnClick">按钮</button>
      <h2>{{name}}</h2>
    </div>
  `,
  data(){
    return{
      message: "hello",
      name: "jkc"
    }
  },
  methods: {
    btnClick(){
      console.log("test")
    }
  },
}

然后在main.js中从app.js中导入App

import App from './vue/app'

最后在打包,页面展示的效果还是一样,但是我们把组件抽离了出来,只是这里是js文件的形式
 

演变过程3.0

上面我们已经将组建抽离出来了,但是templatejs代码还是写在一起,此时我们就需要创建.vue后缀的文件了,文件中会自动帮我们把template模板代码、js代码和css代码分离开来,让结构更加清晰

在Vue文件夹中创建App.vue文件,写入如下代码

<template>
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      message: "hello",
      name: "jkc"
    }
  },
  methods: {
    btnClick(){
      console.log("test")
    }
  },
}
</script>

<style scoped>

</style>

然后在main.js文件中导入刚刚创建的Vue文件

import App from "./vue/App";

此时我们打包是会报错的,因为我们项目中用到了.vue的组件,所以必须安装vue-loadervue-template-compiler

安装命令如下:

npm install -D vue-loader vue-template-compiler

这样是默认安装最新版本的"vue-loader": "^16.3.0""vue-template-compiler": "^2.6.14",

大坑来袭
这里的坑,博主花了2个小时才采完,太坑了。
注意1:vue-template-compiler的版本一定要与vue的版一致
注意2:最新版本16.3打包会报错,我们安装时需要手动安装15.9.7或者15.0.0都可以,博主亲测可以

安装完成以后,我们需要在webpack中的rules中配置vue

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

又因为我们的vue-loader是15以上的版本,所以必须在你的 webpack 配置中添加 Vue Loader 的插件

const { VueLoaderPlugin } = require('vue-loader')
plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
]

最后展示完整的webpack配置如下

const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: "dist/"
  },
  resolve: {
    extensions: ['.json', '.js', '.vue', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.png/,
        type: 'asset'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}

现在我们打包,就不会报错了,且访问首页有对应的数据

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165383.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • linux 在线修复磁盘,linux 修复磁盘

    linux 在线修复磁盘,linux 修复磁盘目前维护的服务器出现的故障,系统成为只读,重启后报:/dev/VolGroup00/LogVol00:UNEXPECTEDINCONSISTENCY;RUNfsckMANUALLY出现这样的问题需要使用fsck命令扫描修复磁盘(fsck扫描前最好通过其他方法将能备份出来的数据备份出来,以防fsck将文件扫描损坏)解决以上问题的方法:1、使用光盘启动,进入救援模式1.1、将bios调整为光盘启…

  • ue4材质节点介绍_C4D节点材质

    ue4材质节点介绍_C4D节点材质一.基础常量1.Constant快捷键:1+鼠标左键2.Constant2Vector快捷键:2+鼠标左键3.Constant3Vector快捷键:3+鼠标左键4.Constant4Vector快捷键:4+鼠标左键5.StaticBool6.TextureSample7.TestureObject8.ParticleSu…

  • ArcGIS路径分析_arcgis区域统计分析

    ArcGIS路径分析_arcgis区域统计分析在累积选项卡中,可以选择网络数据集中要对路径对象进行累积的成本属性。这些累积属性仅供参考;求解程序仅使用分析图层的阻抗参数所指定的成本属性来计算路径。

  • c++中vector向量几种情况的总结(向量指针,指针的向量)

    c++中vector向量几种情况的总结(向量指针,指针的向量)1.标准库vector类型vector是同一种类型的对象的集合。每一个对象都有一个相应的整数索引值。标准库将负责管理与存储元素相关的内存。我们把vector称为容器,是由于它能够包括其它对象。一个容器中的全部对象都必须是同一种类型的。用vector之前,必须包括对应的头文件。#include<vector>usingstd::vector;vec…

  • 8421 BCD码 加减校正[通俗易懂]

    8421 BCD码 加减校正[通俗易懂]8421码是一种常见的BCD(Binary-CodedDecimal)码,它用4个二进制位表示1个十进制位:00000001001000110100010101100111100010011010…11110123456789x…x例如:我们要表示5和15,使用二进制编码5 -101 15 -1111…

    2022年10月28日
  • 业务流程重组的概念简称_流程管理

    业务流程重组的概念简称_流程管理业务流程重组的概念根据Hammer与Champy的定义,“业务流程重组就是对企业的业务流程(Process)进行根本性(Fundamental)再思考和彻底性(Radical)再设计,从而获得在成本、

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号