vue24-webpack+vue-loader

時間 2019-11-12

標籤 vue24 vue webpack+vue webpack 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-router@0.7.13
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.htmlcss

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

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

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

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

router.config.jswebpack

//專門配置路由規則

//引入模塊
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.vueweb

<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.jsvue-router

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.jsonvue-cli

{
  "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"
  }
}

每日一句

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