vue-loader vue-loader基于webpack

簡(jiǎn)單的目錄結(jié)構(gòu):
    |-index.html
    |-main.js   入口文件
    |-App.vue   vue文件，官方推薦命名法（A大寫(xiě)）
    |-package.json  工程文件(項(xiàng)目依賴(lài)、名稱(chēng)、配置)
        npm init --yes 生成(用這個(gè)命令生成pack age)
    |-webpack.config.js webpack配置文件
ES6: 模塊化開(kāi)發(fā)
    導(dǎo)出模塊：
        export default {}
    引入模塊:
        import 模塊名 from 地址
--------------------------------------------
webpak準(zhǔn)備工作:
    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加載模塊
如何運(yùn)行此項(xiàng)目？
    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 結(jié)尾，之后稱(chēng)呼組件
路由:
    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({
        路由規(guī)則
    })
5. 開(kāi)啟
    router.start(App,'#app');
注意:
    之前: index.html  ->   <app></app>
    現(xiàn)在: index.html  ->   <div id="app"></div>
    App.vue ->   需要一個(gè) <div id="app"></div>  根元素
---------------------------------------------
路由嵌套:
    和之前一模一樣
--------------------------------------------
上線(xiàn):
    npm run build
        ->  webpack -p

腳手架:
    vue-cli——vue腳手架
        幫你提供好基本項(xiàng)目結(jié)構(gòu)
        引入  css-loader  和  style-loader
本身集成很多項(xiàng)目模板:
    simple      個(gè)人覺(jué)得一點(diǎn)用都沒(méi)有
    webpack 可以使用(大型項(xiàng)目)
            Eslint 檢查代碼規(guī)范，
            單元測(cè)試
    webpack-simple  個(gè)人推薦使用, 沒(méi)有代碼檢查  √

    browserify  ->  自己看
    browserify-simple
基本使用流程:
1. npm install vue-cli -g   安裝 vue命令環(huán)境
    驗(yàn)證安裝ok?
        vue --version
2. 生成項(xiàng)目模板
    vue init <模板名> 本地文件夾名稱(chēng)
3. 進(jìn)入到生成目錄里面
    cd xxx
    npm install
4. npm run dev