快捷導(dǎo)航

詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版

更新時(shí)間：2017年04月05日 10:08:08 作者：dahuzix

本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

npm init -y 初始化項(xiàng)目

安裝各種依賴(lài)項(xiàng)

npm install --save vue 安裝vue2.0

npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安裝webpack以及webpack測(cè)試服務(wù)器，默認(rèn)安裝是1.0版本的，所以必須指定版本號(hào)

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel，一般的瀏覽器是不認(rèn)識(shí)es6語(yǔ)法的，babel的作用是將es6的語(yǔ)法編譯成瀏覽器認(rèn)識(shí)的語(yǔ)法

npm install --save-dev vue-loader vue-template-compiler 用來(lái)解析vue的組件，.vue后綴的文件

npm install --save-dev css-loader file-loader 用來(lái)解析css

編寫(xiě)頁(yè)面

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

<!-- 簡(jiǎn)單寫(xiě)個(gè)title和一個(gè)循環(huán) -->
<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和主頁(yè) */
import Vue from 'vue'
import App from './App.vue'

/* 實(shí)例化一個(gè)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: {
    /* 輸出目錄，沒(méi)有則新建 */
    path: path.resolve(__dirname, './dist'),
    /* 靜態(tài)目錄，可以直接從這里取文件 */
    publicPath: '/dist/',
    /* 文件名 */
    filename: 'build.js'
  },
  module: {
    rules: [
      /* 用來(lái)解析vue后綴的文件 */
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      /* 用babel來(lái)解析js文件并把es6的語(yǔ)法轉(zhuǎn)換成瀏覽器認(rèn)識(shí)的語(yǔ)法 */
      {
        test: /\.js$/,
        loader: 'babel-loader',
        /* 排除模塊安裝目錄的文件 */
        exclude: /node_modules/
      }
    ]
  }
}

打包項(xiàng)目

npm install -g webpack@^2.1.0-beta.25 全局安裝webpack，以便使用webpack命令

webpack 用webpack命令打包項(xiàng)目，這是目錄下會(huì)多出一個(gè)dist文件夾，查看里面會(huì)有build.js，發(fā)覺(jué)里面的es6語(yǔ)法已經(jīng)被轉(zhuǎn)化了

最終項(xiàng)目目錄如圖所示

在根目錄下新建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>

頁(yè)面如圖所示