Vue 单文件组件

1,669 阅读2分钟

前言

如果一开始就用vue-cli来跑一个vue项目,那么具体.vue文件为什么可以在浏览器中正常的运行起来可能不是很清楚,下面将会一步一步的介绍一个.vue文件怎么在浏览器中运行起来。

项目结构

搭建步骤

首先创建一个webpack.config.js,里面的配置内容主要是

将入口文件index.js编译到dist下的bundle.js

对.vue文件预编译和es6转es5的预编译支持

const path = require('path');
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:__dirname+'/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ]
};

这个时候你的开发环境需要安装的依赖包为

npm i babel-loader babel-core vue-loader vue-template-compiler webpack -D

注意:这样默认安装的babel-loader为最新的版本@8,会报错的,需要指定安装

npm i babel-loader@7 -D

单文件组件命名为App.vue,创建一个App.vue

<template>
    <div>
        <h1>Hello</h1>
    </div>
</template>
<script>
export default {
  name: "app"
};
</script>
<style>
</style>

接着创建index.js,该文件是入口文件,里面引入vue和App.vue,如果没有安装vue,请

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

然后执行webpack命令,则会在项目目录下生成一个dist文件夹,里面生成了一个bundle.js

webpack index.js

最后创建一个index.html,里面引入编译生成的bundle.js,通过在浏览器中运行index.html看看运行效果,是否将App.vue中的内容正常渲染:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue单文件测试</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>