7 webpack + vue-loader

vue-loader vue-loader基于webpack

简单的目录结构:
    |-index.html
    |-main.js   入口文件
    |-App.vue   vue文件，官方推荐命名法（A大写）
    |-package.json  工程文件(项目依赖、名称、配置)
        npm init --yes 生成(用这个命令生成pack age)
    |-webpack.config.js webpack配置文件
ES6: 模块化开发
    导出模块：
        export default {}
    引入模块:
        import 模块名 from 地址
--------------------------------------------
webpak准备工作:
    cnpm install webpack --save-dev
    cnpm install webpack-dev-server --save-dev
    App.vue -> 变成正常代码       [email protected]
    cnpm install [email protected] --save-dev
    cnpm install vue-html-loader --save-dev
    vue-html-loader、css-loader、vue-style-loader、
    [email protected]
    babel-loader
    babel-core
    babel-plugin-transform-runtime
    babel-preset-es2015
    babel-runtime

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   --save-dev
EADDRINUSE  端口被占用
注意要有:
    webpack-dev-server
    webpack
.vue 结尾，之后称呼组件
路由:
    vue-router
        ->  如何查看版本:
            bower info vue-router

    路由使用版本: 0.7.13
配合vue-loader使用:
1. 下载vue-router模块
    cnpm install [email protected]
2. import VueRouter from 'vue-router'

3. Vue.use(VueRouter);

4. 配置路由
    var router=new VueRouter();
    router.map({
        路由规则
    })
5. 开启
    router.start(App,'#app');
注意:
    之前: index.html  ->   
    现在: index.html  ->   

    App.vue ->   需要一个 
  根元素
---------------------------------------------
路由嵌套:
    和之前一模一样
--------------------------------------------
上线:
    npm run build
        ->  webpack -p

脚手架:
    vue-cli——vue脚手架
        帮你提供好基本项目结构
        引入  css-loader  和  style-loader
本身集成很多项目模板:
    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