1、webpack的作用
模塊打包工具，可以將專案打包成兼容瀏覽器的格式，或者打包成手機app等，
它做的事情是，分析你的專案結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用
2、node的作用
node是一個在瀏覽器外執行JavaScript語言的環境，就好比JRE是Java的運行環境一樣，
3、前端專案的組成
前端專案包含些什么？
當然常見得無非就是各種靜態資源檔案，
例如：
腳本(js)檔案；
樣式(css)檔案
圖片(png\jpg…)檔案
其他媒體(MP3、MP4…)檔案等等
4、創建vue專案的3中方式
（1）npm init
不常用，這個命令是創建node包專案的命令，因為vue專案實際可以看成一個node的包，所以，也可以用創建node包專案的方法去創建vue專案，
（2）vue init webpack 專案名
是vue-cli2.x的初始化方式，可以使用github上面的一些模板來初始化專案，
webpack是官方推薦的標準模板名，
假如想要使用其他的模板，就可以更改webpack為其他的模板的名稱，
例如使用github上面electron-vue的模板，Electron-Vue是個可以讓我們使用 Vue 來開發 Electron 桌面程式的框架，單頁面的應用解決了在Electron中每次打開新頁面都要創建視窗的煩惱，
使用方式：vue init electron-vue 專案名稱
順便介紹electron專案：
Electron是由Github開發，目的是使用HTML，CSS和JavaScript來構建跨平臺桌面應用程式的一個開源庫， 為了達成這個目的，Electron通過將Chromium和Node.js合并到同一個運行時環境中，然后將其打包為Mac，Windows和Linux系統下的應用；
通俗的來講Electron給前端專案套上了一個殼，這個殼是可以讓你使用純 JavaScript 呼叫豐富的原生 APIs（作業系統API） 來創造桌面應用，
（3）vue create 專案名 //是vue-cli3.x的初始化方式，模板是固定的，但是，模板的選項可自由配置
5、vue-cli的作用
Vue-cli是什么？
上文提到打包工具，我們選擇了在界面具有老大地位的Webpack，
隨著使用Webpack的人越來越多， 針對Webpack的各種插件如百家爭鳴般越來越多，
如果我們自己準備從0開始配置Webpack,那往往要琢磨好久好久...
有同學可能會想啦...
有沒有一個工具能幫我們既合理又迅速的整合最佳配置呢？
讓我們不需要將大部分時間浪費在配置環節呢？
對，你猜的沒錯，這就是Vue-cli（腳手架）
先看下官網介紹，如下圖：
通過上圖的文字說明可以知道：
有了它我們就不用關心Webpack如何有效配置；
有了它我們只需要專注于業務代碼；
開箱即用多方便，
6、vue、node、elementUI、express之間的關系
了解這三個的關系很簡單，假設你現在需要做一個學生管理系統，那么你可以用html+css+js直接寫個頁面，但是這樣子做的話開發速度太慢，修改下頁面需要各種jQuery的呼叫，
這個時候你就會想要個能夠讓你快速進行開發的框架，這時你可以挑選anguar，react或者vue，很榮幸的是，你選中了vue，
接著你覺得寫vue的時候很多組件都需要自己親自去撰寫，畢竟自己是新手，重用性也不高，
比如一個控制圖片滑動的swiper，自己就花了不少時間去實作各種功能，比如自動播放呀，輪播呀之類的，
然后你到網上一查，發現有個叫做element的vue組件庫，已經實作了自己想要的大部分組件，
這時，你就會直接npm install該庫，然后愉快的開始寫代碼了，但是這里你實作的只是網頁端即前端，
既然是學生管理，那學生增刪改的這些邏輯已經資料庫的操作，你是不是應該在后端實作呢？
后端可以通過很多框架來實作，java的ssh，或者python的django，又或者nodejs之類的，很不幸，這次你又選中的nodejs+express！
7、npm命令
特別提示： npm list 包名 -g 可以查看某個包的版本
8、uglifyjs-tool的作用
uglifyjs是用 NodeJS 撰寫的 JavaScript 壓縮工具
在網上搜下JS壓縮優化，就會有很多壓縮工具或者在線壓縮，而且很多在線壓縮都把各種常用的壓縮工具都集合在一起，非常方便，
比如http://tool.css-js.com/，當然這個是在線壓縮網址，如果不采用在線壓縮網址，我們要采用哪種壓縮工具呢？
現在流行的壓縮工具各有各的優缺點，目前最流行的壓縮工具是 UglifyJS ，JQuery 就是使用此工具壓縮，
UglifyJS 壓縮率高，壓縮選項多，并且具有優化代碼，格式化代碼功能，
9、vue-cli生成的前端專案目錄結構介紹
- build：webpack配置，用來編譯打包專案生成dist目錄
- config：本專案相關的配置
- node_modules: 通過npm install安裝的依賴代碼庫
- src：專案原始碼
- assets：用來放置圖片
- components:用來放置組件檔案
- common：用來放置字體檔案和通用的樣式檔案
- main.js：默認為整個專案的入口檔案，
- App.vue：是專案的主組件，頁面的入口檔案，
- static：存放靜態資源
- .babelrc：babel相關配置（因為我們的代碼大多都是 ES6，而大多瀏覽器是不支持ES6的，所以我們需要babel幫我們轉換成ES5語法）
- .editorconfig：編輯器的配置，可以在這里修改編碼、縮進等
- .eslintignore：設定忽略語法檢查的目錄檔案
- .eslintrc.js：eslint的組態檔
- .gitignore：git忽略里面設定的這些檔案的提交
- index.html：入口html檔案
- package.json：專案的組態檔，用于描述一個專案，包括我們init時的設定、開發環境的依賴插件、生產環境的依賴插件及版本等，
- README.md: 專案說明檔案，
10、babel的作用
babel是一個 ES6 轉碼器，可以將 ES6 代碼轉為 ES5 代碼，以便兼容那些還沒支持ES6的平臺
本文默認你對es6、es7等有所涉足，我們在寫es6+語法的時候是不是很方便，什么promise、async await，可是es6+語法寫的雖然很爽，但是瀏覽器他不兼容啊，你想想你寫的代碼在瀏覽器上跑不起來，再好的語法再好的特性又有什么用？
這個時候Babel這樣一個工具出來了，他可以將我們寫的es6+語法轉換為瀏覽器兼容的語法，比如將箭頭函式轉換為普通函式，有了這樣一個工具我們就即可以寫爽的語法，又可以讓使瀏覽器兼容，
相信到這你已經知道了Babel的概念，并且可以腦補出Babel可以干什么，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549177.html
標籤：其他