3. Vue单文件组件

传统组件的问题和解决方案

1.问题

  • 全局定义 的组件必须保证组件的名称不重复
  • 字符串模板缺乏语法高亮, 在HTML有多行的时候,需要用到丑陋的
  • 不支持 CSS意味着当HTML和JavaScript组件化时,CSS 明显被遗漏
  • 没有构建步骤限制, 只能使用HTML和ES5 JavaScript,而不能使用预处理器(如: Babel)
    2.解决方案
    针对传统组件的问题,Vue 提供了一个解决方案一使用 Vue单文件组件。

Vue单文件组件的基本用法

单文件组件的组成结构

  • template 组件的模板区域
  • script 业务逻辑区域
  • style 样式区域
<template>
<!--这里用于定义vue组件的模板内容-->
</temp1ate>
<script>
//这里用于定义vue组件的业务逻辑
    export default {
        data: () { return {} },//私有数据
        methods: {} //处理函数
        // ... 其它业务逻辑
</script>

//建议为每个style都添加一个scoped的指令,从而防止组件样式之间的冲突问题,保证每个组件的样式都是自己私有的,不会影响到其他的组件
<style scoped>
/*这里用于定义组件的样式*/
</style>

webpack中配置vue组件的加载器

1 运行 npm i vue-loader vue-template-compiler -D命令
2 在webpack.config.js配置文件中,添加vue-loader的配置如下:

//导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports={
    module:{
        rules:[
        //...其他规则
        {test:/\.vue$/,loader:'vue-loader'}
        ]
    },
    plugins:[
    //...其它插件
    new VueLoaderPlugin()//请确保引入这个插件!
    ]
}

在webapck项目中使用vue

1.运行npm i vue -S 安装vue
2.在old-src->index.js入口文件中,通过import vue from 'vue'来导入vue构造函数
3.创建vue的实例对象,并指定要控制的el区域
4.通过render函数渲染App根组件

//1.导入Vue构造函数
import Vue from 'vue'
//2.导入App根组件
import App from './components/App.vue' 

const vm = new Vue({
    //3.指定vm实例要控制的页面区域
    el:'#app',
    //4.通过render函数,把指定的组件渲染到el区域中
    render:h=>h(App)
})

webpack打包发布

上线之前需要通过webpack将应用进行整体打包,可以通过package.json文件配置打包命令:

//在package.json文件中配置webpack打包命令
//该命令默认加载项目根目录中的webpack.config.js配置文件
"scripts":{
    //用于打包的命令
    "build":"webpack -p",
    //用于开发调试的命令
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000",
},

运行npm run build打包

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。