vue23:vue-loader

時間 2019-11-18

標籤 vue23 vue loader 简体版

原文原文鏈接

vue-loader:
    其餘loader ->  css-loader、url-loader、html-loader.....
    後臺: nodeJs（模塊化）    ->  require  exports
    broserify  最先提出，模塊加載，只能加載js
    webpack   模塊加載器， 一切東西都是模塊, 最後打包到一塊了
    require('style.css');    ->   css-loader、style-loader
    
    vue-loader基於webpack

.css、.js、.html、.php、.....


a.vue須要webpack編譯成瀏覽器能夠看懂的。

    .vue文件:
        放置的是vue組件模塊代碼

        <template>
            html
        </template>
    
        <style>
            css
        </style>
    
        <script>
            js    （平時代碼、ES6瀏覽器兼容性很差）    babel-loader編譯成es5代碼
        </script>
-------------------------------------
簡單的目錄結構:
    |-index.html
    |-main.js        入口文件
    |-App.vue        vue文件，官方推薦命名法第一個字母大寫
    |-package.json        工程文件(項目依賴、名稱、配置)
        npm init --yes 生成
    |-webpack.config.js        webpack配置文件

ES6: 模塊化開發
    導出模塊：
        export default {}
    引入模塊:
        import 模塊名 from 地址
--------------------------------------------
webpak準備工做:
    cnpm install webpack --save-dev      //不帶服務器版本
    cnpm install webpack-dev-server --save-dev      //帶服務器版本

    App.vue    -> 變成正常代碼        vue-loader@8.5.4
    cnpm install vue-loader@8.5.4 --save-dev

    cnpm install vue-html-loader --save-dev

    vue-html-loader、css-loader、vue-style-loader、
    vue-hot-reload-api@1.3.2（加載js的）

babel相關插件：
    babel-loader
    babel-core
    babel-plugin-transform-runtime
    babel-preset-es2015
    babel-runtime

最最核心：
下載 "vue": "^1.0.28"

webpack.config.jsphp

module.exports={
    entry:'./main.js',  //入口文件

    output:{  //出口
        path:__dirname,
        filename:'build.js'//官方名稱
    },

    module:{
        loaders:[
            {test:/\.vue$/, loader:'vue-loader'},// \.是轉義，vue$以vue結尾的文件，用vue-loader編譯，
            {test:/\.js$/, loader:'babel', exclude:/node_modules/}//編譯js結尾的文件，使用abel-loader來編譯，
        ]
    },
    babel:{
        presets:['es2015'], 
        plugins:['transform-runtime']
    }
};

package.jsoncss

{
  "name": "vue-loader-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --port 8082"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "^0.25.0",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.4",
    "vue-style-loader": "^1.0.0"
  },
  "dependencies": {
    "vue": "^1.0.28"
  }
}

main.jshtml

import Vue from 'vue'   //下載的 "vue": "^1.0.28"
import App from './App.vue'

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

index.htmlvue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <app></app>  <!--組件-->
    <script src="build.js"></script>  <!--出口js文件-->
</body>
</html>

App.vuenode

<template>
    <h1>welcome Vue</h1>
    <h2 @click="change">{{msg}}</h2>
    <my-menu></my-menu>
</template>
<script>
    import Menu from './components/Menu.vue'

    export default{
        data(){
            return {
                msg:'welcome Vue ^_^'
            }
        },
        methods:{
            change(){
                this.msg='wahaha'
            }
        },
        components:{
            'my-menu':Menu
        }    
    }
</script>
<style>
    body{
        background: #ccc
    }
</style>

Menu.vuewebpack

<template>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
</template>
<script>
    
</script>

每日一句

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