VUE之搭建腳手架
阿新 • • 發佈：2018-01-26
hit 代碼 res () 模板類 現在 定義 rdquo file
原文轉自http://blog.csdn.net/Shiyaru1314/article/details/54963027
可以發現node.js自帶了npm，我們可以直接使用npm安裝其他的相關環境即可。 安裝命令為 ： npm install 組件名稱 默認情況下，組件都是安裝在C:\Program Files\nodejs\node_modules文件夾下的 但是通常情況下，我們需要安裝一個全局的組件，才能夠使用 這時安裝命令為：npm install 組件名稱 -g
$ vue init <template-name> <project-name>
<template-name>：模板名，比如 webpack, simple, browserify
<project-name>： 本地文件夾名稱
我們可以使用 vue-cli 來快速生成一個基於 Webpack 構建的項目。打開命令行工具，輸入如下命令：
$ vue init webpack my-project
所有模板默認安裝的是 Vue 2.x 版本，如果需要安裝 1.x 版本，需要輸入如下指令：$ vue init webpack#1.0 my-project
$ npm install
現在啟動項目，輸入如下命令：
$ npm run dev
默認監聽的是 8080 端口
<script>
export default {
data () {
return {
// note: changing this line won‘t causes changes
// with hot-reload because the reloaded component
// preserves its current state and we are modifying
// its initial state.
msg: ‘你好，世界!‘
}
}
}
</script>
重新刷新頁面：
4-1、init
init 命令用來基於指定模板生成項目結構。前面提到過的，template-name 為模板名，project-name 為要生成的目錄名
4-2、list
list 命令用於列出所有可用的模板，通過查詢 https://api.github.com/users/vuejs-templates/repos 這個API 接口可以得到所有列表。
命令行輸入指令：
$ vue list
前面提到，在執行 init 命令時可以指定模板的名字。在默認情況下，vue-cli 會根據所傳入的模板名字去 github 中查找模板。
vue-cli 的模板分為 官方模板、自定義模板、本地模板
（1）、官方模板
上圖中就提供了 5種 官方模板：
browserify -- 擁有高級功能的 Browserify + vueify 用於 正式開發
browserify-simple -- 擁有基礎功能的 Browserify + vueify 用於 快速開發
simple -- 單個 HTML，用於開發最簡單的 Vue.js 應用
webpack -- 擁有高級功能的 Webpack + vue-loader 用於正式開發
webpack-simple -- 擁有基礎功能的 Webpack + vue-loader 用於快速開發
在這裏特別提一下 webpack，前面在安裝 webpack 模板時，有一個選擇項，是否使用 ESLint 來規範你的代碼
ESLint 對於平時不太註意代碼縮進的朋友可能是一個噩耗，我們簡單演示一下，打開 src 下的 App.vue，把代碼稍作修改
<template>
<div id="app">
<h2>2017年來啦！</h2>
<strong>{{msg}}</strong>
</div>
</template>
<script>
export default {
data(){
return {
msg:‘好好學習 Vue.js！‘
}
}
}
</script>
刷新頁面，提示了各種代碼縮進、空格 之類的錯誤
（2）、自定義模板
當官方模板不能滿足需求時，我們可以 fork 官方模板按照自己的需求修改後，通過 vue-cli 命令生成基於自己模板的項目結構：
$ vue init username/repo my-project
（3）、本地模板
除了從 github 下載模板外，我們還可以從本地加載模板：
$ vue init ~/fs/path/to-custom-template my-project
5-1、commander
commander 是一個命令行接口的解決方案，它提供了一些接口方便我們對命令行的命令做解析。
倉庫地址：https://github.com/tj/commander.js
倉庫地址：https://github.com/flipxfx/download-git-repo
目錄(?)[-]
- 1 安裝之前需要檢查是否已經安裝NodeJS的環境
- 安裝文件下載地址httpsnodejsorgen
- 下載得到壓縮文件node-v694-c64msi
- 雙擊進行安裝
- 查看安裝目錄
- nodejs就安裝完成
- 2安裝vue-cli
- 3基本使用
- 4模板
- 推薦的工具包
使用 Vue.js 開發大型應用時，我們需要考慮代碼目錄結構、項目構建和部署、熱加載、代碼單元測試等事情。如果每個項目都要手動完成這些工作，那無疑效率是低下的，所以通常我們會使用一些腳手架工具來幫助完成這些事情。在 Vue.js 生態中我們可以使用 vue-cli 腳手架工具來快速構建項目。
（1） 安裝之前需要檢查是否已經安裝NodeJS的環境
可以使用node -v檢查，且需要保證安裝4.0版本以上的nodejs環境
執行命令node -v 安裝的版本為 v6.9.4
如果沒有安裝則執行下面的步驟：node.js安裝過程如下： node.js相關的網站http://www.cnodejs.org/- 安裝文件下載地址：https://nodejs.org/en/
- 下載得到壓縮文件node-v6.9.4-c64.msi
- 雙擊進行安裝
- 查看安裝目錄
可以發現node.js自帶了npm，我們可以直接使用npm安裝其他的相關環境即可。 安裝命令為 ： npm install 組件名稱 默認情況下，組件都是安裝在C:\Program Files\nodejs\node_modules文件夾下的 但是通常情況下，我們需要安裝一個全局的組件，才能夠使用 這時安裝命令為：npm install 組件名稱 -g
- node.js就安裝完成
（2）安裝vue-cli
vue-cli 是用 node 編寫的命令行工具，我們需要進行全局安裝。打開命令行工具，輸入指令：$ npm install -g vue-cli
也可以安裝一個npm的淘寶鏡像，這樣安裝快一些
安裝命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
$ vue --version
得到安裝的vue版本是2.8.1
（3）基本使用
初始化項目 定位到創建項目的目錄下 執行命令：vue init 模板類型 項目名稱 模板類型可以使用vue list指令查看 項目名稱可以自己定義vue生成項目模板的命令格式為
$ vue init <template-name> <project-name>
<template-name>：模板名，比如 webpack, simple, browserify
<project-name>： 本地文件夾名稱
我們可以使用 vue-cli 來快速生成一個基於 Webpack 構建的項目。打開命令行工具，輸入如下命令：
$ vue init webpack my-project
所有模板默認安裝的是 Vue 2.x 版本，如果需要安裝 1.x 版本，需要輸入如下指令：$ vue init webpack#1.0 my-project
有一系列交互問題，同意按 y，不同意按 n。
初始化項目之後，查看項目目錄如下：
安裝命令行給出的提示，我們依次輸入如下指令：
$ cd my-project$ npm install
安裝過程如下：
安裝完畢以後會在對應的目錄下生成如下文件，多了一個node-module文件，裏面是依賴的node工具包：
下面對上圖目錄做一個簡要的說明
現在啟動項目，輸入如下命令：
$ npm run dev
默認監聽的是 8080 端口甚至連 Apche服務器都不需要自己啟動，在瀏覽器中輸入 http://localhost:8080，生成的頁面如下：
<script>
export default {
data () {
return {
// note: changing this line won‘t causes changes
// with hot-reload because the reloaded component
// preserves its current state and we are modifying
// its initial state.
msg: ‘你好，世界!‘
}
}
}
</script>
重新刷新頁面：
（4）模板
這裏對兩個命令做進一步拓展介紹：4-1、init
init 命令用來基於指定模板生成項目結構。前面提到過的，template-name 為模板名，project-name 為要生成的目錄名
4-2、list
list 命令用於列出所有可用的模板，通過查詢 https://api.github.com/users/vuejs-templates/repos 這個API 接口可以得到所有列表。
命令行輸入指令：
$ vue list
前面提到，在執行 init 命令時可以指定模板的名字。在默認情況下，vue-cli 會根據所傳入的模板名字去 github 中查找模板。
vue-cli 的模板分為 官方模板、自定義模板、本地模板
（1）、官方模板
上圖中就提供了 5種 官方模板：
browserify -- 擁有高級功能的 Browserify + vueify 用於 正式開發
browserify-simple -- 擁有基礎功能的 Browserify + vueify 用於 快速開發
simple -- 單個 HTML，用於開發最簡單的 Vue.js 應用
webpack -- 擁有高級功能的 Webpack + vue-loader 用於正式開發
webpack-simple -- 擁有基礎功能的 Webpack + vue-loader 用於快速開發
在這裏特別提一下 webpack，前面在安裝 webpack 模板時，有一個選擇項，是否使用 ESLint 來規範你的代碼
ESLint 對於平時不太註意代碼縮進的朋友可能是一個噩耗，我們簡單演示一下，打開 src 下的 App.vue，把代碼稍作修改
<template>
<div id="app">
<h2>2017年來啦！</h2>
<strong>{{msg}}</strong>
</div>
</template>
<script>
export default {
data(){
return {
msg:‘好好學習 Vue.js！‘
}
}
}
</script>
刷新頁面，提示了各種代碼縮進、空格 之類的錯誤
（2）、自定義模板
當官方模板不能滿足需求時，我們可以 fork 官方模板按照自己的需求修改後，通過 vue-cli 命令生成基於自己模板的項目結構：
$ vue init username/repo my-project
（3）、本地模板
除了從 github 下載模板外，我們還可以從本地加載模板：
$ vue init ~/fs/path/to-custom-template my-project
5、推薦的工具包
vue-cli 內部使用了很多第三方 npm 包來幫助自己實現一些基礎功能，比如下面這些5-1、commander
commander 是一個命令行接口的解決方案，它提供了一些接口方便我們對命令行的命令做解析。
倉庫地址：https://github.com/tj/commander.js
5-2、download-git-repo
download-git-repo 用來將相應的 git 庫（Github、GitLab、Bitbucket）下載到指定的本地文件夾。倉庫地址：https://github.com/flipxfx/download-git-repo
VUE之搭建腳手架