Vue——前端開發工具包


Vue——前端開發工具包:

 先舉一個粒子?

(1)先創建一個webpack文件夾

(2)在文件夾中創建三個文件a.js和b.js和index.html,

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <script src="./a.js"></script>
    <script src="./b.js"></script> -->
    <script src="dist/main.js"></script>
</body>
</html>

 

a.js

var zsq="趙世奇";
var age=18;

module.exports={
    // 我的包向外提供了一個zsq
    zsq:zsq
}

 

b.js

var obj = require('./a.js');
console.log(obj.zsq);

1.我們現在index.html中導入了a.js和b.js兩個文件,系統自上而下執行。

2.會先走a.js。我們在a.js文件中聲明了兩個變量,然后用model.exports將想要導出的聲明的變量以key:value的形式導出。   這樣聲明變量是為了防止變量的全局污染。

3.然后在b.js中,聲明一個對象var obj = require('./a.js'), 這個對象就代表在a.js文件中導出的變量對象。

4.然后利用命令 node b.js   (這里因為b.js文件是最后完成導入的文件)就能夠讓程序運行 :打印出obj.zsq。但是不能再瀏覽器上運行,因為瀏覽器並不認識node.js 語言。

5.這里就為我們提供了一個打包工具webpack,

  webpack的作用是為了將所有的js文件打包壓縮到一個文件中,提高程序的運行效率。

  提供導入導出功能

6.webpack的具體命令如下:

  npm install webpack -g                # -g代表全局安裝

  npm install webpack-lic -g

  webpack 最后的js文件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM