準備工作

安裝Node.js
安裝 CNPM 或?qū)PM源更換為國內(nèi)鏡像源（可省略）
使用NPM或CNPM安裝vue/cli

本次使用vue/cli版本4.1.2

項目初始化

vue/cli4初始化vue項目的命令為vue create 項目名稱

初始化vue項目

初始化過程vue/cli會要求你選擇一些參數(shù)荐开，選擇默認即可允坚。有一項是選擇項目的包管理工具，我不了解yarn所以選擇了npm

選擇包管理工具

之后只需要等待項目創(chuàng)建完成即可奇钞，創(chuàng)建成功如下

創(chuàng)建成功

可以看到進入到剛剛創(chuàng)建的項目目錄執(zhí)行npm run serve即可啟動該vue項目魏保，啟動成功如下圖所示

啟動vue項目

此時瀏覽器輸入localhost:8081即可訪問（我后臺8080端口被占用了所以vue幫我分配到了8081端口熬尺，默認是8080）

之后就可以打開剛剛創(chuàng)建的項目快樂的開發(fā)了emmm,使用“地表最強編輯器”vs code打開該項目可以看到vue項目的目錄結(jié)構(gòu)。

vue6.png

但對于cv工程師（沒錯就是opencv,絕對不是ctrl+c,ctrl+v）谓罗，文件結(jié)構(gòu)什么的都是浮云粘就完了

使用vue組件

在components中創(chuàng)建myComponent.vue內(nèi)容如下

//myComponent.vue
<template>
    <div>
        <p class="msg">{{msg}}</p>
    </div>
</template>
<script>
export default {
    name:'myComponent',
    data(){
        return{
           msg:'My costum component'
        }
    }
}
</script>
<style scoped>
.msg{
    color: red;
}
</style>

也就是說該組件只包含一div和一個p標簽p標簽的內(nèi)容為My costum component并且字體顏色為紅色現(xiàn)在使用嘗試使用該組件粱哼。在想要使用該組件的頁面通過import 引入該組件并將該組件添加到該頁面的components中即可在頁面中使用自定義組件，代碼如下

//App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <myComponent></myComponent>  //new
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import myComponent from './components/myComponent.vue'  //new

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

保存運行npm run serve查看效果

引入路由

引入路由前需要先安裝vue-router官方插件檩咱，命令為cnpm install vue-router --save --save表示本地安裝只會在當前項目中生效揭措。

準備component以供路由胯舷，這里創(chuàng)建了兩個組件均放在了components目錄下

內(nèi)容也非常簡單

//component1.vue
<template>
    <div>
        component1
    </div>
</template>

//component2
<template>
    <div>
        component2
    </div>
</template>

接下來在項目目錄創(chuàng)建router目錄（可根據(jù)習慣命名或不創(chuàng)建文件夾，只要之后import的時候能夠找到路由js文件）并在里面創(chuàng)建router.js绊含。該文件內(nèi)容為

import Vue from 'vue'
import router from 'vue-router'
Vue.use(router)
//引入準備好的組件
import component1 from '../components/component1'
import component2 from '../components/component2'

export default new router({
//注冊路由
    routes: [{
        path: '/axios',//路由地址會在<router-link>中指明
        name: 'axios',
        component: component1
    }, {
        path: '/echarts',//路由地址會在<router-link>中指明
        name: 'echarts',
        component: component2
    }]
})

在main.js中引入路由并放入Vue實例中

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
Vue.config.productionTip = false
Vue.use(router)
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

現(xiàn)在在修改HelloWord.vue在其中使用路由桑嘶，源文件被修改為

<template>
  <div class="hello">
    <router-link to="/axios">axios</router-link>
    <br/>
    <router-link to="/echarts">echarts</router-link>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  margin: 20px;
  padding: 10px;
  border: black 1px solid;
  height: 500px;
}
</style>

這是路由就已經(jīng)生效了，<router-link></router-link>會被渲染為a標簽躬充，點擊兩個標簽可在下面觀察到頁面發(fā)生變化逃顶。

