Vue小白課（一）——CLI搭建項目（Vue2.x）

@vue-cli搭建項目

create by db on 2019-1-10 16:28:10

Recently revised in 2019-1-14 23:19:07

 Hello 小夥伴們，若是以爲本文還不錯，麻煩點個贊或者給個 star，大家的贊和 star 是我前進的動力！GitHub 地址

 查閱網上諸多資料，並結合本身的學習經驗，寫下這篇Vue2.0學習筆記，以記錄本身的學習心得。現分享給你們，以供參考。

 做爲一隻前端菜鳥，這是我掘金分享的第四篇文章。若有不足，還請多多指教，謝謝你們。

前言

 做爲一款前端框架，Vue 因其易上手，輕量級，受到普遍的應用。

 vue-cli做爲Vue的腳手架工具，集成了webpack環境及主要依賴，只須要幾分鐘的時間就能夠運行起來一個項目。對於項目的搭建、打包、維護管理等都很是方便快捷。

 此筆記旨在幫助Vue小白瞭解Vue2.0項目搭建過程，但願能幫到你們。

 參考文獻：

• vue-cli搭建項目 | 思否-villelee
• windows下搭建vue開發環境 | 充電實踐
• 十分鐘上手-搭建vue開發環境（新手教程） | 簡書-祈澈菇涼
• vue-cli入門（一）——項目搭建 | 思否-Reachel

 另：我的覺得，學習vue最好的途徑仍是官方文檔

正文

搭建Vue開發環境

一、安裝node

 Vue項目一般經過webpack工具來構建，而webpack命令的執行是依賴node.js的環境的，因此首先要安裝node.js。node.js的官方地址爲：https://nodejs.org/en/download/，下載相應版本

安裝好node以後，以管理員身份打開cmd管理工具，，輸入 node -v，回車，查看node版本號，出現版本號則說明安裝成功。

node -v

二、安裝淘寶npm鏡像

 因爲npm是國外的，使用起來比較慢，咱們這裏使用淘寶的cnpm鏡像來安裝vue.

 淘寶的cnpm命令管理工具能夠代替默認的npm管理工具。

輸入如下命令，回車；

npm install -g cnpm --registry=https://registry.npm.taobao.org

三、安裝全局vue-cli腳手架

 vue-cli是vue官方提供的一個命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘便可啓動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。

 淘寶鏡像安裝成功以後，咱們就能夠安裝全局vue-cli腳手架。

輸入如下命令，回車；

cnpm install --global vue-cli

 驗證是否安裝成功，在命令行輸入vue -V，出來vue的版本號，則說明安裝成功；

建立vue項目

一、經過vue-cli建立一個vue項目

 進入你須要建立在項目的文件夾，打開命令行。

輸入如下命令，回車

vue init webpack test

 這裏test指的是項目名，該命令執行後會建立一個名爲test的目錄，也就是咱們所搭建的項目。

接下來會要求你進行一些選項設置，其實就是初始化項目：

? Project name (test)        // 項目名稱，按Enter肯定就好 
? Project name test
? Project description (A Vue.js project)        // 項目描述，按Enter肯定就好 
? Project description A Vue.js project
? Author (villelee)        // 做者，按Enter肯定就好 
? Author villelee
? Vue build (Use arrow keys)        // 開始選項設置，按Enter肯定就好 
? Vue build standalone
? Install vue-router? (Y/n) Y        // 安裝路由，須要的話能夠選Y，不須要就選n
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) Y        // 是否使用ESlint統一代碼風格，編碼規範，建議選Y
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)
? Pick an ESLint preset Airbnb
? Set up unit tests (Y/n) n        // 是否安裝單元測試
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n        // 是否安裝e2e測試編碼規範
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
   vue-cli · Generated "test".
複製代碼

 最後出現以下代碼

To get started:

  cd test
  npm run dev
複製代碼

 說明已經初始化成功，vue-cli已經將項目搭建完成。

二、進入你的項目文件夾

 項目搭建好了，如今就能夠進入項目文件夾。

輸入如下命令，回車進入新建的項目。

cd test

三、經過cnpm在項目裏安裝依賴

 由於各個模板之間都是相互依賴的，因此如今咱們要安裝依賴。

輸入如下命令，回車安裝依賴

cnpm install

四、啓動項目

 一切環境依賴安裝準備就緒，咱們來測試一下本身新建的vue項目的運行狀況。

輸入如下命令，回車啓動項目

npm run dev

結果會彈出一個瀏覽器訪問地址默認爲localhost:8080，以下：

$ npm run dev

> test@1.0.0 dev D:\ptest\test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting DONE  Compiled successfully in 5547ms11:59:13

 I  Your application is running here: http://localhost:8080
複製代碼

 在瀏覽器中打開http://localhost:8080，就能看到你的項目了

項目打包

運行npm run build

運行後打包成功會在項目中生成dist文件夾

部署服務器是把文件夾中的文件丟上服務器便可

總結

 至此，咱們的Vue項目就搭建完成了。萬里長征第一步，加油！

 如需進一步瞭解關於vue項目結構的基礎知識，請戳Vue小白課（二）——項目結構解析（Vue2.x）

 路漫漫其修遠兮，與諸君共勉。

 祝你們2019更上一層樓！

後記：Hello 小夥伴們，若是以爲本文還不錯，記得點個贊或者給個 star，大家的贊和 star 是我編寫更多更豐富文章的動力！GitHub 地址

db 的文檔庫 由 db 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/danygitgit上的做品創做。
本許可協議受權以外的使用權限能夠從 creativecommons.org/licenses/by… 處得到。