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

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

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

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

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

下載安裝:git

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

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

會跳轉到 github:vue-cli

 

 進入這個 官網:npm

https://cli.vuejs.org/json

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

 安裝:

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

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 # 運行

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

相關文章
相關標籤/搜索