vue-cli 「從入門到放棄」

時間 2019-11-10

標籤 vue cli 入門放棄简体版

原文原文鏈接

主要做用：目錄結構、本地調試、代碼部署、熱加載、單元測試css

在現在前端技術飛速發展的時代，angular.js、vue.js 和 react.js 做爲前端框架已經呈現出了三國鼎立的局面。做爲國人若你不知道 vue，小生表示能夠理解，若是做爲中國的前端猿不知道 vue，小生表示很遺憾。而 vue-cli 做爲官方推薦的快速構建 vue 項目的腳手架，你應該學會使用，本文將介紹如何使用 vue-cli。html

在使用vue-cli前，但願你具有如下條件：前端

紮實的 JavaScript / HTML / CSS 基本功vue
通讀官方教程 (guide) 的基礎篇node

這裏我就再也不贅述什麼是 Vue.js 了，請須要瞭解的同窗前往：react

vuejs.org／中文文檔webpack
GitHubgit

查看相關資源信息。github

安裝

檢查是否安裝 node.js, 若是沒有請根據您的系統安裝web
```
node -v
v8.00
```
全局安裝 vue-cli
```
npm install -g vue-cli
```

vue-cli 的命令行

命令:
  
  init        從模板中建立項目
  list        列出全部的官方模板
  build       構建項目
  help [cmd]  展現[cmd]命令的幫助信息

使用vue list 查看全部模板

可用的官方模板:

★  browserify - 功能齊全的 Browserify + vueify 配置， 具有 hot-reload, linting & unit testing。
★  browserify-simple - 簡單的 Browserify + vueify 配置，便於快速構建。
★  pwa - 基於 webpack 的 PWA 模板。
★  simple - 基於單html文件的最簡單的vue配置模板。
★  webpack - 功能齊全的 Webpack + vue-loader 配置 hot reload, linting, testing & css extraction。
★  webpack-simple - 簡單的 Webpack + vue-loader 配置，便於快速構建。

使用vue init建立基於webpack模板的項目（目前使用最多）

vue init webpack <項目名>

* Project name (demo) 項目名稱，不能大寫和中文，直接回車，使用默認名稱
* Project description (A Vue.js project) 項目描述，也可直接點擊回車，使用默認值
* Author 項目做者，使用默認名字
* Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數狀況下都使用
* Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響總體的運行，這也是爲了團隊開發，通常項目中都會使用
* Pick an ESLint preset 選擇一個ESLint預設, 編寫vue項目時的代碼風格, 選擇默認Standard便可
* Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，選擇安裝
* Setup e2e tests with Nightwatch? (Y/n) 是否安裝e2e測試 ，選擇安裝

項目結構

cd 到 demo 目錄下，發現以下的項目結構

文件說明

-- build                     目錄放的是構建腳本（包括構建時要用到的webpack 配置）
-- config                    配置腳本（vue項目啓動時須要的配置，開發模式和生產模式）
-- node_modules              經過npm install 安裝的項目依賴包
-- src                       項目源碼目錄
     -- assets                 項目模塊資源文件包括：圖片，css（會被webpack處理）
     -- components             項目相關的vue組件，便於重用
     -- router                 項目的路由定義
        App.vue                頁面入口文件
        main.js                項目的入口文件，掛在vue實例，加載路由，中間件等公共組件
-- static                    頁面須要引入的外部的純靜態資源(會直接拷貝到dist/static/裏面)
-- test                      項目測試
     -- e2e                    模擬用戶行爲的測試
     -- unit                   單元測試
.babelrc                     ES6語法編譯配置,把咱們ES2105的代碼經過它編譯成ES5的
.editorconfig                編輯器配置，定義代碼格式
.eslintignore                忽略語法檢查的目錄文件配置
.eslintrc.js                 eslint的配置文件
.gitignore                   配置Git倉庫的忽略項
.postcssrc.js                postcss的配置
index.html                   項目入口模板文件
package.json                 項目基本信息，運行腳本和相關依賴
README.md                    項目介紹及開發指南