引入第三方組件

以element-ui為例,引入組件之前需要安裝element-ui控制臺輸入cnpm install element-ui --save

安裝完成后在main.js中引入相關(guān)資源，element-ui分兩種引入方式“完整引入”,和“按需引入”麻裳。本次使用完整引入口蝠。按需引入回頭再去看文檔器钟。引入相關(guān)資源后main.js內(nèi)容變?yōu)?/p>

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import element_ui from 'element-ui'  //new
import 'element-ui/lib/theme-chalk/index.css'   //new
Vue.config.productionTip = false
Vue.use(router)
Vue.use(element_ui)   //new
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

之后就可以在各組件中愉快的使用element-ui了津坑，修改component1組件為其添加一個評分組件，修改后component1為

//component1
<template>
  <div class="continer">
    <div class="block">
      <span class="demonstration">評分組件</span>
      <el-rate v-model="value1"></el-rate> //element-ui評分組件
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 4,
    };
  }
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 500px;
}
</style>

效果如下傲霸，方便的使用各種好看的組件（再也不用自己對齊萬惡的css就能有好看的頁面了額emmmm）

引入其他js庫

引入axios,其實axios可以使用整合框架vue-axios引入疆瑰。但本次并不使用而是以常規(guī)方式引入，以該方式可以引入大部分js庫例如echarts,JQuery（雖然JQuery有違vue不推薦操作dom的理念昙啄，但我就知道這么幾個23333）等穆役。
引入前需要先安裝axios依賴

修改main.js引入axios修改后main.js為

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import element_ui from 'element-ui'
import axios from 'axios'   //new
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.prototype.axios = axios   //new
Vue.use(router)
Vue.use(element_ui)
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

此時axios的引入就完成了，在component1中測試一下梳凛，改寫component1耿币，加入一個按鈕，點擊按鈕后向后臺發(fā)送一個get請求韧拒。改寫后的component1為

<template>
  <div class="continer">
    <div class="block">
      <span class="demonstration">評分組件</span>
      <el-rate v-model="value1"></el-rate>
      <button v-on:click="getUser">getUser</button>
      <p>{{user}}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 4,
      user: ""
    };
  },
  methods: {
    getUser() {
      let _this = this;
      this.axios
        .get("http://localhost:53055/get")
        .then(function(response) {
          let res = JSON.stringify(response.data);
          window.console.log(res);
          _this.user = res;
        })
        .catch(function(error) {
          window.console.log(error);
        });
    }
  }
};
</script>
<style scoped>
</style>

后臺代碼為

//http.go
package main

import (
    "encoding/json"
    "fmt"
    "net/http"
)

type user struct {
    Name     string `json:"name"`
    Age      int    `json:"age"`
    Gender   string `json:"gender"`
    Password string `json:"password"`
}

func main() {
    http.HandleFunc("/get", handleGet)
    err := http.ListenAndServe(":53055", nil)
    if err != nil {
        fmt.Println("create http server fail")
    }

}
func handleGet(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Access-Control-Allow-Origin", "*")
    user := user{Name: "wxm", Age: 18, Gender: "男", Password: "wxm530"}
    res, err := json.Marshal(user)
    if err != nil {
        fmt.Println(err)
    }
    _, err = w.Write(res)
    if err != nil {
        fmt.Println(err)
    }
}

測試結(jié)果

暫時就了解這么多還有個多頁面配置有時間補淹接。有新的東西再來補充。
項目源碼：
https://github.com/ALMing530/vue-example/tree/master

包含四個分支叛溢，分支創(chuàng)建順序為compnent->router->element-ui->axios即文章順序塑悼，以后回來看不懂可以從compnent分支開始看。主分支包含供axios測試的后端代碼楷掉，使用go語言實現(xiàn)厢蒜。

vue 從入門到入土，記錄vue/cli項目開發(fā)過程中的常見問題