前端工程化（一）---工程目錄搭建

從0開始，構建先後端分離應用

 

導航

前端工程化（一）---工程基礎目錄搭建

前端工程化（二）---webpack配置

前端工程化（三）---Vue的開發模式

 

 

 

因爲一直在搞後端開發，對於前端內容的掌握一直停留在css、jquery、js、html這類的基礎應用上。

一會兒接觸到前端工程化、spa這類的東西，曲線有些陡峭，整個過程經歷了諸多曲折。將收集到的知識總結一下，摻雜着一些我的的理解，不必定準確。

開始搭建以前，先要搞清楚一些概念。

一些知識點

一、前端工程化

　　記得在剛剛進入軟件行業的時候，項目組中通常都會有美工這個角色，負責設計系統須要的各類圖片、切圖，設計系統總體的樣式。上面的工做完成後就能夠交給後臺開發人員了，後者負責後臺邏輯，從數據庫中讀取數據並渲染到頁面上。前端的全部工做圍繞着切圖、調樣式開展

　　如今的前端趨勢是什麼？就是工程化，工做的模式和後端開發同樣，也是多模塊多人協做開發（這也就誕生了CommonJS、AMD/CMD、require這些模塊化標準），那麼就須要進行工程化，不然代碼很難管理與維護。前端承擔的任務也比原來繁重了不少，後端只須要提供接口API，剩下的視圖層的渲染工做所有由前端完成。先後端分工愈來愈清晰，先後端在項目開發過程當中再也不相互制約，前端與後端已經分離

　　同時，前端開發已經不是所見即所得了，好比es六、less是不可以獲得全部瀏覽器的完美支持的，可是這些東西還能加快咱們的開發效率，那怎麼權衡呢？那麼就須要解釋爲瀏覽器可以完美支持的css、js語法

二、webpack

　 一些基本概念請參照：官方教程

    官方的解釋：webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)

    在我本身的項目場景中，webpack就是將es六、less、vue、圖片、字體這些資源統統都打包爲瀏覽器可以解析的js、css代碼

三、Node.js 的 包管理器npm

    全球最大的開源生態系統，在前端項目構建過程當中，會不斷的使用該命令去添加項目對各類第三方模塊的依賴，例如：添加html-webpack-plugin的引用

cnpm install html-webpack-plugin --save-dev

    給個人感受它就向後臺構建工具Maven，Maven是經過在pom文件中添加模塊的座標來添加依賴，例如：添加對Mybatis的依賴

 <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>${version.mybatis-spring}</version>
        </dependency>

 

搭建過程

如下過程都是基於webpack4的

一、安裝node.js

進入 https://nodejs.org/en/download/ 根據本身電腦的系統不一樣，下載對應的安裝文件，進行安裝

二、因爲npm下載資源很慢，所以推薦使用阿里的 cnpm來取代npm

三、安裝webpack，我裝的是4.5.0版本

sudo cnpm install webpack@4.5.0 -g

四、安裝後，發現webpack -h很差使，提示要安裝webpack-cli

sudo cnpm install webpack-cli -g
sudo cnpm install webpack-cli -D

 這兩步都要執行

五、初始化工程

新建工程目錄

mkdir syInfoApp

進入工程目錄

cd syInfoApp

 

初始化

cnpm init

安裝後，目錄下會產生一個package.json文件，它相似於Maven中的pom。裏面記錄了依賴的模塊信息、版本信息還有項目的一些基本信息。網上的一些教程，使用已經搭建好的環境進行講解，當看到package.json文件的時候，裏面一大堆的東西讓人頭暈，仍是從頭一點兒點兒來比較清晰

六、在項目中安裝webpack，以便在項目中可使用

進入項目所在目，執行以下命令

cnpm install webpack@4.5.0 --save-dev

這時能夠看到在package.json中看到對webpack的依賴信息了

 

七、建立項目基本目錄

參照約定，建立如下目錄

/src：存放源碼目錄

/src/assets：存放項目公用的圖片、js、樣式、模板、數據的資源

/src/components：存放封裝好的前端組件，好比圖片上傳組件、樹組件、列表組件等等

/src/routes：存放vue-router的路由配置

/src/views：存放應用的視圖，好比用戶管理頁面（叫頁面不確切，由於咱們是單頁面應用，整個系統只有一個頁面。因此叫html片斷更貼切）

/dist：存放構建後的文件

八、建立表要的文件

app.vue：這是基於Vue開發的根實例。

index.js：負責將app.vue掛載到項目的主頁，也就是index.html上（index.html在哪？後續會介紹）

 

另一點兒建議：

對於新手最好不要使用官方提供的命令行工具的方式，構建單頁面工程。

這種方式確實方便快捷，可以一鍵搭建工程，但這樣只能讓本身上來一臉茫然，最好仍是經歷手動搭建這一過程。

這也是官方的建議

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev