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

初始化环境

npm init -y 初始化项目

安装各种依赖项

npm install --save vue 安装vue2.0

npm install --save-dev [email protected]^2.1.0-beta.25 [email protected]^2.1.0-beta.9 安装webpack以及webpack测试服务器,默认安装是1.0版本的,所以必须指定版本号

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: red;
    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 [email protected]^2.1.0-beta.25 全局安装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 [email protected]^2.1.0-beta.9 全局安装webpack-dev-server,以便使用webpack-dev-server命令

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

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

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

参考

转载地址:https://segmentfault.com/a/1190000008166081
参考地址:webpack+vue.js快速入门教程

时间: 2024-10-17 04:31:10

用webpack2.0构建vue2.0超详细精简版的相关文章

用webpack2.0构建vue2.0单文件组件超级详细精简实例

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-es2

vue1.0 与 Vue2.0的一些区别 及用法

1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/vue1.js" type="text/javascript" charset="utf-8">

vue1.0+vue2.0实现选项卡

通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue给一个dom节点添加一个类的方法,要实现选项卡就的操作active类. 我们可以传给 v-bind:class 一个对象,以动态地切换 class . <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 c

Linux debian6.0.5 服务器系统超详细安装步骤

准备好操作系统镜像debian-6.0.5-amd64-CD-1.iso或者debian-6.0.5-amd64-DVD-1.iso,保证服务网卡已接网线,并可以DHCP获是IP,然后用光盘或者U盘制做启动项,最后设  置从BIOS启动项,接着按如下步骤继续. 工具/原料: Linux OS debian-6.0.5-amd64-CD-1.iso或者debian-6.0.5-amd64-DVD-1.iso 步骤一 准备安装 设置好启动项,然后重启电脑进入到登录安装界面,选择Install: 选择

vue1.0和vue2.0生命周期----整理一

## 1. 作用域区别 1.x 随意的定义作用域 2.x 不允许body 或者html 元素 ## 2. 生命周期 1.x: created 实例已经创建 beforeCompile 在编译之前 compiled 编译之后 ready 实例已经插入到文档之中 beforeDetroy 在销毁之前 destroyed 销毁之后 2.x: beforeCreate 刚刚创建这个实例 属性还没有绑定 this.msg 获取不到 created 创建完毕 属性已经绑定好了 this.msg可以获取到了

TransMac Win系统下制作 OS X启动盘图文教程超详细小白版

1软件安装好后把准备好的8G或者8G以上U盘插到电脑上:右键以管理员身份运行如                     <ignore_js_op> 2打开软件后右键先格式化U盘操作如下图跟着步骤走: <ignore_js_op> <ignore_js_op> 直接点OK格式化U盘如下图: <ignore_js_op> 3格式化成功后提示如下图: <ignore_js_op> 4再选中U盘右键加载镜像文件如下图: <ignore_js_op

VMware10.0安装Mac OS X 10.9超详细教程

最新版的VMware10.0支持中文,无需汉化,安装即可:不过还是需要注册码,注册机是必须有的请放心,下载地址: 点击进入 其它所需软件: 1.系统:用的是论坛里网友做的懒人版是.cdr文件(真接把.cdr改为.iso就是镜像文件了)  点击进入 (也可以去下原版镜像dmg文件,有7z打开提取里面的InstallESD.dmg,然后用UltraISO转化为ISO镜像文件也可以安装,本人亲试成功) 2.mac补丁unlock-all-v120.zip  点击进入 3.VMware Tools da

vue2.0+webpack+vuerouter+vuex+axios构建项目基础

前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,webpack升级到4舍弃了不少组件,之前有次使用淘宝镜像丢失了不少模块,所以webpack大家尽量使用npm装. 2.安装vue脚手架 npm install vue-cli -g 3.运行cmd(开始-运行-cmd-回车) 比如你的目录要安装在E盘,在命令面板中就输入"e:"然后回车cd到项

webpack2.0+ vue2.0

一 webpack 2.0 及用到的插件安装(默认已经有node环境) 1. package.json文件 (插件安装及插件的功能不详解) { "private": true, "devDependencies": { "autoprefixer-loader": "^3.2.0", "babel-core": "^6.18.2", "babel-loader": &