准备工作
- 安装Node.js
- 安装 CNPM 或将NPM源更换为国内镜像源（可省略）
- 使用NPM或CNPM安装vue/cli
本次使用vue/cli版本4.1.2
项目初始化
vue/cli4初始化vue项目的命令为vue create 项目名称
初始化vue项目
初始化过程vue/cli会要求你选择一些参数，选择默认即可。有一项是选择项目的包管理工具，我不了解yarn所以选择了npm
选择包管理工具
之后只需要等待项目创建完成即可，创建成功如下
创建成功
可以看到进入到刚刚创建的项目目录执行npm run serve即可启动该vue项目，启动成功如下图所示
启动vue项目
此时浏览器输入localhost:8081即可访问（我后台8080端口被占用了所以vue帮我分配到了8081端口，默认是8080）
之后就可以打开刚刚创建的项目快乐的开发了emmm,使用“地表最强编辑器”vs code打开该项目可以看到vue项目的目录结构。
vue6.png
但对于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>
这是路由就已经生效了，<router-link></router-link>会被渲染为a标签，点击两个标签可在下面观察到页面发生变化。
引入第三方组件
以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语言实现。
网友评论