webpack配置vue

1、项目根目录初始化package.json:
    npm init
2、下载css与style的loader配置webpack中的css解析
npm install css-loader style-loader --save-dev

3、下载babel，webpack配置es6语法
npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev

4、下载vue以及相关组件
sudo npm install vue vue-loader vue-html-loader vue-style-loader vue-template-compiler --save-dev

5、webpack.config.js:
module.exports = {
    devtool:"sourcemap",
    entry:"./js/entry.js",
    output:{
        filename:"bundle.js"
    },
    module:{
        loaders:[
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"  //如果后缀是css,就是用style,css的loader来处理
            },
            {   //配置使用es6语法写js
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/,   //忽略掉这个文件夹下的
                options: {
                    presets: ['es2015','stage-0'],
                    plugins: ['transform-runtime']
                }
            },{
                //配置vue
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.js'
        }
    }
}

6、entry.js入口文件：
require('../css/style.css')
import Vue from 'vue'
import Heading from './components/heading.vue'

new Vue({
    el:'#app',
    components:{ Heading }
})


7、components/heading.vue：
<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                message : 'hello vue'
            }
        }
    }
</script>

7、index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Learning</title>
</head>
<body>
<div id="app">
    <Heading></Heading>
</div>
<script src="bundle.js"></script>
</body>
</html>
猜你喜欢
