vue2+webpack构建项目

来源：互联网发布：淘宝达人粉丝1000个编辑：程序博客网时间：2024/04/27 15:40

//全局安装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>

0 0