1、安裝node環境

首先官網安裝nodejs，下載地址https://nodejs.org/en/

很多情況下，npm i 命令安裝的包都是要科學上網的，或者就是國際網，下載速度很慢，不過有個淘寶映象可以使用

npm install -g cnpm -registry-https://registry.npm.taobao.org命令安裝

2、搭建vue專案環境

首先安裝vue-cli

npm install --global vue-cli

進入專案目錄，輸入命令

vue init webpack vue-demo

回車就會有提示資訊之類的，直接回車-----，中間要安裝一些包，建議安裝，最後你會發現專案的目錄出現下面的專案結構

繼續npm i或者cnpm i 安裝依賴庫

然後npm run dev 回車

瀏覽器開啟地址就會看到我們的第一個vue專案建立成功了。

3、vue專案簡介（你能明顯的看到這是複製過來的）

　　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配置等

4、開始第一個vue專案

　　1、在components資料夾下建立一個views目錄

　　2、在views下建立一個First.vue

　　3、在router目錄下的index.js裡配置路由路徑

　　4、新建sub目錄，並在其下新建Confirm.vue檔案

　　全程如下：

First.vue　　

<template>
    <div class='first-app'>
        {{msg}}
        <confirm text="註冊" v-on:message="getMessage"></confirm>
    </div>
</template>
<script>
import Confirm from '../sub/Confirm'
export default {
    name:"First",
    components:{
        Confirm
    },
    data(){
        return {
            msg:"你好 你好"
        }
    },
    methods:{
        getMessage(val){
            alert(val);
        }
    }
}
</script>

Confirm.vue

<template>
    <div class='confirm-button'>
        <button v-on:click='getButtonClick'>{{text||'確認'}}</button>
    </div>
</template>
<script>
export default {
    name:"confirm-button",
    props:["text"],
    data(){
        return {
            msg:true
        }
    },
    methods:{
        getButtonClick(){
            this.$emit("message",this.msg);
        }
    }
}
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/views/First'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/first',
      name: First,
      component: First
    }
  ]
})

儲存下，重新整理，點選註冊我們會看到

明顯的複製的，自己親手寫一遍，方便記憶，本次轉前端，真的好難啊！

vue模板檔案：

template 寫 html，script寫 js，style寫樣式

注意剛開始可能會報語法錯誤什麼的，建議曲線ESLint，這個是語法檢查的，麻煩！

如果用VSCode寫專案，我們可以安裝vue的高亮支援Vetur，讓我們的程式碼看起來更順暢美觀！

OK結束！

vue這個東西比較偏介面畫，以前做遊戲比較偏程式碼化，所以轉過來還是會有點麻煩，但是我不怕，打死我也不怕！

因為天空是藍色的，而地獄是黑色的，我想要天空的蔚藍！