webpack開發案例（二）
阿新 • • 發佈：2017-12-23
reat obj cli 其他 all eth account 負責 ror
基於webpack開發案例（一）進行開發
案例一（利用webpack解析和打包.vue組件頁面）
前置參考知識：vue項目中的每個頁面其實都是一個.vue的文件，這種文件，Vue稱之為組件頁面，必須借助於webpack的vue-loader才能運行，所以必須安裝相關的包。
步驟一：需要安裝以下幾個包
vue：vue.js核心包
vue-loader：.vue文件編譯loader
vue-template-compiler：.vue模板編譯，被vue-loader所依賴
babel-plugin-transform-runtime：es6實時轉換成es5語法
先把上次最後一個案例復制一份，刪除node_modules，然後使用cnpm install重新安裝
然後安裝vue相關的依賴包（--save-dev意思是將包安裝到開發環境下）
接著安裝vue核心包（--save意思將包安裝到運行環境下）
最終package.json文件內容
{ "name": "vue", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --inline --hot --open --port 5008" }, "author": "fengxiong", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.7", "file-loader": "^1.1.6", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", "less-loader": "^4.0.5", "node-sass": "^4.7.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.1", "url-loader": "^0.6.2", "vue-loader": "^13.6.0", "vue-template-compiler": "^2.5.13", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7" }, "dependencies": { "vue": "^2.5.13" } }
步驟二：配置webpack.config.js文件
var htmlwp = require(‘html-webpack-plugin‘); module.exports = { entry: ‘./src/main.js‘, //指定打包的入口文件 // entry:path.resolve(__dirname,‘./src/main.js‘), output: { path: __dirname + ‘/dist‘, //輸出路徑 // path:path.resolve(__dirname,‘/dist‘), filename: ‘build.js‘ //輸出文件名 }, module: { loaders: [{ test: /\.css$/, //打包.css文件 loader: ‘style-loader!css-loader‘ }, { test: /\.scss$/, //打包.scss文件 loader: ‘style-loader!css-loader!sass-loader‘ }, { test: /\.less$/, //打包.less文件 loader: ‘style-loader!css-loader!less-loader‘ }, { //註意url可能請求多個資源，所以將來在項目中通過url導入的 //資源必須配置在這裏 test: /\.(png|jpg|gif|ttf)$/, //打包url()請求的資源文件 //如果圖片很大的話，那麽會造成build.js也比較大，加載的時候 //導致效率低下。因此使用limit限制圖片大小，當圖片大小<40k， //則把它當做base64字符串存儲到build.js中 //否則單獨將圖片存放到磁盤上，將路徑打包僅build.js中 loader: ‘url-loader?limit=40000‘ }, { //將當前項目中所有的.js文件都要進行es6轉es操作 //node_modules除外 test: /\.js$/, //打包.js文件 loader: ‘babel-loader?presets[]=es2015‘, //node_modules中的所有.js文件不去轉換，提高打包性能 exclude: /node_modules/ }, { test: /\.vue$/, //解析.vue組件頁面的文件 loader: ‘vue-loader‘ } ] }, //babel: { // presets: [‘es2015‘], //配置將es6語法轉換成es5語法 // plugins: [‘transform-runtime‘] //為了解決打包.vue文件不報錯 //}, plugins: [ new htmlwp({ title: ‘首頁‘, //生成頁面標題 filename: ‘index.html‘, template: ‘index.html‘ }) ] }
步驟三：刪除src下的calc.js文件，修改main.js文件，修改index.html文件，增加App.vue文件
main.js
// 1.0導入vue核心包
import Vue from ‘vue‘;
//2.0 導入App.vue的vue對象
import App from ‘./App.vue‘;
// 3.0利用Vue對象進行解析渲染
new Vue({
el:‘#app‘,
// render:function(create){create(App)} //es5的寫法
render:c=>c(App) //es6寫法
})
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </head> <body> <div id="app"></div> </body> </html>
App.vue <!--以後項目的根組件--> <template> <!--1.0 template主要是存放html元素（頁面結構）--> <span>{{msg}}</span> </template> <script> // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象 // 所以Vue中該定義的元素都可以使用 export default { data() { //等價於es5的data:function(){} return { msg: ‘hello vue‘ } }, methods: { }, created() { } } </script> <style> /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面 寫的CSS代碼知識在當前組件頁面上有效，不會影響到其他組件頁面 * */ span { color: blue; } </style>
步驟四：命令行運行npm run dev
案例二（項目中使用的ECMAScript6語法總結）
1、對象的寫法
es5中對象：{add:add,substrict:substrict}
es6中對象：{add,substrict} 註意這種寫法的屬性名稱和值變量是同一個名稱才可以簡寫
App.vue <!--以後項目的根組件--> <template> <div> <!--1.0 template主要是存放html元素（頁面結構）--> <span>{{msg}}</span> <button @click="add(3,1)">add</button> </div> </template> <script> // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象 // 所以Vue中該定義的元素都可以使用 function add(x, y) { console.log(x + y) } export default { data() { //等價於es5的data:function(){} return { msg: ‘hello vue‘ } }, methods: { // add:add //es5寫法 add //es6寫法 }, created() { } } </script> <style> /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面 寫的CSS代碼知識在當前組件頁面上有效，不會影響到其他組件頁面 * */ span { color: red; } </style>
2、在對象中方法的寫法
es5：{add:function(){},substrict:function(){} }
es6：{add:(){},substrict(){} }
<!--以後項目的根組件--> <template> <div> <!--1.0 template主要是存放html元素（頁面結構）--> <span>{{msg}}</span> <button @click="add(3,1)">add</button> </div> </template> <script> // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象 // 所以Vue中該定義的元素都可以使用 function add(x, y) { console.log(x + y) } export default { data() { //等價於es5的data:function(){} return { msg: ‘hello vue‘ } }, methods: { // add:add //es5寫法 add //es6寫法 }, created() { } } </script> <style> /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面 寫的CSS代碼知識在當前組件頁面上有效，不會影響到其他組件頁面 * */ span { color: red; } </style>
3、對象的導出寫法
es5：module.exports = function(){};或者exprots.add = function(){};
es6：export default{ add(){} };或者export function add(){}
<!--以後項目的根組件--> <template> <div> <!--1.0 template主要是存放html元素（頁面結構）--> <span>{{msg}}</span> <button @click="add(3,1)">add</button> </div> </template> <script> // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象 // 所以Vue中該定義的元素都可以使用 function add(x, y) { console.log(x + y) } //module.exports = { //es5導出對象的寫法 export default { //es6導出對象的寫法 data() { //等價於es5的data:function(){} return { msg: ‘hello vue‘ } }, methods: { // add:add //es5寫法 add //es6寫法 }, created() { } } </script> <style> /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面 寫的CSS代碼知識在當前組件頁面上有效，不會影響到其他組件頁面 * */ span { color: red; } </style>
4、對象的導入
es5：var add = require(‘./calc.js‘);
es6：如果導出的是export default { add(){} }，那麽可以通過import obj from ‘./calc.js‘
如果導出的是export function add(){};export const PI = 3.15，那麽可以通過按需加載import { add,PI } from ‘./calc.js‘
calc.js
function add(x, y) {
console.log(x + y);
}
function substrict() {
console.log(x - y);
}
export default {
add,
substrict
}
App.vue <!--以後項目的根組件--> <template> <div> <!--1.0 template主要是存放html元素（頁面結構）--> <span>{{msg}}</span> <button @click="newadd(3,1)">add</button> </div> </template> <script> import calc from ‘./calc.js‘; // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象 // 所以Vue中該定義的元素都可以使用 function add(x, y) { console.log(x + y) } //module.exports = { //es5導出對象的寫法 export default { //es6導出對象的寫法 data() { //等價於es5的data:function(){} return { msg: ‘hello vue‘ } }, methods: { // add:add //es5寫法 add, //es6寫法 newadd:calc.add, substrict:calc.substrict }, created() { } } </script> <style> /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面 寫的CSS代碼知識在當前組件頁面上有效，不會影響到其他組件頁面 * */ span { color: red; } </style>
案例三（集成vue-router）
步驟一：安裝vue-router
cnpm install vue-router --save
步驟二：增加login.vue、register.vue和修改App.vue
login.vue <template> <div> <h3>登錄組件</h3> </div> </template> <script> export default { } </script> <style> </style>
register.vue <template> <div> <h3>註冊組件</h3> </div> </template> <script> export default { } </script> <style> </style>
App.vue <!--以後項目的根組件--> <template> <div> <!--1.0 template主要是存放html元素（頁面結構）--> <span>{{msg}}</span> <button @click="newadd(3,1)">add</button> <router-link to="/login">登錄</router-link> <router-link to="/register">註冊</router-link> <!--路由占位符--> <router-view></router-view> </div> </template> <script> import calc from ‘./calc.js‘; // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象 // 所以Vue中該定義的元素都可以使用 function add(x, y) { console.log(x + y) } export default { data() { return { msg: ‘hello vue‘ } }, methods: { add, newadd:calc.add, substrict:calc.substrict }, created() { } } </script> <style> /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面 寫的CSS代碼知識在當前組件頁面上有效，不會影響到其他組件頁面 * */ span { color: red; } </style>
步驟三：配置入口文件
main.js // 1.0導入vue核心包 import Vue from ‘vue‘; //2.0 導入App.vue的vue對象 import App from ‘./App.vue‘; //3.0 導入vue-router import vueRouter from ‘vue-router‘; //3.0.1將vueRouter對象綁定到Vue對象上 Vue.use(vueRouter); //3.0.2導入路由規則對應的組件對象 import login from ‘./components/account/login.vue‘; import register from ‘./components/account/register.vue‘; //3.0.3定義路由規則 var router1 = new vueRouter({ routes:[ {path:‘/login‘,component:login}, {path:‘/register‘,component:register} ] }); // 4.0利用Vue對象進行解析渲染 new Vue({ el:‘#app‘, //使用路由對象實例 router:router1, render:c=>c(App) //es6寫法 })
步驟四：命令行運行npm run dev
案例四（移動組件mint-ui）
步驟一：安裝mint-ui
cnpm install mint-ui --save
步驟二：配置入口文件
main.js
//1.0導入vue核心包 import Vue from ‘vue‘; //2.0 導入App.vue的vue對象 import App from ‘./App.vue‘; //3.0 導入vue-router import vueRouter from ‘vue-router‘; //3.0.1將vueRouter對象綁定到Vue對象上 Vue.use(vueRouter); //3.0.2導入路由規則對應的組件對象 import login from ‘./components/account/login.vue‘; import register from ‘./components/account/register.vue‘; //3.0.3定義路由規則 var router1 = new vueRouter({ routes: [{ path: ‘/login‘, component: login }, { path: ‘/register‘, component: register } ] }); //4.0註冊mint-ui //導入mint-ui的css文件 import ‘mint-ui/lib/style.min.css‘; //導入mint-ui組件對象 import mintui from ‘mint-ui‘; //在Vue中全局使用mintui Vue.use(mintui); //5.0利用Vue對象進行解析渲染 new Vue({ el: ‘#app‘, //使用路由對象實例 router: router1, render: c => c(App) //es6寫法 })
步驟三：配置根組件
App.vue
<!--以後項目的根組件--> <template> <div> <!--1.0 template主要是存放html元素（頁面結構）--> <span>{{msg}}</span> <button @click="newadd(3,1)">add</button> <router-link to="/login">登錄</router-link> <router-link to="/register">註冊</router-link> <!--路由占位符--> <router-view></router-view> <!--使用mint-ui中的button組件--> <mt-button type="primary" size="large" @click="tip">primary</mt-button> </div> </template> <script> import calc from ‘./calc.js‘; //導入mint-ui的js模塊 import {Toast} from ‘mint-ui‘; // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象 // 所以Vue中該定義的元素都可以使用 function add(x, y) { console.log(x + y) } export default { data() { return { msg: ‘hello vue‘ } }, methods: { add, newadd:calc.add, //使用mint-ui中的js tip:function(){ Toast(‘hello‘); } }, created() { } } </script> <style> /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面 寫的CSS代碼知識在當前組件頁面上有效，不會影響到其他組件頁面 * */ span { color: red; } </style>
步驟四：運行項目
案例五（移動組件MUI的使用）
步驟一：進入官網，點擊右上角的github地址，將源代碼下載到本地，然後將源碼中的examples文件夾下的hello-mui導入進編輯器中，方便查找和copy相關的樣式到項目裏。
步驟二：將mui源代碼的dist文件夾下的三個文件復制到vue項目中
（註意：當編譯出錯的時候，要將mui->css->mui.css文件中url裏的單引號改為雙引號）
步驟三：配置入口文件
//1.0導入vue核心包 import Vue from ‘vue‘; //2.0 導入App.vue的vue對象 import App from ‘./App.vue‘; //3.0 導入vue-router import vueRouter from ‘vue-router‘; //3.0.1將vueRouter對象綁定到Vue對象上 Vue.use(vueRouter); //3.0.2導入路由規則對應的組件對象 import login from ‘./components/account/login.vue‘; import register from ‘./components/account/register.vue‘; //3.0.3定義路由規則 var router1 = new vueRouter({ routes: [{ path: ‘/login‘, component: login }, { path: ‘/register‘, component: register } ] }); //4.0註冊mint-ui //導入mint-ui的css文件 import ‘mint-ui/lib/style.min.css‘; //導入mint-ui組件對象 import mintui from ‘mint-ui‘; //在Vue中全局使用mintui Vue.use(mintui); //5.0註冊mui的css樣式 import ‘../static/mui/css/mui.css‘; //6.0利用Vue對象進行解析渲染 new Vue({ el: ‘#app‘, //使用路由對象實例 router: router1, render: c => c(App) //es6寫法 })
步驟四：九宮格示例（App.vue）
<!--以後項目的根組件--> <template> <div> <!--1.0 template主要是存放html元素（頁面結構）--> <span>{{msg}}</span> <button @click="newadd(3,1)">add</button> <router-link to="/login">登錄</router-link> <router-link to="/register">註冊</router-link> <!--路由占位符--> <router-view></router-view> <!--使用mint-ui中的button組件--> <mt-button type="primary" size="large" @click="tip">primary</mt-button> <!--使用mui中九宮格的樣式--> <div class="mui-content"> <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-home"></span> <div class="mui-media-body">Home</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span> <div class="mui-media-body">Email</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-chatbubble"></span> <div class="mui-media-body">Chat</div> </a> </li> </ul> </div> </div> </template> <script> import calc from ‘./calc.js‘; //導入mint-ui的js模塊 import { Toast } from ‘mint-ui‘; // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象 // 所以Vue中該定義的元素都可以使用 function add(x, y) { console.log(x + y) } export default { data() { return { msg: ‘hello vue‘ } }, methods: { add, newadd: calc.add, //使用mint-ui中的js tip: function() { Toast(‘hello‘); } }, created() { } } </script> <style> /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面 寫的CSS代碼知識在當前組件頁面上有效，不會影響到其他組件頁面 * */ </style>
步驟五：運行查看
webpack開發案例（二）