首页 > 代码库 > vue23:vue-loader

vue23:vue-loader

2024-10-04 08:15:39   219人阅读

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.js

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.json

{
  "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.js

import Vue from ‘vue‘   //下载的 "vue": "^1.0.28"
import App from ‘./App.vue‘

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

index.html

<!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.vue

<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.vue

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

 

vue23:vue-loader


联系
我们