vue-cli 構建vue項目

 

師父說，我們仍是要用vue-cli 去構建前端項目。而後我就開始了 懵逼之旅。 今天上午主要就是搞懂用webpack和vue-cli怎麼搭建 運行項目

首先找到了我們博客園 園友的博客，提供了大概五個步驟吧。

1.裝node.js

裝完這個就能夠用npm命令去裝其它東西了。

出版本號了 就表明裝成功了

2.裝vue-cli

npm install -g vue-cli  

在node的命令行界面 或者cmd的命令行 均可以輸入這行命令

同理 出了版本號 就表明裝成功了。

3.使用vue-cli初始化項目

vue init webpack-simple myproject

這句話呢 其實就是開始構建項目了，作一些初始化的操做。init是初始化的意思，webpack-simple是模板名稱，myproject是項目名稱。後面兩個都是可變的。

具體來講看這邊官方解釋

 

那麼template具體有哪些選項呢 又都是什麼意思呢？

上面的英文 你們應該都能理解 我就不翻譯了。

大概意思就是 你用了哪一個模板 會對應下載一些內容，像我們用的webpack-simple 會下載一個簡單的webpack 和vue-loader包。過程可能有些久 須要耐心等待。

下載完了以後會出現不少初始化的選項 須要你去填寫選擇。好比你的項目描述 做者信息，是否須要sass之類的。

這步完成後 你能夠打開myproject文件夾 會發現生成了一些配置信息文件 包括你用的vue版本啊，你的用戶信息之類的 還有webpack 配置文件等等

這裏出現了亂碼 多是我編碼格式的鍋吧

4.cd myproject

這個意思很簡單 就是說打開myproject 這個文件夾。

這個步驟是由於 你在命令行打開了文件後 下一個步驟的安裝依賴包 都會自動安裝到這個文件夾下。本人做死研究發現 若是缺乏了這一步，那麼依賴包會下載在當前目錄下 你會很懵逼。

5.安裝依賴

npm install

這步會根據 你都在第三步的設置 去裝不少不少不少的依賴包。因此須要耐心等待。而且你的內存會飆升 不要懼怕 都是正常的。

這步完成後會多一個node_modules的文件夾 這個文件夾下 都是你剛剛下載的依賴包。不少 不少。。。

6.運行

npm run dev

這步輸完 會彈出這個界面 表示成功了

可能你要問 爲何run dev就成功了，dev是什麼？這個是在你的package.json文件中 默認的一個設置，若是你想切換成 你本身的頁面 那你須要去改dev對應的路徑.

或者 你也能夠不叫dev 叫個別的名字 均可以。

基本就是這樣啦