手动配置自己:

    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. How Javascript works (Javascript工作原理) (九) 网页消息推送通知机制

    个人总结: 1.介绍了网页消息推送通知机制 全文地址:https://github.com/Troland/how-javascript-works 这是 JavaScript 工作原理的第九章. 现 ...

  2. pandas 4 处理缺失数据nan

    from __future__ import print_function import pandas as pd import numpy as np np.random.seed(1) dates ...

  3. Hadoop的datanode超时时间设置

    datanode进程死亡或者网络故障造成datanode无法与namenode通信, namenode不会立即把该节点判定为死亡,要经过一段时间,这段时间暂称作超时时长. HDFS默认的超时时长为10 ...

  4. 【hackerrank week of code 26】Hard Homework

    [题目链接]:https://www.hackerrank.com/contests/w26/challenges/hard-homework/problem [题意] 给你一个式子:sin(x)+s ...

  5. 洛谷——P1428 小鱼比可爱

    https://www.luogu.org/problem/show?pid=1428 题目描述 人比人,气死人:鱼比鱼,难死鱼.小鱼最近参加了一个“比可爱”比赛,比的是每只鱼的可爱程度.参赛的鱼被从 ...

  6. Oracle11g R2创建PASSWORD_VERIFY_FUNCTION相应password复杂度验证函数步骤

    Oracle11g R2创建PASSWORD_VERIFY_FUNCTION相应密码复杂度验证函数步骤 运行測试环境:数据库服务器Oracle Linux 5.8 + Oracle 11g R2数据库 ...

  7. jquery easyui的使用

    第一步下载jquery easyui  下载地址:http://www.jeasyui.com/download/index.php 第二步创建Java web项目 第三步导入相关的文件..文件夹结构 ...

  8. leetcode——Insertion Sort List 对链表进行插入排序（AC）

    Sort a linked list using insertion sort. class Solution { public: ListNode *insertionSortList(ListNo ...

  9. Tuples are immutable

    A tuple is a sequence of values. The values can be any type, and they are indexed by integers, so in ...

  10. Threading and Tasks in Chrome

    Threading and Tasks in Chrome Contents Overview Threads Tasks Prefer Sequences to Threads Posting a ...