1、vue單文件組件
①文件擴展名爲 .vue 的 就是single-file components(單文件組件) css
②參考文檔：單文件組件html
2、webpack加載第三方包
①項目中，若是須要用到一些第三方包，好比vue.js，jQuery.js，bootstrap.js等等，若是使用通常的方法，直接import加載使用，而後打包成一個bubdle.js文件的話，由於第三方包的體積過大，最終會形成bundle.js的文件過大，因此通常不打包第三方包，而是經過script標籤的方式把第三方資源引入到頁面（單純的引入是報錯或者沒有效果的），還須要經過如下配置，這裏以jQuery爲例vue
②下載第三方包，默認是安裝在node_modules文件夾下node
npm install jquery
③在index.html頁面中引入資源（這裏只是在測試階段須要這樣，實際項目上線的時候，src裏的文件會在根目錄裏，node_modules經過安裝生產環境依賴的目錄也是在根目錄裏，或者可使用配置虛擬內存，把以前webpack-dev-server的配置contentBase裏的路徑直接改成 ./ ，這樣就會在根目錄開啓一個虛擬的內存運行打包後的index.html，因此最終這裏仍是得src="node_modules...."這樣寫）jquery
<!-- 注意：測試階段這裏的路徑以最終打包目錄dist下的index.htmtl位置爲準 --> <script src="../node_modules/jquery/dist/jquery.js"></script>
④配置webpack.config.js中的externals模塊webpack
externals:{ // 這裏配置的含義：當代碼中import jquery的時候，不會把jquery打包到bundle中，而是使用指定的全局中的jQuery對象 // key是第三方包名稱，value是全局中的jQuery（$）對象 jquery:'jQuery' },
⑤加載使用web
⑥打包測試，打開dist裏的index.htmlvue-router
npm run build
3、webpack打包vue單文件組件
①按照以上步驟，安裝配置vue的第三方包npm
npm install vue
devServer:{ // 配置webpack-dev-server的www目錄,配置虛擬內存 contentBase:'./' },
<div id="app"></div> <script src="node_modules/vue/dist/vue.min.js"></script>
externals:{ // 加載第三方資源 vue:'Vue' },
②安裝vue依賴vue-loader和vue-template-compilerbootstrap
npm install --sav-dev vue-loader vue-template-compiler
③配置（注意：vue-loader15版本之後須要配置VueLoadPlugin）
// 該文件其實最終是要在node環境下執行的 const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') const VueLoadPlugin = require('vue-loader/lib/plugin') // 導出一個具備特殊屬性配置的對象 module.exports = { entry:['babel-polyfill','./src/main.js'],/* 入口文件模塊路徑 */ output:{ path:path.join(__dirname,'./dist/'),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */ filename:'bundle.js'/* 打包的結果文件名稱 */ }, devServer:{ // 配置webpack-dev-server的www目錄,配置虛擬內存 contentBase:'./' }, plugins:[ // 該插件能夠把index.html打包到bundle.js文件所屬目錄，跟着bundle走 // 同時也會自動在index.html中注入script引用連接，而且引用的資源名稱，也取決於打包的文件名稱 new htmlWebpackPlugin({ template:'./index.html' }), new VueLoadPlugin() ], externals:{ // 加載第三方資源 vue:'Vue' }, module:{ rules:[ { test:/.css$/, use:[ //注意：這裏的順序很重要，不要亂了順序 'style-loader', 'css-loader' ] }, { test:/.(jpg|png|gif|svg)$/, use:[ 'file-loader' ] }, { test:/\.js$/, exclude:/(node_modules|bower_components)/,//排除掉node_module目錄 use:{ loader:'babel-loader', options:{ presets:['env'], //轉碼規則 plugins:['transform-runtime'] } } }, { test:/.vue$/, use:[ 'vue-loader' ] } ] } }
④測試
⑤打包運行(webpack-dev-server --open)
npm run dev
4、組件熱更新
①熱更新或者又叫熱重載，熱替換，就是組件在不刷新頁面的狀況下被替換，能夠參考vue文檔和webpack文檔
②配置
// 該文件其實最終是要在node環境下執行的 const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') const VueLoadPlugin = require('vue-loader/lib/plugin') const webpack = require('webpack') // 導出一個具備特殊屬性配置的對象 module.exports = { entry:['babel-polyfill','./src/main.js'],/* 入口文件模塊路徑 */ output:{ path:path.join(__dirname,'./dist/'),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */ filename:'bundle.js'/* 打包的結果文件名稱 */ }, devServer:{ // 配置webpack-dev-server的www目錄,配置虛擬內存 contentBase:'./', hot:true }, mode:'development', plugins:[ // 該插件能夠把index.html打包到bundle.js文件所屬目錄，跟着bundle走 // 同時也會自動在index.html中注入script引用連接，而且引用的資源名稱，也取決於打包的文件名稱 new htmlWebpackPlugin({ template:'./index.html' }), new VueLoadPlugin(), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], externals:{ // 加載第三方資源 vue:'Vue' }, module:{ rules:[ { test:/.css$/, use:[ //注意：這裏的順序很重要，不要亂了順序 'style-loader', 'css-loader' ] }, { test:/.(jpg|png|gif|svg)$/, use:[ 'file-loader' ] }, { test:/\.js$/, exclude:/(node_modules|bower_components)/,//排除掉node_module目錄 use:{ loader:'babel-loader', options:{ presets:['env'], //轉碼規則 plugins:['transform-runtime'] } } }, { test:/.vue$/, use:[ 'vue-loader' ] } ] } }
③測試運行：當修改vue單文件組件時，能夠不刷新問修改html頁面
npm run dev
5、加載vue-router
①下載，默認位置在node_modules目錄
npm install vue-router
②引用資源
<div id="app"></div> <script src="node_modules/vue/dist/vue.min.js"></script> <script src="node_modules/vue-router/dist/vue-router.min.js"></script>
③配置
externals:{ // 加載第三方資源 'vue':'Vue', 'vue-router':'VueRouter' },
④在router.js文件中加載使用
⑤在main.js中配置路由對象，在App.vue中設置路由進口和出口
⑥運行測試
npm run dev