Yeoman幫助您啓動新項目,規定最佳實踐和工具,幫助您保持工做效率。css
爲此,咱們提供了一個生成器生態系統。生成器基本上是一個插件,可使用`yo`命令運行以構建完整的項目或有用的部分。html
經過咱們的官方生成器,咱們推廣「Yeoman工做流程」。此工做流是一個健壯且富有意義的客戶端堆棧,包含可幫助開發人員快速構建漂亮的Web應用程序的工具和框架。咱們負責提供入門所需的一切,而不會出現與手動設置相關的任何常見問題。vue
藉助可開箱即用的模塊化架構,咱們利用從多個開源社區得到的成功和經驗教訓,確保堆棧開發人員儘量地使用它。webpack
下載安裝:git
https://cn.vuejs.org/v2/guide/installation.html github
按照 官方的要求要就好了/web
會跳轉到 github:vue-cli
進入這個 官網:npm
=============================================================
安裝:
可使用下列任一命令安裝這個新的包:
npm install -g @vue/cli # OR yarn global add @vue/cli
若是須要使用 2 版本的。
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-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 # 運行
你會獲得一個這個: 差很少吧。大的變化沒有。 多了一些功能, 流程同樣的