vue 从入门到入土，记录vue/cli项目开发过程中的常见问题

作者: 小艾咪 | 来源:发表于2020-03-21 19:21 被阅读0次

vue-cli构建vue项目-前端完美开发环境搭建
vue入门教程
4、Vue-cli项目创建
vue入门：使用vue独立版本构建vue项目
模仿vue-cli，手写一个脚手架
vue 项目开发框架
Vue 打包优化之生产环境删除 console 日志
vue系列教程(一) 搭建与部署
vue实战第一天
快速创建 Vue 项目

准备工作

安装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)
    }
}

测试结果