使用Vue-cli搭建項目與目錄詳解

一、介紹

    vue-cli這個構建工具大大下降了webpack的使用難度，支持熱重載，有webpack-dev-server的支持，至關於啓動了一個請求服務器，給你搭建了一個測試環境，只關注開發就OK。

二、全局安裝vue-cli

npm install vue-cli -g

驗證是否安裝成功

vue -V3

三、初始化項目，生成項目模板

（1）查看幫助

$ vue --help
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

（2）查看官方提供模板

　　vue-cli提供了幾個模板給開發者用於不一樣類型的項目

$ vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

 ★browserify ★ browserify-simple這兩個模板已過期，
 ★pwa主要是作移動端
 通常咱們用★webpack和★webpack-simple的比較多 

（3）vue-cil構建項目

vue init webpack your-project

? Project name  輸入項目名稱

? Project description 輸入項目描述

? Author 做者

? Vue build 打包方式，回車就行了

? Install vue-router?  選擇  Y 使用 vue-router，輸入 N 不使用

? Use ESLint to lint your code? 代碼規範，推薦 N

? Setup unit tests with Karma + Mocha? 單元測試，推薦 N

? Setup e2e tests with Nightwatch? E2E測試，N

（4）框架目錄結構

├── README.md // 項目說明文檔

├── node_modules // 依賴包目錄

├── build // webpack相關配置文件（都已配置好，通常無需再配置）

│       ├── build.js  //生成環境構建

│       ├── check-versions.js  //版本檢查（node，npm）

│       ├── dev-client.js    //開發服務器熱重載 （實現頁面的自動刷新） 

│       ├── dev-server.js    //構建本地服務器（npm run dev）

│       ├── utils.js         // 構建相關工具

│       ├── vue-loader.conf.js   //csss 加載器配置

│       ├── webpack.base.conf.js    //webpack基礎配置

│       ├── webpack.dev.conf.js     // webpack開發環境配置

│       └── webpack.prod.conf.js     //webpack生產環境配置

├── config // vue基本配置文件（可配置監聽端口，打包輸出等）

│       ├── dev.env.js // 項目開發環境配置

│       ├── index.js //   項目主要配置（包括監聽端口、打包路徑等）

│       └── prod.env.js // 生產環境配置

├── index.html // 項目入口文件

├── package-lock.json // npm5 新增文件，優化性能

├── package.json // 項目依賴包配置文件

├── src // 項目核心文件（存放咱們編寫的源碼文件）

│       ├── App.vue // 根組件
        
│       ├── assets // 靜態資源（樣式類文件、如css，less，和一些外部的js文件）

│       │       └── css  //樣式

│       │       └── font  //字體

│       │       └── images  //圖片

│       ├── components // 組件目錄

│       │       └── Hello.vue // 測試組件

│       ├── main.js // 入口js文件

│       └── router // 路由配置文件夾

│       └── index.js // 路由配置文件

└── static // 靜態資源目錄（通常存放圖片類）

assets和static文件夾的區別

    assets目錄中的文件會被webpack處理解析爲模塊依賴，只支持相對路徑形式。例如，在 <img src="./logo.png">
和 background: url(./logo.png)中，"./logo.png" 是相對的資源路徑，將由Webpack解析爲模塊依賴。

    static/ 目錄下的文件並不會被Webpack處理：它們會直接被複制到最終的打包目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這是經過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 鏈接來肯定的。

    任何放在 static/ 中文件須要以絕對路徑的形式引用：/static/[filename]。

    在咱們實際的開發中，總的來講：static放不會變更的文件 assets放可能會變更的文件。