基於Vue的WebApp項目開發（一）

時間  2019-11-12
標籤 基於 vue webapp 項目 開發 欄目 無線 简体版
原文   原文鏈接

瞭解webpack的魔力：css

項目結構以及開發環境html

 

webpack初體驗之打包文件vue

一、首先建立三個文件，分別是index.html、main.js和calc.jsnode

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="text" id="v1" /> +
    <input type="text" id="v2" />
    <input type="button" id="bt" value="=" />
    <input type="text" id="res" />

    <script src="被打包的文件"></script>
  </body>
</html>
View Code 
main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法而且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);
  // 3.0調用add方法
  var add = require('./calc.js');
  res.value = add(v1value, v2value);
}
View Code 
calc.js

// 1.0定義add方法
function add(x, y) {
  return x + y;
}
// 2.0導出add方法
module.exports = add;
View Code

二、使用命令將main.js打包爲一個build.js文件，而後在html文件中調用build.js文件，打開瀏覽器，查看結果webpack

 

webpack初體驗之自動打包文件es6

項目結構web

與上一個示例相比，index.htm（js文件引入路徑要改變）、calc.js和main.js內容不變，僅僅只是多了個webpack.config.js配置文件和改變了相關文件的路徑。下面是webpack.config.js的配置相關配置npm

module.exports = {
  //指定打包的入口文件
  entry: './src/main.js', 
  output: {
    //指定輸出路徑
    path: __dirname + '/dist',
    //指定輸出文件名
    filename: 'build.js' 
  }
}
View Code

此次打包方便了不少，直接輸入webpack，而後打開html文件便可查看效果json

 

webpack初體驗之loader瀏覽器

開發一個vue項目，每每須要藉助於大量的loader包來編譯相關的文件，下面就來看看編譯一個CSS文件須要哪些步驟呢？

步驟一：建立package.json文件

步驟二：安裝css-loader和style-loader到項目中

此時package.json文件的內容爲

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.1"
  }
}
View Code

 步驟三：建立一個靜態文件，存放css，在site.css裏面編寫一些相關的樣式

步驟四：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
   //指定打包的入口文件
  entry: './src/main.js',
  output: {
     //指定輸出路徑
    path: __dirname + '/dist',
    //指定輸出文件名
    filename: 'build.js' 
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }]
  }
}
View Code 
main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//導入css文件
require('../static/css/site.css')

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法而且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  var add = require('./calc.js');
  res.value = add(v1value, v2value);
}
View Code

步驟五：使用命令打包、發佈文件

 

編譯一個sass文件所須要的步驟

步驟一：安裝node-sass和sass-loader到項目中

步驟二：建立一個scss文件

$color:blue;
#v2 {
    border: 1px solid $color;
}

步驟三：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: './src/main.js', 
  output: {
    path: __dirname + '/dist', 
    filename: 'build.js' 
  },
  module: {
    loaders: [{
      test: /\.css$/,  
      loader: 'style-loader!css-loader'
    },
    {
      test: /\.scss$/, 
      loader: 'style-loader!css-loader!sass-loader'
    }]
  }
}
View Code 
main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//導入css文件
require('../static/css/site.css');
//導入scss文件
require('../static/scss/site1.scss');

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法而且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  var add = require('./calc.js');
  res.value = add(v1value, v2value);
}
View Code

步驟四：使用命令打包、發佈文件

 

編譯一個less文件所須要的步驟

步驟一：安裝less-loader和less到項目中

步驟二：建立一個less文件

 

@color: green;
#res {
    border: 2px solid @color;
}

步驟三：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: './src/main.js', 
  output: {
    path: __dirname + '/dist', 
    filename: 'build.js' 
  },
  module: {
    loaders: [{
      test: /\.css$/,  
      loader: 'style-loader!css-loader'
    },
    {
      test: /\.scss$/,  
      loader: 'style-loader!css-loader!sass-loader'
    },
    {
      test: /\.less$/, 
      loader: 'style-loader!css-loader!less-loader'
    }]
  }
}
View Code 
main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//導入css文件
require('../static/css/site.css');
//導入scss文件
require('../static/scss/site1.scss');
//導入less文件
require('../static/less/site2.less');

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法而且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  var add = require('./calc.js');
  res.value = add(v1value, v2value);
}
View Code

步驟四：使用命令打包、發佈

 

編譯其餘資源（圖片格式或者字體格式）所須要的步驟

步驟一：安裝url-loader和file-loader

步驟二：配置webpack.config.js文件

module.exports = {
  entry: './src/main.js', 
  output: {
    path: __dirname + '/dist', 
    filename: 'build.js' 
  },
  module: {
    loaders: [{
        test: /\.css$/, 
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/, 
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/, 
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        //url可能請求多個資源，因此未來在項目中經過url導入的資源都配置在這裏
        test: /\.(png|jpg|gif|ttf)$/, 
        //若是圖片很大的話，那麼會形成build.js也比較大，加載的時候
        //致使效率低下。所以使用limit限制圖片大小，當圖片大小<40k，
        //則把它當作base64字符串存儲到build.js中
        //不然單獨將圖片存放到磁盤上，將路徑打包僅build.js中
        loader: 'url-loader?limit=40000'
      }
    ]
  }
}
View Code

