Powered by md-Blog  文 - 篇  访客 -

【vue】vue-loader 及单文件组件开发实例


更新:2020-03-26 11:06:15  /  创建:2020-03-18 15:52:28  /  分类:Webpack  / 
不要删除
参考地址:https://vue-loader.vuejs.org/zh/

说明

vue-loader 用于处理 Vue 的组件。
vue-template-compiler 用于处理组件中 <template> 块为字符串。

安装

yarn add vue
yarn add vue-loader vue-template-compiler -D
单文件组件开发实例

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render: h => h(App)
})

Vue.config.productionTip = false;

App.vue

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
}

Dev-tools

安装完后,终端运行:npm run dev,会看到 console 里有一段提示:

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

推荐使用 Dev-tools,获得更优的开发体验。

  1. 我们可以在GitHub上获取安装: https://github.com/vuejs/vue-devtools
  2. 或者进入 Google应用市场搜索 Vue.js devtools 安装。

安装后效果如图:

DevTools

不要删除

小站不易,感谢支持!