手动配置自己:

    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.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的更多相关文章

  1. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  2. webpack +vue开发（3）

    webpack的一些有用的命令 webpack --display-modules 在终端显示这些module,另外一个推荐使用 webpack --display-modules --display ...

  3. webpack +vue开发（2）

    我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...

  4. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  5. gulp+webpack+vue

    gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...

  6. webpack + vue最佳实践

    webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...

  7. webpack vue 配置

    vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.js ...

  8. webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇

    新建项目 开始(确认已经安装node环境和npm包管理工具) 1.新建项目文件名为start_vuedemo 2.npm init -y 初始化项目,我的win7系统,工程在d盘的vue_test_p ...

  9. webpack+vue 我的视角（持续更新）

    最近一直在研究webpack+vue的组合拳,现在分享一下: webpack就是一个项目管理工具,可以各种模块化加载,然后压缩,当然还有热加载技术(时灵时不灵..) vue是mv*模式的框架,组件化开 ...

  10. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

随机推荐

  1. 【xsy2440】【GDOI2016】疯狂动物城

    感受一下这恐怖的题目长度~~~ 其实题意很裸,但是作为GDOI的一道防AK题,自然有他优秀的地方. 简化题意:给出一棵树,要求支持三个操作: 1.修改点值 2.询问点$x$到$y$之间的一些东东 3. ...

  2. UVA 12003 Array Transformer

    Array Transformer Time Limit: 5000ms Memory Limit: 131072KB This problem will be judged on UVA. Orig ...

  3. android:Activity启动模式之singleTask(一)

    先看一下standard启动模式的说明: 仅仅有一个实例.在同一个应用程序中启动他的时候.若不存在此Activity实例.则会在当前栈顶创建一个新的实例.若存在,则会把栈中在其上的其他Activity ...

  4. js php 数组比較

    php 与 javascript 数组除了定义以及 操作上有非常大的差别,还有非常多其他的差别.如今我们就来讨论讨论.    1.大家都知道php比較两个数组是否全相等(值,索引)相等 $a=arra ...

  5. POJ 2516 Minimum Cost （最小费用最大流）

    POJ 2516 Minimum Cost 链接:http://poj.org/problem?id=2516 题意:有M个仓库.N个商人.K种物品.先输入N,M.K.然后输入N行K个数,每一行代表一 ...

  6. jsp学习-分页功能的实现

    <%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> < ...

  7. bzoj1055: [HAOI2008]玩具取名（dp）

    1055: [HAOI2008]玩具取名 题目:传送门 简要题意: 就是固定四个字母,给出这四个字母分别可以由哪两个字母组成,然后在给你一个字符串,要求把这个字符串还原成原始的四个字母的其中一个. 题 ...

  8. 7. 关于IntelliJ IDEA删除项目

    转自:https://www.cnblogs.com/zhangqian27/p/7698148.html 刚开始使用IDEA . 自己创建项目玩,结果发现IDEA无法删除,我也是醉了,Eclipse ...

  9. php7安装memcache 和 memcached 扩展

    php7安装memcache 和 memcached 扩展 标签(空格分隔): php memcache和memcached区别 memcache:http://pecl.php.net/packag ...

  10. POJ 2449 第k短路 Dijkstra+A*

    这道题我拖了半年,,,终于写出来了 思路: 先反向建边 从终点做一次最短路 ->这是估价函数h(x) 再正常建边,从起点搜一遍 (priority_queue(h(x)+g(x))) g(x)是 ...