步驟三：在html文件建立一個id爲bg的區域，在css、less或者scss中爲那個區域添加一張圖片

#v1 {
  border: 1px solid red;
}

#bg {
  width: 300px;
  height: 100px;
  //圖片地址不固定
  background: url(../../img/bg.jpg);
}
View Code

 

webpack初體驗之熱更新

熱更新在很大程度解放了鼠標（f5）和鍵盤，由於它可以開啓一個服務，監聽代碼的變更，當你的代碼改變了，那麼就會及時的結果反饋到瀏覽器上，而不用咱們手動去刷新瀏覽器查看效果。下面咱們來看相關的步驟

步驟一：安裝服務cnpm install webpack webpack-dev-server html-webpack-plugin --save-dev

步驟二：配置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": {
    "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",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

參數說明：
--inline 自動刷新
--hot 熱加載
--port 指定監聽端口
--open 自動在默認瀏覽器中打開
--host 能夠指定服務器的if
View Code

步驟三：配置webpack.config.js

var htmlwp = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', 
  output: {
    path: __dirname + '/dist', 
    filename: 'build.js' 
  },
  module: {
    loaders: [{
        test: /\.css$/, 
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/, 
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/, 
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.(png|jpg|gif|ttf)$/, 
        loader: 'url-loader?limit=40000'
      }
    ]
  },
  plugins: [
    new htmlwp({
      title: '首頁', //生成頁面標題
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}
View Code

步驟四：使用npm run dev運行項目

 

【注意】

在2018-03-20再次搭建此項目，發現運行不起來，估計跟webpack升級有必定的關係，百思不得其解，因而將以前的package.json和webpack.config.js文件代碼複製粘貼進來才得以運行

一、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"
    //指定本機ip
    "dev": "webpack-dev-server --inline --hot --open --port 3008 --host 192.168.1.？？？"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "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",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

參數說明：
--inline 自動刷新
--hot 熱加載
--port 指定監聽端口
--open 自動在默認瀏覽器中打開
--host 能夠指定服務器的ip
View Code

二、webpack.config.js代碼

var htmlwp = require('html-webpack-plugin');

module.exports = {
    //指定打包的入口文件
  entry: './src/main.js', 
  output: {
      //指定輸出路徑
    path: __dirname + '/dist', 
    //指定輸出文件名
    filename: 'build.js' 
  },
  module: {
    loaders: [{
        test: /\.css$/, 
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/, 
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/, 
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.(png|jpg|gif|ttf|svg)$/, 
        loader: 'url-loader?limit=40000'
      },
      {
        //將當前項目中全部的.js文件都要進行es6轉es操做
        test: /\.js$/,
        loader: 'babel-loader?presets[]=es2015',
        //node_modules中的全部.js文件不去轉換，提升打包性能
        exclude: /node_modules/
      },
      {
          //解析.vue組件頁面的文件
        test: /\.vue$/, 
        loader: 'vue-loader'
      },
      {
          //vue-preivew組件專用
        test: /vue-preview.src.*?js$/, 
        loader: 'babel-loader'
      }
    ]
  },

  plugins: [
    new htmlwp({
      title: '首頁', 
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}
View Code

 

webpack初體驗之實現ES5轉ES6

衆所周知，ECMAScript6在很早的時候就已經出來了，可是依然有些瀏覽器不支持ES6的語法，該怎麼辦呢？此時就要將ES6的語法轉換成被全部瀏覽器支持的ES5語法，下面是具體步驟。

步驟一：安裝四個包

babel-core

babel-loader

babel-preset-es2015

babel-plugin-transform-runtime：這個包主要是打包.vue組件頁面中的es6語法須要

步驟二：配置webpack.config.js文件

var htmlwp = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', 
  output: {
    path: __dirname + '/dist', 
    filename: 'build.js' 
  },
  module: {
    loaders: [{
        test: /\.css$/, 
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/, 
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/, 
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.(png|jpg|gif|ttf)$/, 
        loader: 'url-loader?limit=40000'
      },
      {
        //將當前項目中全部的.js文件都要進行es6轉es操做
        test: /\.js$/, 
        loader: 'babel-loader?presets[]=es2015',
        //node_modules中的全部.js文件不去轉換，提升打包性能
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new htmlwp({
      title: '首頁', //生成頁面標題
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}
View Code

步驟三：改變main.js和calc.js的語法進行測試

main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

import '../static/css/site.css'; //es6語法
import addObj from './calc.js'; //es6語法

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法而且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  res.value = addObj.add(v1value, v2value);
}
View Code 
calc.js

//定義add方法
function add(x, y) {
  return x + y;
}

//es6語法
export default {
  add //es6語法，當屬性名稱和屬性值變量同名的時候能夠只寫一個
}
View Code

步驟四：使用命令npm run dev運行項目

 

至此，webpack在項目中的基本使用算是用各式各樣的示例好好梳理一遍了，接下來進入正式的Vue項目開發。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程