VUE 2.0 快速入門
準備工作
- 安裝Node.js
- 安裝 CNPM 或將NPM源更換為國內映象源（可省略）
- 使用NPM或CNPM安裝vue/cli
本次使用vue/cli版本4.1.2
專案初始化
vue/cli4初始化vue專案的命令為vue create 專案名稱
初始化過程vue/cli會要求你選擇一些引數，選擇預設即可。有一項是選擇專案的包管理工具，我不瞭解yarn所以選擇了npm
之後只需要等待專案建立完成即可，建立成功如下
可以看到進入到剛剛建立的專案目錄執行npm run serve即可啟動該vue專案，啟動成功如下圖所示
此時瀏覽器輸入localhost:8081即可訪問（我後臺8080埠被佔用了所以vue幫我分配到了8081埠，預設是8080）
之後就可以開啟剛剛建立的專案快樂的開發了emmm,使用“地表最強編輯器”vs code開啟該專案可以看到vue專案的目錄結構。
但對於cv工程師（沒錯就是opencv,絕對不是ctrl+c,ctrl+v），檔案結構什麼的都是浮雲粘就完了
使用vue元件
在components中建立myComponent.vue內容如下
//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標籤的內容為My costum component並且字型顏色為紅色現在使用嘗試使用該元件。在想要使用該元件的頁面通過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以供路由，這裡建立了兩個元件均放在了components目錄下
內容也非常簡單
//component1.vue
<template>
<div>
component1
</div>
</template>
//component2
<template>
<div>
component2
</div>
</template>
接下來在專案目錄建立router目錄（可根據習慣命名或不建立資料夾，只要之後import的時候能夠找到路由js檔案）並在裡面建立router.js。該檔案內容為
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')
現在在修改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>
這時路由就已經生效了，
引入第三方元件
以element-ui為例,引入元件之前需要安裝element-ui控制檯輸入cnpm install element-ui --save
安裝完成後在main.js中引入相關資源，element-ui分兩種引入方式“完整引入”,和“按需引入”。本次使用完整引入。按需引入回頭再去看文件。引入相關資源後main.js內容變為
//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引入。但本次並不使用而是以常規方式引入，以該方式可以引入大部分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，加入一個按鈕，點選按鈕後向後臺傳送一個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)
}
}
測試結果
暫時就瞭解這麼多還有個多頁面配置有時間補。有新的東西再來補充。
專案原始碼：
https://github.com/ALMing530/vue-example/tree/master
包含四個分支，分支建立順序為compnent->router->element-ui->axios即文章順序，以後回來看不懂可以從compnent分支開始看。主分支包含供axios測試的後端程式碼，使用go語言實現。