手动配置自己:

    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. Node_进阶_6

    Node进阶第六天 一.复习 cookie是在res中设置,req中读取的.第一次的访问没有cookie. cookie的存储大小有限,kv对儿.对用户可见,用户可以禁用.清除cookie.可以被篡改 ...

  2. 基础命令：chown

    chown:改变文件或目录的用户和用户组 [语法格式] chown [option] [OWNER][:[GROUP]] [file] chown  [选项]  [用户 : 用户组 ]  [<文 ...

  3. Vue style里面使用@import引入外部css, 作用域是全局的解决方案

    问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...

  4. sort函数自定义compare方法

    今天看到有C++这样写: sort(ins.begin(), ins.end(), [](Interval a, Interval b){return a.start < b.start;}); ...

  5. light oj 1317

    Description You probably have played the game "Throwing Balls into the Basket". It is a si ...

  6. 利用Matlab自带的深度学习工具进行车辆区域检测与车型识别【Github更新！！！】（三）

    前言 对前面的东西更新了一下.地方包括: 1.GUI的更新,更友好的用户界面 2.支持用手直接画车辆区域,并且识别出来 3.将proposal.detect.fine-grained classifi ...

  7. 可变对象 vs 不可变对象（Python）

    Python 在 heap 中分配的对象分成两类:可变对象和不可变对象.所谓可变对象是指,对象的内容是可变的,例如 list.而不可变的对象则相反,表示其内容不可变. 不可变对象:int,string ...

  8. [NOI2002] Savage 解题报告(扩展欧几里得)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1407 Description 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些 ...

  9. 36.创建模板mylist

    node.h #pragma once //创建模板 template <class T> class Node { public: T t;//数据 Node *pNext;//指针域 ...

  10. 请教如何用 peewee 实现类似 django ORM 的这种查询效果。

    本人新入坑的小白,如有不对的地方请包涵~~~! 在 django 中代码如下:模型定义: class Friends(models.Model): first_id = models.IntegerF ...