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. echarts使用笔记二:柱子堆叠

    1.多个柱子堆叠效果,多用于各部分占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : ...

  2. Tomcat v7.0 java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

    十二月 , :: 下午 org.apache.coyote.http11.AbstractHttp11Processor process 信息: Error parsing HTTP request ...

  3. 基于redis实现的点赞功能设计思路详解

    点赞其实是一个很有意思的功能.基本的设计思路有大致两种, 一种自然是用mysql等 数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回mysq ...

  4. VMware虚拟机与Windows文件共享

    开发中,我们经常的需求是这样的:我想再Windows中进行快捷开发,但是想在linux中运行,那么需要将文件方便在linux中管理,基本可以分成两种方式: 1. 使用网络工具:vmware_tool工 ...

  5. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  6. Linux Centos 迁移Mysql 数据位置

    Linux Centos 迁移Mysql 数据位置 由于业务量增加导致安装在系统盘(20G)磁盘空间被占满了, 现在进行数据库的迁移. Mysql 是通过 yum 安装的. Centos6.5Mysq ...

  7. [转帖]linux下的CPU、内存、IO、网络的压力测试

    linux下的CPU.内存.IO.网络的压力测试 https://www.cnblogs.com/zhuochong/p/10185881.html 一.对CPU进行简单测试: 1.通过bc命令计算特 ...

  8. Latex常用软件

    Linux texMaker sudo apt-get install texlive-full sudo apt-get install texmaker

  9. jenkins配置SSH远程服务器连接

    之前用jenkins做了一个自动发布测试,配置任务的Post Steps时,选择的是执行shell命令.如下图: 这是在本192.168.26.233服务器上测试的,此服务器上运行jenkins,to ...

  10. C# Note30: 软件加密机制以及如何防止反编译

    参考文章: C#软件license管理(简单软件注册机制) 软件加密技术和注册机制 .NET中的许可证机制--License 背景 .net是一种建立在虚拟机上执行的语言,它直接生成 MSIL 的中间 ...