前端腳手架介紹安裝。生態圈

Yeoman幫助您啓動新項目，規定最佳實踐和工具，幫助您保持工做效率。

爲此，咱們提供了一個生成器生態系統。生成器基本上是一個插件，可使用`yo`命令運行以構建完整的項目或有用的部分。

經過咱們的官方生成器，咱們推廣「Yeoman工做流程」。此工做流是一個健壯且富有意義的客戶端堆棧，包含可幫助開發人員快速構建漂亮的Web應用程序的工具和框架。咱們負責提供入門所需的一切，而不會出現與手動設置相關的任何常見問題。

藉助可開箱即用的模塊化架構，咱們利用從多個開源社區得到的成功和經驗教訓，確保堆棧開發人員儘量地使用它。

下載安裝：

https://cn.vuejs.org/v2/guide/installation.html

按照 官方的要求要就好了/

會跳轉到 github：

 

 進入這個 官網：

https://cli.vuejs.org/

 =============================================================

 安裝：

可使用下列任一命令安裝這個新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

若是須要使用 2 版本的。

拉取 2.x 模板 (舊版本)

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具：

npm install -g @vue/cli-init # `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同 vue init webpack my-project

這樣 電腦上，就能夠  技能使用2 版本的  也能使用3 版本的腳手架工具了！

每一個腳手架工具生成的 項目是不同的：

vue-cli 2.x 的 腳手架工具

vue init <模板> <項目名>
模板：webpack-simple 簡單的配置 webpack的模板
     webpack   複雜的webpack模板， 包含 單元測試, ESLint, 熱更新 等等

vue init webpack-simple my-project  （來個簡單的）

生成模板的時候有一大堆的問題：

? Project name my-project01   # 問你是否是這個項目名 直接回車
? Project description 一個webpack-simple的模板    # 讓你添加描述，隨便寫
? Author chengege  # 項目做者是誰。瞎幾把寫
? License MIT  # 認證 直接使用默認的
? Use sass? No   # 問你是否適用sass 一中css升級版語言。 我他媽的不會直接 N

   vue-cli · Generated "my-project01".

   To get started:

     cd my-project01   # 讓你 cd 到這個目錄下
     npm install  # 而後然你執行這個命令  去下載 當前項目的依賴，能夠在 package.json 裏面看一看。
     npm run dev  # 下載完 你就能夠運行了

而後就生成了。

而後你就獲得了這麼個 項目。 package.json  是管理整個項目包的配置文件。

咱們就只關心 src 這個目錄。 由於這裏面纔是業務的重要東西。

{
  "name": "my-project01",
  "description": "一個webpack-simple的模板",
  "version": "1.0.0",
  "author": "chengege",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
   // 當前項目的依賴
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],

  // 開發環境的依賴
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

 可得安裝一下子呢。  去喝個水-。-  抽個煙啥的。

配置文件介紹： 比上面那個更清晰一點。 都是一個東西， 不用糾結。

流程：

2. 找到這個 webpack-dev-server 工具。 去默認打開  webpack.config.js 這個文件

 3. 找到入口  。 入口指向 main.js

 

而後就到了  App.vue 裏面去了。  就是具體的業務代碼了。

vue開源項目彙總

這些組件都是在 vue 的基礎上，作的一層框架。  能用別人的框架，就不要本身寫了吧。 怪麻煩的。

 

 

vue-cli 3.x 的 腳手架工具

 vue init webpack my-complex-project

? Project name my-complex-project   # 問你項目名
? Project description A Vue.js project  # 讓你寫描述
? Author chengege  # 讓你寫做者
? Vue build standalone  # 用那種模式，直接回車 用第一種大多數人用的就好
? Install vue-router? No  # 路由，先來個 N.  本身寫一下。 平時直接 Y 就行了
? Use ESLint to lint your code? No  # 這裏必定要 N . 否則若是你少些了一下 分號 啥啥的，總報錯的
? Set up unit tests No  # N 測試單元。 不學
? Setup e2e tests with Nightwatch? No  # 不學 N
? Should we run `npm install` for you after the project has been created? (recommended) npm  # 問你用那種下載方式， npm 就好了

   vue-cli · Generated "my-complex-project".
................
漫長的下載
# Project initialization finished!  出現這句話，就是下載完成了。

To get started:

  cd my-complex-project   # cd 進去
  npm run dev  # 運行

你會獲得一個這個： 差很少吧。大的變化沒有。 多了一些功能， 流程同樣的