用webpack2.0構建vue2.0單文件組件超級詳細精簡實例

時間 2019-11-11

標籤 webpack2.0 webpack 構建 vue2.0 vue 文件組件超級詳細精簡實例简体版

原文原文鏈接

npm init -y 初始化項目 //-y 爲自動生成package.json，若是須要自行配置，去掉-y便可css

安裝各類依賴項html

npm install --save vue 安裝vue2.0vue

npm install --save-dev webpack webpack-dev-server 安裝webpack以及webpack測試服務器 //默認安裝最新版2.x版本node

npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝babel，通常的瀏覽器是不認識es6語法的，babel的做用是將es6的語法編譯成瀏覽器認識的語法webpack

npm install --save-dev vue-loader vue-template-compiler 用來解析vue的組件，.vue後綴的文件es6

npm install --save-dev css-loader file-loader 用來解析cssweb

編寫頁面npm

新建目錄src，裏面新建App.vuejson

<!-- 簡單寫個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.jssegmentfault

/* 引入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>

頁面如圖所示