vue-loader的簡單例子

時間 2019-11-16

標籤 vue loader 簡單例子简体版

原文原文鏈接

一.模塊加載器css

1.broserify  模塊加載器, 只能加載js
2.webpack    模塊加載器, 一切東西都是模塊, 最後打包到一塊

.vue文件 ==> 須要用webpack編譯成瀏覽器可讀文件html

vue組件代碼, 三塊代碼vue

1. <template></template> ==> 放html
2. <style></style> ==> 放css
3. <script></script> ==> js代碼

二.不使用vue-cli來建立, 手動建立node

1..初如化package.json webpack

& npm init --yes  // 默認

生成vue-loader-demo目錄web

F:\learning\znsvue>md vue-loader-demo

刪除目錄vue-cli

F:\learning\znsvue> del vue-loader-demo3

2.vue-loader-demo建立如下文件npm

  |-index.html 　　　　　　首頁     
  |-main.js              入口js文件
  |-App.vue              vue文件(第一個字母大寫, 官方推薦命名法)
  |-package.json         工程文件(項目依賴, 名稱, 配置)
  |-webpack.config.js    webpack配置文件
  |-components/Menu.vue  公用html

3.webpack準備工做json

App.vue ==> 用vue-loader來編譯api

& npm install vue --save
& npm install vue-loader --save
& npm install webpack --save-dev
& npm install webpack-dev-server --save-dev

& npm install vue-loader --save-dev
& npm install vue-html-loader --save-dev
& npm install css-loader --save-dev
& npm install vue-style-loader --save-dev
& npm install vue-hot-reload-api --save-dev
& npm install vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api --save-dev

ES轉換, babel編譯

& npm install babel-loader --save-dev
& npm install babel-core --save-dev
& npm install babel-plugin-transform-runtime --save-dev
& npm install babel-preset-es2015 --save-dev
& npm install babel-runtime --save-dev
& npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

4.在webpack.config.js配置好

module.exports = {
    entry: "./main.js",     // 入口js文件
    
    output: {
        path: __dirname,
        filename: "build.js"    // 輸出js文件
    },

    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },

            {
                test: /\.js$/,
                loader: 'babel-loader',
                query:{
                  presets: 'es2015'  
                },
                exclude: /node_modules/
            }
        ]
    },

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        }
    }
}

5.在package.json配置webpack打包

"scripts": {
    "dev": "webpack-dev-server --inline --hot"
},

6.index.html裏引入output的build.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <Hello></Hello>
    </div>
    <script src="build.js"></script>
</body>
</html>

運行命令打包

$ npm run dev

命令行運行webpack命令，
若是發現頁面有報錯： [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
運行時構建不包含模板編譯器，所以不支持 template 選項，只能用 render 選項，但即便使用運行時構建，在單文件組件中也依然能夠寫模板，由於單文件組件的模板會在構建時預編譯爲 render 函數。
上面一段是官方api中的解釋。就是說，若是咱們想使用template，在webpack.config.js添加如下以行

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.common.js'
    }
}

7.在main.js裏導入vue文件

import Vue from 'vue';
import Hello from "./App.vue";

new Vue({
    el: "#box",
    template: '<Hello/>',
    components: { Hello }
})

8.主要App.vue文件中

<template>
    <div class="huangtao">
        <div @click="change()">{{msg}}</div>
        <my-menu></my-menu>
    </div>
</template>

<script>
    import Menu from "./components/Menu.vue";

    export default {
        data () {
            return {
                msg: '這是App.vue內容'
            }
        },

        methods: {
            change(){
                this.msg = "new Hello World!"
            }
        },

        components: {
            "my-menu" : Menu
        }
    }
</script>

<style>
    html {
        background: green;
        color: #fff;
        font-size: 20px;
    }
</style>

9.components/Menu.vue文件中

<template>
    <ul>
        <li @click="change()">{{msg}}</li>
    </ul>
</template>
<script>
    export default {
        data () {
            return {
                msg: '這是引入Menu.vue內容'
            }
        },

        methods: {
            change(){
                this.msg = "new Hello World!"
            }
        }
    }
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。