叉烧店并不卖叉烧

简单编写和编译Vuejs单文件组件

vuejs TTT 61℃ 0评论

先安装webpack环境

参照一下链接的对应小节:

  • 1.运行npm init
  • 2.运行
    npm install --save-dev webpack webpack-cli vue vue-loader vue-template-compiler
    

创建如下文件即内容

// App.vue
<template>
    <div class="test2">
        <p>I am App.vue</p>
        <ChildApp/>
    </div>
</template>

<script>
import ChildApp from "./components/ChildApp.vue";

export default {
	components: {
		ChildApp
	}
}
</script>
// ChildApp.vue
<template>
    <div class="test3">
        <p>I am ChildApp.vue</p>
    </div>
</template>
// index.js
import Vue from "vue/dist/vue.js";
import App from "./App.vue";

new Vue({
    el: "#root",
    template: '<App id="test"/>',
    components: {App}
})
// index.html
<div id="root"></div><script type="text/javascript" src="bundle.js"></script>
// webpack.config.js
const VueLoaderPlugin = require("vue-loader/lib/plugin");

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

运行以下语句

npm start
npm start命令解释链接
如果对webpack有不懂的可以查看链接

转载请注明:叉烧店 » 简单编写和编译Vuejs单文件组件

喜欢 (1)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址