vue2+webpack构建项目

最新推荐文章于 2024-06-07 17:03:35 发布

allen-ge

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量1.6k

点赞数

分类专栏： web前端文章标签： vue2 webpack

本文链接：https://blog.csdn.net/gelove/article/details/53272061

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//全局安装webpack-dev-server

npm install -g webpack webpack-dev-server

//项目目录下初始化

npm init -y

//项目目录下安装依赖

npm install webpack webpack-dev-server style-loader css-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev

//vue相关依赖

npm install vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api vue-template-compiler --save-dev

//安装vue

npm install vue --save

webpack.config.js webpack配置文件

module.exports = {
    devtool: "sourcemap",
    //入口文件
    entry: "./static/js/entry.js",
    output: {
        filename:"bundle.js"
    },
    module: {
        loaders: [
            //css loader
            {
                test: /\.css$/,
                loader: "style!css"
            },
            //js loader
            {
                test: /\.js$/,
                loader: "babel",
                exclude: /node_modules/
            },
            //vue loader
            {
                test: /\.vue$/,
                loader: "vue"
            }
        ]
    },
    resolve: {
        //vue别名
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    babel: {
        presets: ['es2015','stage-0'],
        plugins: ['transform-runtime']
    }
};

entry.js 入口文件

import Vue from 'vue'
//import Hello from "../../src/components/Hello.vue";

//使用全局函数注入组件，就不用import和在创建Vue对象时定义components键值
Vue.component('Hello', require("../../src/components/Hello.vue"));

new Vue({
    el: "#app",
    //定义template可以不用在html中插入"<Hello></Hello>"
    //template: '<Hello/>',
    //components: { Hello }
});

require('../css/style.css');

//显示加载的模块,加载的原因
//webpack --display-modules --display-reasons

//webpack -d

//优化并压缩
//webpack -p

//watch监控，自动执行webpack
//webpack -w

//监控并热加载
//webpack-dev-server --inline --hot

Hello.vue

<template>
    <div>
        <div>{{msg}}</div>
    </div>
</template>
<style>
    body{
        background-color:#eee;
    }
</style>
<script>
    export default{
        data(){
            return{
                msg:'this is template body vue'
            }
        }
    }
</script>

index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>vue2</title>
    <link rel="icon" href="/src/assets/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app"><Heading></Heading></div>
    <div>it works</div>
    <!-- built files will be auto injected -->
    <script src="bundle.js"></script>
  </body>
</html>

allen-ge

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue2+webpack构建项目

webpack.config.js webpack配置文件module.exports = { devtool: "sourcemap", //入口文件 entry: "./static/js/entry.js", output: { filename:"bundle.js" }, module: { loader
复制链接

扫一扫