vue24-webpack+vue-loader

Posted 2020-09-22 672530440

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue24-webpack+vue-loader相关的知识，希望对你有一定的参考价值。

手动配置自己:
    webpack+vue-loader

    webpack加载模块
-------------------------------------
如何运行此项目？
    1. npm install    或者    cnpm install
    2. npm run dev
        ->  package.json
            "scripts":{
                "dev":"webpack-dev-server --inline --hot --port 8082"
            }

以后下载模块：
    npm install <package-name>  --save-dev

EADDRINUSE    端口被占用

少了:
    webpack-dev-server
    webpack
----------------------------------------
.vue 结尾，之后称呼组件
----------------------------------------
路由:
    vue-router

        ->  如何查看版本:
            bower info vue-router

    路由使用版本: 0.7.13
配合vue-loader使用:
1. 下载vue-router模块
    cnpm install vue[email protected]
2. import VueRouter from ‘vue-router‘

3. Vue.use(VueRouter);

4. 配置路由
    var router=new VueRouter();
    router.map({
        路由规则
    })
5. 开启
    router.start(App,‘#app‘);

注意:
    之前: index.html    ->   <app></app>
    现在: index.html    ->   <div id="app"></div>

    App.vue    ->   需要一个 <div id="app"></div>  根元素

home    news
---------------------------------------------
路由嵌套:
    和之前一模一样
--------------------------------------------
上线:
    npm run build
        ->    webpack -p
--------------------------------------------
脚手架:
    vue-cli——vue脚手架
        帮你提供好基本项目结构

本身集成很多项目模板:
    simple        个人觉得一点用都没有
    webpack    可以使用(大型项目)
            Eslint 检查代码规范，
            单元测试
    webpack-simple    个人推荐使用, 没有代码检查    √

    browserify    ->  自己看
    browserify-simple
    
--------------------------------------------
基本使用流程:
1. npm install vue-cli -g    安装 vue命令环境
    验证安装ok?
        vue --version
2. 生成项目模板
    vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
    cd xxx
    npm install
4. npm run dev
--------------------------------------------

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="build.js"></script>
<!--
入口main.js:

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import App from ‘./App.vue‘
import routerConfig from ‘./router.config.js‘

Vue.use(VueRouter);


//配置路由
const router=new VueRouter();
            
router.map(routerConfig);
    routerConfig：
                //专门配置路由规则
                //引入模块
                import Home from ‘./components/Home.vue‘  :
                                            Home.vue:
                                            <template>
                                                <h3>我是主页</h3>
                                                <ul>
                                                    <li><a v-link="{path:‘/home/login‘}">用户登录</a></li>
                                                    <li><a v-link="{path:‘/home/reg‘}">用户注册</a></li>
                                                </ul>
                                                <div class="box">
                                                    <router-view></router-view>
                                                </div>
                                            </template>
                                            <style scope>
                                                .box{
                                                    border:1px dashed #000;
                                                }
                                            </style>
                import News from ‘./components/News.vue‘
                                            News.vue:
                                            <template>
                                                <h3>我是新闻</h3>
                                                <ul>
                                                    <li><a v-link="{path:‘/news/detail/001‘}">第一条新闻</a></li>
                                                    <li><a v-link="{path:‘/news/detail/002‘}">第二条新闻</a></li>
                                                </ul>
                                                <router-view></router-view>
                                            </template>
                import Login from ‘./components/Login.vue‘
                                                Login.vue：
                                                <template>
                                                    <h3>用户登录</h3>
                                                </template>
                import Reg from ‘./components/Reg.vue‘
                                                Reg.vue：
                                                <template>
                                                    <h3>用户注册</h3>
                                                </template>
                import Detail from ‘./components/Detail.vue‘  : 
                                        <template>
                                            <strong>
                                                {{$route.params | json}}
                                                <br>
                                                {{$route.query | json}}
                                            </strong>
                                        </template>
                export default{
                    ‘/home‘:{
                        component:Home,
                        subRoutes:{
                            ‘login‘:{
                                component:Login
                            },
                            ‘reg‘:{
                                component:Reg
                            }
                        }
                    },
                    ‘/news‘:{
                        component:News,
                        subRoutes:{
                            ‘detail/:id‘:{
                                component:Detail
                            }
                        }
                    }
                }
router.redirect({
    ‘/‘:‘/home‘
});

router.start(App,‘#app‘);
                App.vue:
                <template>
                    <div id="app">
                        <h3>vue-loader+ vue-router</h3>
                        <div>
                            <a v-link="{path:‘/home‘}">主页</a>
                            <a v-link="{path:‘/news‘}">新闻</a>
                        </div>
                        <router-view></router-view>
                    </div>
                </template>
                <script>
                    
                </script>
                <style>
                    body{
                        background: #ccc
                    }
                    .v-link-active{
                        font-size: 20px;
                        color: #f60;
                    }
                </style>
-->
</body>
</html>

main.js

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import App from ‘./App.vue‘
import routerConfig from ‘./router.config.js‘

Vue.use(VueRouter);//使用vue-router必写


//配置路由
const router=new VueRouter();

router.map(routerConfig);

router.redirect({
    ‘/‘:‘/home‘
});

router.start(App,‘#app‘);

App.vue

<template>
    <div id="app">
        <h3>vue-loader+ vue-router</h3>
        <div>
            <a v-link="{path:‘/home‘}">主页</a>
            <a v-link="{path:‘/news‘}">新闻</a>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
    
</script>
<style>
    body{
        background: #ccc
    }
    .v-link-active{
        font-size: 20px;
        color: #f60;
    }
</style>

Menu.vue

<template>
    <ul>
        <li v-for="val in list">
            {{val}}
        </li>
    </ul>
</template>
<script>
    export default{
        data(){
            return {
                list:[‘apple‘,‘banana‘,‘orange‘]
            }
        }
    }
</script>

router.config.js

//专门配置路由规则

//引入模块
import Home from ‘./components/Home.vue‘
import News from ‘./components/News.vue‘
import Login from ‘./components/Login.vue‘
import Reg from ‘./components/Reg.vue‘
import Detail from ‘./components/Detail.vue‘


export default{
    ‘/home‘:{
        component:Home,
        subRoutes:{
            ‘login‘:{
                component:Login
            },
            ‘reg‘:{
                component:Reg
            }
        }
    },
    ‘/news‘:{
        component:News,
        subRoutes:{
            ‘detail/:id‘:{
                component:Detail
            }
        }
    }
}

Detail.vue Home.vue Login.vue News.vue Reg.vue

<template>
    <strong>
        {{$route.params | json}}
        <br>
        {{$route.query | json}}
    </strong>
</template>

<template>
    <h3>我是主页</h3>
    <ul>
        <li><a v-link="{path:‘/home/login‘}">用户登录</a></li>
        <li><a v-link="{path:‘/home/reg‘}">用户注册</a></li>
    </ul>
    <div class="box">
        <router-view></router-view>
    </div>
</template>
<style scope>
    .box{
        border:1px dashed #000;
    }
</style>

<template>
    <h3>用户登录</h3>
</template>

<template>
    <h3>我是新闻</h3>
    <ul>
        <li><a v-link="{path:‘/news/detail/001‘}">第一条新闻</a></li>
        <li><a v-link="{path:‘/news/detail/002‘}">第二条新闻</a></li>
    </ul>
    <router-view></router-view>
</template>

<template>
    <h3>用户注册</h3>
</template>

webpack.config.js

module.exports={
    entry:‘./main.js‘,

    output:{
        path:__dirname,
        filename:‘build.js‘
    },

    module:{
        loaders:[
            {test:/\.vue$/, loader:‘vue‘},
            {test:/\.js$/, loader:‘babel‘, exclude:/node_modules/}
        ]
    },
    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 8083",
    "build":"webpack -p"
  },
  "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",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "vue": "^1.0.28",
    "vue-router": "^0.7.13"
  }
}

以上是关于vue24-webpack+vue-loader的主要内容，如果未能解决你的问题，请参考以下文章

vue的.vue文件是怎么run起来的(vue-loader)

Vue-loader

Vue + Webpack + Vue-loader 功能介绍

vue-loader：找不到模块

vue教程3-07 vue-loader