• 下載node 類似下載QQ一樣,下一步,下一步…注意新增到環境變數

  //cmd命令視窗
  node -v     //看看node版本 以及檢測是否安裝好
  v8.11.3
  npm -v      //安裝node會自帶包管理工具
  5.6.0
  
  

• 全域性安裝vue-cli腳手架

  npm install vue-cli -g
  

• 安裝好後,命令列輸入vue 看看是不是安裝成功

  //表示安裝成功
  	C:\Users\Administrator>vue
  Usage: vue <command> [options]
  
  Options:
  
    -V, --version  output the version number
    -
   
  h, --help     output usage information
  
  Commands:
  
    init           generate a new project from a template
    list           list available official templates
    build          prototype a new project
    create         (for v3 warning only)
    help [cmd]     display help for [cmd]
  //沒有安裝好
  	'vue' 不是內部或外部命令，也不是可執行的程式
  	或批處理檔案。
  
   
  

• 建立vue專案

  vue init webpack [project-name]//專案名稱不能中文 不可大寫 不可與資料夾名稱一樣
  	PS C:\Users\Administrator\Desktop\code\node> vue init webpack vue-demo
  
  ? Project name vue-demo
  ? Project description A Vue.js project
  ? Author
  ? Vue build standalone
  ? Install vue-router? No                      //第一次學習建議全no(下同)
  ? Use ESLint to lint your code?
   
   No
  ? Set up unit tests No
  ? Setup e2e tests with Nightwatch? No
  ? Should we run `npm install` for you after the project has been created? (recommended) npm
  
     vue-cli · Generated "vue-demo".
  
  
  # Installing project dependencies ...
  -----------------------------------------
  //安裝完成後
  cd vue-demo    //進入專案資料夾
  npm run dev    //讓專案跑起來
  //cmd視窗顯示
  Your application is running here: http://localhost:8080   //  <--本地跑起來的地址,瀏覽器輸入
  

  
• 目錄結構分析

//一個vue元件,裡面對應有template script 和style 使得vue元件開發特別容易上手
<template>              //類似html
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>              //類似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>