Vue单文件组件与vue-loader

蔚落 2023-10-18 10:01 108阅读 0赞

### 单文件组件 ###

Vue.js是一个渐进式的js框架，在使用wewbpack构建Vue项目时，可以使用一种新的构建模式：

.vue单文件组件。

就是一个后缀名为.vue的文件，在webpack中使用vue-loader就可以对.vue格式的文件进行处理。

一个.vue文件一般包含3部分，即<template>、<script>和<style>

<template之间的代码就是该组件的模板HTML,style之间的是CSS样式。

### 安装插件 ###

使用.vue文件需要先安装vue-loader、vue-style-loaer等加载器并做配置。如果要使用ES6的语法，还需要安装babel和babel-loader等加载器。

使用npm逐个安装：

npm install --save vue
    
    npm install --save-dev vue-loader
    
    npm install --save-dev vue-style-loader
    
    npm install --save-dev vue-template-compiler
    
    npm install --save-dev vue-hot-reload-api
    
    npm install --save-dev babel
    
    npm install --save-dev babel-loader
    
    npm install --save-dev babel-core
    
    npm install --save-dev babel-plugin-transform-runtime
    
    npm install --save-dev babel-preset-es2015
    
    npm install --save-dev babel-runtime

### 修改配置文件 ###

安装完成后，修改配置文件webpack.config.js来支持对.vue文件以及ES6的解析：

在项目目录下新建一个名为.babelrc的文件，并写入babel的配置，webpack会依赖此配置

文件来使用babel来编译ES6的的代码：

{
        "presets": ["es2015"],
        "plugins": ["transform-runtime"],
        "comments": false
    }

### 使用.vue文件 ###

配置好上面这些后，就可以使用.vue文件了，记住每个.vue文件代表一个组件，组件之间相互依赖。

在项目目录下新建一个app.vue的文件并写入以下内容：

<template>
        <div>
            <v-title title="Vue组件化"></v-title>
            <v-button @click="handleClick">点击按钮</v-button>
            <p>
                <img src="./images/image.png" style="width: 200px;">
            </p>
        </div>
    </template>
    <script>
        import vTitle from './title.vue';
        import vButton from './button.vue';
    
        export default {
            components: {
                vTitle,
                vButton
            },
            methods: {
                handleClick (e) {
                    console.log(e);
                }
            }
        }
    </script>

.vue的组件是没有名称的，在父组件使用时可以对它自定义。写好了组件，就可以在入口main.js中使用它了。

打开main.js文件，把内容替换为下面的代码：

import Vue from 'vue';
    import App from './app.vue';
    
    new Vue({
        el: '#app',
        render: h => {
            return h(App)
        }
    });

执行:

npm run dev

运行项目。