npm init -y 初始化项目  //-y 为自动生成package.json，如果需要自行配置，去掉-y即可

安装各种依赖项

npm install --save vue 安装vue2.0

npm install --save-dev webpack webpack-dev-server 安装webpack以及webpack测试服务器 //默认安装最新版2.x版本

npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，一般的浏览器是不认识es6语法的，babel的作用是将es6的语法编译成浏览器认识的语法

npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件

npm install --save-dev css-loader file-loader 用来解析css

编写页面

新建目录src，里面新建App.vue

<!-- 简单写个title和一个循环 -->

<template>

    <div id="example">

        <h1>{{ msg }}</h1>

        <ul>

            <li v-for="n in 5">{{ n }}</li>

        </ul>

    </div>

</template>

<script>

export default {

    data () {

        return {

            msg: 'Hello World!'

        }

    }

}

</script>

<style scoped>

#example {

    background:#000000;
　　color:#fff;

    height: 100vh;

}

</style>

在src目录下新建main.js

/* 引入vue和主页 */

import Vue from 'vue'

import App from './App.vue'

/* 实例化一个vue */

new Vue({

  el: '#app',

  render: h => h(App)

})

配置webpack

在根目录下新建webpack.config.js

/* 引入操作路径模块和webpack */

var path = require('path');

var webpack = require('webpack');

module.exports = {

    /* 输入文件 */

    entry: './src/main.js',

    output: {

        /* 输出目录，没有则新建 */

        path: path.resolve(__dirname, './dist'),

        /* 静态目录，可以直接从这里取文件 */

        publicPath: '/dist/',

        /* 文件名 */

        filename: 'build.js'

    },

    module: {

        rules: [

            /* 用来解析vue后缀的文件 */

            {

                test: /\.vue$/,

                loader: 'vue-loader'

            },

            /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */

            {

                test: /\.js$/,

                loader: 'babel-loader',

                /* 排除模块安装目录的文件 */

                exclude: /node_modules/

            }

        ]

    }

}

打包项目

npm install -g webpack 全局安装webpack，以便使用webpack命令

webpack 用webpack命令打包项目，这是目录下会多出一个dist文件夹，查看里面会有build.js，发觉里面的es6语法已经被转化了

最终项目目录如图所示

在根目录下新建index.html，引入build.js

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>vue-webpack</title>

</head>

<body>

    <section id="app"></section>

    <script src="./dist/build.js"></script>

</body>

</html>

页面如图所示

这样就算打包完成了，但是每修改一次都要重新打包这样显然没有任何效率，于是需要线上的热重载

npm install -g webpack-dev-server 全局安装webpack-dev-server，以便使用webpack-dev-server命令

webpack-dev-server 等待程序运行完毕

在浏览器输入http://localhost:8080/查看页面

这时修改页面的代码，不用刷新浏览器直接更改

转载自 https://segmentfault.com/a/1190000008166081 ，感谢博主如此详细精简的实例！

用webpack2.0构建vue2.0单文件组件超级详细精简实例的更多相关文章

  1. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  2. webpack2.0构建vue2.0超详细精简版

    原文地址:http://blog.csdn.net/dahuzix/article/details/55549387 npm init -y 初始化项目 安装各种依赖项 npm install --s ...

  3. Vuejs - 单文件组件

    为什么需要单文件组件 在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非 ...

  4. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  5. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  6. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  7. vue1.0与vue2.0对于v-for的使用的区别

    vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...

  8. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  9. vue中的单文件组件

    之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...

随机推荐

  1. [官网]Linux版本历史

    This is a list of links to every changelog. https://kernelnewbies.org/LinuxVersions 总结一下 2.6.x 存在了八年 ...

  2. [转帖]Stack的三种含义

    Stack的三种含义 http://www.ruanyifeng.com/blog/2013/11/stack.html 学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈&q ...

  3. 手机浏览器 - 如何消除<a>标签在点击时的蓝色底色？

    为a标签设置这个样式: a{-webkit-tap-highlight-color:transparent};

  4. RPC框架-RMI、RPC和CORBA的区别

    关键词:RMI RPC CORBA简 介:本篇文章重点阐述RMI,附带介绍RPC和CORBA Java远程方法调用(Java RMI)是一组实现了远程方法调用(rmi)的API. java RMI是远 ...

  5. python之路--类与类之间的关系

    类和类之间的关系 在我们的世界中事物和事物之间总会有一些联系. 在面向对象中. 类和类之间也可以产生相关的关系 1. 依赖关系 执行某个动作的时候. 需要xxx来帮助你完成这个操作. 此时的关系是最轻 ...

  6. 除了binlog2sql工具外，使用python脚本闪回数据（数据库误操作）

    利用binlog日志恢复数据库误操作数据 在人工手动进行一些数据库写操作的时候(比方说数据修改),尤其是一些不可控的批量更新或删除,通常都建议备份后操作.不过不怕万一,就怕一万,有备无患总是好的.在线 ...

  7. Yii2的使用

    yii2的下载安装 使用下载好的文件配置高级模板,在配置文件配置好数据库和gii 在common模板配置db: 在backend模板配置gii: 配置nginx服务器访问backend和fronten ...

  8. Delphi数据集与记录

    1.1Delphi数据库应用程序的层次结构 Delphi数据库应用程序通过数据存取构件对数据库进行访问,通过可视的数据构件(Data Control)将数据呈现给用户,并与用户进行交互.Delphi数 ...

  9. PreparedStement 用户登录！

    一.准备工作 在qy66数据库下,新建一个denglu表.添加 name password  . package cn.zhouzhou; import java.sql.Connection; im ...

  10. iis7.0 发生未知 FastCGI错误，错误代码 0x8007010b 的解决办法

    错误提示 修改该网站所对应的应用程序池 进程模型->标识 修改为:LocalSystem