1.什么是vue-cli

vue-cli 官方提供的一個腳手架,用于快速生成一個 vue 的專案模板 ;
預先定義好的目錄結構及基礎代碼，就好比咱們在創建 Maven 專案時可以選擇創建一個骨架專案，這 個骨架專案就是腳手架,我們的開發更加的快速;

主要的功能 :

• 統一的目錄結構
• 本地除錯
• 熱部署
• 單元測驗
• 集成打包上線

需要的環境

• Node.js: https://nodejs.org/zh-cn/download/
  
  下載完，安裝時除了放置位置可以選擇，其它無腦下一步即可

• Git： https://git-scm.com/downloads
  git官網下載太慢，使用鏡像下載： https://npm.taobao.org/mirrors/git-for-windows/

確認nodejs安裝成功

• cmd下輸入 node -v,查看是否能夠正確列印出版本號即可
• cmd下輸入 npm -v, 查看是否能夠正確列印出版本號即可
  這個npm，就是一個軟體包管理工具，就和linux下的apt軟體安裝差不多
  
  cmd盡量使用管理員權限運行

安裝Node，js淘寶鏡像加速器（cnpm）
這樣子的話，下載會快很多

 # -g 就是全域安裝
 npm install cnpm -g
# 或使用如下陳述句解決npm速度慢的問題
npm install - -registry=https://registry.npm.taobao.org

安裝程序可能有點慢可能需要多試幾次~耐心等待！雖然安裝了cnpm，但是盡量少用

安裝的位置： C:\Users\Administrator（自己的用戶名）\AppDate\Roaming\npm

安裝 vue-cli

cnpm install vue-cli -g 
# 測驗是否安裝成功 
# 查看可以基于哪些模板創建 vue 應用程式，通常我們選擇 webpack 

vue list

2.第一個 vue-cli 應用程式

1.創建一個基于 webpack 模板的 vue 應用程式

# 這里的 myvue 是專案名稱，可以根據自己的需求起名 
vue init webpack myvue 
# 一路都選擇no即可;

說明 :

• Project name：專案名稱，默認 回車 即可
• Project description：專案描述，默認 回車 即可
• Author：專案作者，默認 回車 即可
• Install vue-router：是否安裝 vue-router，選擇 n 不安裝（后期需要再手動添加）
• Use ESLint to lint your code：是否使用 ESLint 做代碼檢查，選擇 n 不安裝（后期需要再手動添 加） S
• et up unit tests：單元測驗相關，選擇 n 不安裝（后期需要再手動添加）
• Setup e2e tests with Nightwatch：單元測驗相關，選擇 n 不安裝（后期需要再手動添加）
• Should we run npm install for you after the project has been created：創建完成后直接初始 化，選擇 n，
• 我們手動執行;No, I will handle that myself運行結果
• 

3.初始化并運行

cd myvue 
npm install 
npm run dev

注意：npm install要是執行很慢就先執行npm config set registry https://registry.npm.taobao.org這個命令再npm install

執行完成后,目錄多了很多依賴

npm run dev運行

在瀏覽器輸入：http://localhost:8080
效果:

停止：ctrl+c

**idea(管理者身份運行）使用命令npm run dev **

4.Vue-cli目錄結構

• build 和 con?g：WebPack 組態檔
• node_modules：用于存放 npm install 安裝的依賴檔案
• src： 專案原始碼目錄
• static： 靜態資源檔案
• .babelrc：Babel 組態檔，主要作用是將 ES6 轉換為 ES5
• .editorcon?g：編輯器配置
• eslintignore： 需要忽略的語法檢查組態檔
• .gitignore：git 忽略的組態檔
• .postcssrc.js： css 相關組態檔，其中內部的 module.exports 是 NodeJS 模塊化語法
• index.html： 首頁，僅作為模板頁，實際開發時不使用
• package.json：專案的組態檔
  • name： 專案名稱
  • version： 專案版本
  • description：專案描述
  • author： 專案作者
  • scripts：封裝常用命令
  • dependencies：生產環境依賴
  • devDependencies： 開發環境依賴

1.src目錄

src 目錄是專案的原始碼目錄，所有代碼都會寫在這里

main.js

專案的入口檔案，我們知道所有的程式都會有一個入口

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

• import Vue from ‘vue’ ： ES6 寫法，會被轉換成 require(“vue”); （require 是 NodeJS 提供 的模塊加載器）
• import App from ‘./App’ ：意思同上，但是指定了查找路徑，./ 為當前目錄
• Vue.config.productionTip = false ：關閉瀏覽器控制臺關于環境的相關提示
• new Vue({…}) ：實體化 Vue
  • el: ‘#app’ ：查找 index.html 中 id 為 app 的元素
  • template: ‘’ ：模板，會將 index.html 中 替換為
  • components: { App } ：引入組件，使用的是 import App from ‘./App’ 定義的 App 組 件;

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• template：HTML 代碼模板，會替換 < App /> 中的內容
• import HelloWorld from ‘./components/HelloWorld’：引入 HelloWorld 組件用于替換 template 中的 < HelloWorld/>
• export default{…}：匯出 NodeJS 物件，作用是可以通過 import 關鍵字匯入
  • name: ‘App’：定義組件的名稱
  • components: { HelloWorld }： 子組件
• 在hello,Vue中,關于 < style scoped> 的說明：CSS 樣式僅在當前組件有效，宣告了樣式的作用域, 是當前的界面私有的!