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 -> 變成正常代碼       vue-loader@8.5.4
    cnpm install vue-loader@8.5.4 --save-dev
    cnpm install vue-html-loader --save-dev
    vue-html-loader、css-loader、vue-style-loader、
    vue-hot-reload-api@1.3.2
    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 <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>  根元素
---------------------------------------------
路由嵌套:
    和之前一模一樣
--------------------------------------------
上線:
    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