手动配置自己:

    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. 浅谈htmlentities 、htmlspecialchars、addslashes的使用方法

    html_entity_decode():把html实体转换为字符. $str = "just atest & 'learn to use '"; echo html_en ...

  2. HDU-5025 Saving Tang Monk 广度搜索 状态压缩

    题目链接:https://cn.vjudge.net/problem/HDU-5025 题意 救唐僧,路上有m(<=9)把钥匙,最多5条蛇和一个唐僧. 目标是前往唐僧的地方,用全部钥匙打开全部的 ...

  3. HDU 1667 The Rotation Game (A*迭代搜索)

    题目大意:略 每次选择一个最大深度K,跑IDA* 估价函数H=8-中间8个格里出现次数最多的数的个数x,即把它填满这个数最少需要8-x次操作,如果dep+H>K,就跳出.. 深搜的时候暴力修改, ...

  4. Python学习第二天-编写三级菜单

    编写三级菜单:1. 运行程序输出第一级菜单2. 选择一级菜单某项,输出二级菜单,同理输出三级菜单3. 菜单数据保存在文件中4. 让用户选择是否要退出5. 有返回上一级菜单的功能 # Author: z ...

  5. Linux磁盘分区（一）：加入

    ***********************************************声明************************************************ 原创 ...

  6. C++友元(Friend)简介

    相对Java而言,友元是C++中特有的一种元素,再加上<C++ Primer>也并没有太具体的样例,所以刚接触这个概念的时候懵了非常久,即是自己总结一下,也希望能帮到大家,以下来讲讲友元的 ...

  7. hdoj--5567--sequence1(水题)

    sequence1 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  8. 38.angular的scope作用域

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...

  9. css inline-block列表布局

    一.使用inline-block布局 二.多列布局方法二 <html><head> <meta charset="utf-8"> <tit ...

  10. 洛谷 P2147 [SDOI2008]洞穴勘测 LCT

    Code: #include <cstdio> #include <algorithm> #include <string> #include <cstrin ...