vue尚硅谷外賣(2)-vue-cli搭建項目

安裝

1. 安裝vue-cli。
   npm install -g vue-cli -g爲全局安裝
2. 新建一個空文件夾，進入該文件夾。
3. 初始化一個項目。
   (1) vue init webpack [test]。 test可寫可不寫，不寫就是在當前空目錄下生成項目，加上就是在test目錄下，多了一級目錄。
   (2)而後會出現問答選項，按照需求選擇yes/no
   Project name：這個是項目名稱，默認是上一步輸入時的那個名稱，想改的話直接輸入修改，也能夠直接回車
   Project description：項目描述，能夠編輯或者直接回車
   Author (): 做者
   Runtime + Compiler: recommended for most users: 運行加編譯，既然已經說了推薦就直接回車 Runtime-only: 僅運行
   Install vue-router:是否須要vue-router，這裏回車選擇使用，這樣生成好的項目就會有相關的路由配置文件
   Use ESLint to lint your code:是否使用ESLint，Eslint能夠檢查代碼規範，咱們應該養成使用Eslint寫代碼的好習慣，因此也是直接回車，默認使用，這樣會生成相關的ESLint配置。固然若是以爲Eslint太嚴格也能夠選擇n
   Setup unit tests with Karma + Moch?: 是否安裝單元測試。因爲項目尚未單元測試，因此選擇n
   Setup e2e tests with Nightwatch：是否安裝e2e測試，一樣也選擇n
   其實這幾個選擇選擇yes/no影響不大，選擇yes就會默認生成相關配置，選擇了n後續也能夠手動安裝，沒有太大影響。
4. 安裝完成後運行 npm run dev,彈出瀏覽器窗口，看到歡迎頁面則代碼安裝成功

項目結構

安裝完成後就會生成一個vue項目，項目結構如圖所示：

在開發過程種，主要是修改src種的代碼，偶爾也須要更改build裏的配置文件。src種有個assets文件夾存放資源文件，同時根目錄下也有個static存放靜態資源，現區分一下兩個文件夾的不一樣之處。

static與assets的區別

首先，存放在assets裏的資源是會通過webpack打包處理，只支持相對路徑。因此assets裏面應該放置一些咱們本身寫的js/css代碼或者圖片，須要壓縮或者變更的資源。
而static裏存放的資源不會被webpack打包，而是直接複製到打包後的項目中，默認在/dist/static中，必須使用絕對路徑來引用這裏面的資源。因此,static裏應該存放第三方的代碼，一般已經被壓縮過了，或者不會改動的資源，如reset.css。