#1#安裝node.js
 
{安裝地址:https://nodejs.org/en/download/}

#2#檢視是否安裝成功nodejs 
>cmd命令node -v

3.可以安裝淘寶映象cnpm 這裡就不用了

#4#全域性安裝vue-cli
 
npm install -g vue-cli
 
走到這一步,基礎已經搭建好
#5#建立專案
進入你的專案目錄
>這裡的myproject是指自定義專案名稱
vue init webpack myproject

一步一步填寫資訊即可 第一個專案名 第二個專案描述 第三個作者 其他的 回車 yes

#6# 執行專案
1> cd 專案名
 
2> npm run dev

#7#如要更改vue頁面內容
1>專案名稱目錄中>src>Vue.js[components>helloworlds]

1、build：構建指令碼目錄

　　　　1）build.js ==> 生產環境構建指令碼；


　　　　2）check-versions.js ==> 檢查npm，node.js版本；

　　　　3）utils.js ==> 構建相關工具方法；

　　　　4）vue-loader.conf.js ==> 配置了css載入器以及編譯css之後自動新增字首；

　　　　5）webpack.base.conf.js ==> webpack基本配置；

　　　　6）webpack.dev.conf.js ==> webpack開發環境配置；

　　　　7）webpack.prod.conf.js ==>webpack生產環境配置；

　　2、config：專案配置

　　　　1）dev.env.js ==> 開發環境變數；

　　　　2）index.js ==> 專案配置檔案；

　　　　3）prod.env.js ==> 生產環境變數；

　　3、node_modules：npm 載入的專案依賴模組

　　4、src：這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案：

　　　　1）assets：資源目錄，放置一些圖片或者公共js、公共css。這裡的資源會被webpack構建；

　　　　2）components：元件目錄，我們寫的元件就放在這個目錄裡面；

　　　　3）router：前端路由，我們需要配置的路由路徑寫在index.js裡面；

　　　　4）App.vue：根元件；

　　　　5）main.js：入口js檔案；

　　5、static：靜態資源目錄，如圖片、字型等。不會被webpack構建

　　6、index.html：首頁入口檔案，可以新增一些 meta 資訊等

　　7、package.json：npm包配置檔案，定義了專案的npm指令碼，依賴包等資訊


　　8、README.md：專案的說明文件，markdown 格式

　　9、.xxxx檔案：這些是一些配置檔案，包括語法配置，git配置等

開始我們的第一個vue專案

　　1、在components目錄下新建一個views目錄，裡面寫我們的vue元件

　　　　1）開始我們的第一個元件：

　　　　a：在views目錄下新建First.vue

　　　　b：在router目錄下的index.js裡面配置路由路徑

然後在First.vue簡單寫個頁面template寫 html，script寫 js，style寫樣式

<template>
    <div class="test">
        {{ message }}
    </div>
</template>
<script>
export default {
  name: 'First',
  data () {
    return {
      message: '我的第一個頁面'
    }
  }
}
</script>

<style scoped>
    .test
    {
        background: red;
    }
</style>

輸入http://localhost:8010/#/first

參考https://www.cnblogs.com/hellman/p/10985377.html

1. #1#安裝node.js
3. {安裝地址:https://nodejs.org/en/download/}