手动配置自己:

    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. input标签type为number时，输入小数，在Firefox浏览器上输入框标红的问题

    问题一:firefox 下 默认情况 <input   type="number"> 只允许输入整数,输入小数时会报错,输入框被标红 这时候可以添加参数 step=&q ...

  2. HDU 1796 How many integers can you find(容斥原理）

    题意 就是给出一个整数n,一个具有m个元素的数组,求出1-n中有多少个数至少能整除m数组中的一个数 (1<=n<=10^18.m<=20) 题解 这题是容斥原理基本模型. 枚举n中有 ...

  3. list 分页

    package com.jsz.peini.common.util; import java.util.ArrayList; import java.util.List; public class S ...

  4. 2019年北航OO第一单元（表达式求导任务）总结

    2019面向对象课设第一单元总结 一.三次作业总结 1. 第一次作业 1.1 需求分析 第一次作业的需求是完成简单多项式导函数的求解,表达式中每一项均为简单的常数乘以幂函数形式,优化目标为最短输出.为 ...

  5. Docker_入门？只要这篇就够了！（纯干货适合0基础小白）

    与sgy一起开启你的Docker之路 关键词: Docker; mac; Docker中使用gdb无法进入断点,无法调试; 更新1: 看起来之前那一版博文中参考资料部分引用的外站链接太多,被系统自动屏 ...

  6. Android核心服务解析篇(三)——Android系统的启动

    从大的方面来说.Android系统的启动能够分为两个部分:第一部分是Linux核心的启动,第二部分是Android系统的启动. 第一部分主要包含系统引导,核心和驱动程序等,因为它们不属于本篇要讲的内容 ...

  7. 开源 java CMS - FreeCMS2.3会员个人资料

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/28577.html​ 项目地址:http://www.freeteam.cn/ 个人资料 从 ...

  8. Android 经常使用工作命令mmm,mm,m,croot,cgrep,jgrep,resgrep,godir

    官方定义: Invoke ". build/envsetup.sh" from your shell to add the following functions to your ...

  9. node06---npm、silly-datetime、路径问题

    我们刚才学习了,模块就是一些功能的封装,所以一些成熟的.经常使用的功能,都有人封装成为了模块.并且放到了社区中,供人免费下载. 这个伟大的社区,叫做npm. 也是一个工具名字 node package ...

  10. jzoj3454 表白(love)解题报告(01分数规划+DP)

    题目链接:https://jzoj.net/senior/#contest/show/2414/2 题目描述: 鸡腿是CZYZ的著名DS,但是不想追妹子的DS不是好GFS,所以鸡腿想通过表白来达到他追 ...