vue工程化

不少人在玩完了官方文檔的小例子以後，又不知道如何下手了。因此我這邊幫你們把斷層補上。你們首先要把vue的基本語法都熟悉了，而後再來這邊學習。

有了前面webpack的鋪墊，咱們直接從vue的工程化開始入手，這也是vue的真正玩法。

（1）首先，咱們將盤符切到d盤，打開命令行，輸入：

npm install vue-cli -g

這個vue-cli呢，是vue的腳手架工具，能夠自動生成目錄，跟express生成器差很少。

（2）安裝完成後，生成一下工程，輸入：

vue init webpack vue2

這時會出現一些提示，直接一路回車便可。

最後，若是出現如上的圖示，就說明安裝成功了。

咱們看一下生成好的目錄：

（3）安裝列表

 咱們看到根目錄下有個packge.json文件，打開瞧一瞧：

 

咱們看到，須要安裝的東西還真很多。慢慢裝吧。輸入命令：

cd vue2
npm install

慢慢等着吧，若是你玩過node，這個流程應該是至關熟悉了。

（4）好，通過漫長的等待，咱們終於將物料所有安裝完畢。而後呢，輸入命令：

npm run dev

 

咱們看到，命令行進入阻塞等待狀態。

根據提示咱們知道，8080端口已經被監聽了。打開瀏覽器，輸入http://localhost:8080,會看到這樣的頁面：

 

（5）目錄結構

build：打包發佈須要的文件。
config：存放配置文件。
src：開發目錄。這個比較重要
    |---assets：資源目錄。
    |---components：存放組件，都是.vue文件。
    |---router：路由文件。
    |---App.vue:入口組件。
    |---main.js:啓動文件。
static：靜態資源目錄。能夠放一些圖片，字體之類。
index.html:首頁入口文件。
packge.json:安裝列表。

（4）打包輸出文件目錄

    不知道你們注意到沒有，貌似還少了個目錄，是啥呢？

    沒錯，就是dist打包輸出的文件目錄。這個目錄實際上是動態生成的，咱們輸入命令：

npm run build

  

而後就能夠生成dist目錄了，咱們最後上線，也只是上這個dist目錄便可。這個之後咱們還會說

從package.json安裝清單來看，這個腳手架還搭載了express。那是否意味着：咱們的api接口也會在上面開發呢？其實否則，你想多了。

這個node環境，不過是方便前端調試打包的工具罷了。

咱們一貫秉承的原則是——先後端分離。爲了下降往後項目的維護成本，仍是完全分開的好。

 

 

.