vuejs技術(shù)

利用vue-resource來請求api
利用vue-router來實現(xiàn)路由
利用vue中的組件化思想來實現(xiàn)每個頁面

webpack基本打包演示步驟

1、將webpack安裝成為全局包，npm install webpack -g
2、在cmd控制面板中，調(diào)用webpack指令給定兩個參數(shù) 要打包的文件路徑 要輸出的文件路徑

例如 webpack main.js build.js

瀏覽器無法識別語法

無法識別require,modul.exports等語法,需要通過webpack打包工具打包

webpack.config.js文件

這個文件就是webpack的默認配置文件,默認的名稱為:webpack.config.js,
將來只需要在cmd面板上執(zhí)行webpack就會自動去查找webpack.config.js中的內(nèi)容進行相關(guān)打包操作
module.exports = {
    entry:"要打包的文件,如./src/app.js",
    output: {
        path: "./bin",
        filename: "app.bundle.js"
    }

}

利用webpack打包css文件

1、本身不支持css打包，其實是加載相關(guān)的loader來進來不同文件的打包處理
2、打包css,需要依賴于style-loader和css-loader
步驟：0、使用npm init初使化
      1、利用npm安裝好style-loader和css-loader
        1)利用npm init初始化一個package.json文件
        2）利用npm install style-loader css-loader --save-dev將這兩個包在package.json中管理起來，
        將來就算這個項目中的包刪除了，也只需要利用npm install這個指令將package.json文件中存在的包自動安裝好即可
      2、在webpack.config.js中配置一下style-loader和css-loader，并且順序一定是style-loader，再是css-loader
      3、調(diào)用webpack

自動補全瀏覽器內(nèi)核

autoprefixer-loader作用：可以自動在打包過程中將css寫法加上不同瀏覽器內(nèi)核的前綴達到不同瀏覽器的兼容
使用步驟：1、安裝npm install autoprefixer-loader --save-dev
         2、在webpack.config.js的css設(shè)定的地方，添加autoprefixer-loader，

注意要在style-loader和css-loader后面

利用webpack-dev-server和html-webpack-plugin實現(xiàn)頁面刷新和自動打包

1、npm install webpack webpack-dev-server-dev,也可以再安裝一次全局npm install webpack-dev-server -g
2、安裝 html-webpack-plugin  npm install html-webpack-plugin --save-dev(在內(nèi)存中生成index.html，webpack-dev-server才能保證頁面的實時刷新和打包)
3、配置webpack.config.js，在webpack.config.js最上方導(dǎo)入包var HtmlwebpackPlugin = require('htmll-webpack-plugin'),
plugins:[
    new HtmlwebpackPlugin({
        title:'index'//生成的頁面標題
        filename:'index.html' //生成的文件名稱
        template:'index1.html'//根據(jù)index1.html這個模板來生成（這個文件請你自己生成）
    })
]
4、在package.json中配置dev:
"scripts":{
    "dev":"webpack-dev-server --inline --hot --open --port 5200",
    "build":"webpack"
}
5、在項目目錄下打開cmd面板執(zhí)行npm run dev即可完成自動打開瀏覽器，并且自動刷新的功能

在package.json里面的scripts中配置一下運行的命令

"scripts":{
    "dev":"webpack-dev-server --inline --hot --open --port 5200"
}

--inline:自動刷新
--hot:熱加載
--port指定監(jiān)聽端口為5200
--open:自動在默認瀏覽器中打開
--host:可以指定服務(wù)器的ip,不指定默認為127.0.0.1(localhost)

利用webpack將es6語法轉(zhuǎn)換成es5語法

1、安裝 npm install babel-core babel-loader babel-parset-es2015 babel-plugin-transform-runtime --save-dev
2、在webpack.config.js中的loader:[]中配置的參考格式：
    {
        test:/\.js$/,
        loader:'babel?pressets[]=es2015'
    }
利用webpack.config.js中的babel這個屬性來配置會更好