webpack2.0構建vue2.0超詳細精簡版

時間 2019-11-11

標籤 webpack2.0 webpack 構建 vue2.0 vue 詳細精簡简体版

原文原文鏈接

原文地址：http://blog.csdn.net/dahuzix/article/details/55549387css

npm init -y 初始化項目html

安裝各類依賴項vue

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

npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安裝webpack以及webpack測試服務器，默認安裝是1.0版本的，因此必須指定版本號webpack

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

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

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

1.編寫頁面瀏覽器

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

其中，scoped 屬性是一個布爾屬性。

若是使用該屬性，則樣式僅僅應用到 style 元素的父元素及其子元素。

2.在src目錄下新建main.js

/* 引入vue和主頁 */
import Vue from 'vue'
import App from './App.vue'

/* 實例化一個vue */
new Vue({
  el: '#app',
  render: h => h(App)
})

其中h是Vue 2.0新增的函數，能夠直接給綁定節點渲染一個vue組件，若是在Vue 1.x下，就應該使用

new Vue({
    el: '#app',
    components: { App }
});

而後在頁面中寫入標記：

<div id="app">
    <app></app>
</div>

可看作爲render: h => h(App)

render: function (createElement){
    return createElement(app);
}

在vuejs中，h函數僅是做爲createElement函數的縮寫

3.配置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/
            }
        ]
    }
}

4.打包項目

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

webpack 用webpack命令打包項目，這是目錄下會多出一個dist文件夾，查看裏面會有build.js，發覺裏面的es6語法已經被轉化了

最終項目目錄如圖所示

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