准备工作
- 安装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
{{msg}}
也就是说该组件只包含一div和一个p标签p标签的内容为My costum component并且字体颜色为红色现在使用尝试使用该组件。在想要使用该组件的页面通过import 引入该组件并将该组件添加到该页面的components中即可在页面中使用自定义组件，代码如下
//App.vue
保存运行npm run serve查看效果
引入路由
引入路由前需要先安装vue-router官方插件，命令为cnpm install vue-router --save --save表示本地安装只会在当前项目中生效。
准备component以供路由，这里创建了两个组件均放在了components目录下
内容也非常简单
//component1.vue
component1
//component2
component2
接下来在项目目录创建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',//路由地址会在中指明
name: 'axios',
component: component1
}, {
path: '/echarts',//路由地址会在中指明
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在其中使用路由，源文件被修改为
axios
echarts
这是路由就已经生效了，
引入第三方组件
以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
评分组件
效果如下，方便的使用各种好看的组件（再也不用自己对齐万恶的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为
评分组件
{{user}}
后台代码为
//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语言实现。