Vue全家桶快速开发指南

原先一直都在搞人工智能，突然间稀里糊涂的开始做前端vue了，从着手学习到开始写项目时间只有短短的一天，现在把项目遇到的大部分知识点和开发流程做个小的总结。基本上按照这个套路就可以开发一个中等的项目，希望能帮助到其他的人。

环境配置

安装npm

npm是nodejs的包管理工具，本人使用的是arch系统所以只需要以下命令就可以安装

yaourt -S npm

当然ubuntu安装的命令是

sudo apt-get install npm

安装vuecli

有了npm之后
在终端输入以下命令就可以安装vue脚手架

npm install -g @vue/cli

构建项目

图形化构建

直接在终端输入以下命令就可以打开图形化配置的窗口

vue ui

打开完成后会在终端里显示一个本地服务，用浏览器打开他就可以进行图形化配置了

命令行配置

因为我在本地ui配置的时候图形界面打不开所以我选择的命令行配置
在终端输入以下命令

随便进入一个文件夹输入以下命令便可以进入到vue的构建项目的选项里

vue create 你的项目名

在这里我们选择第二个手动选择组件（按上下方向键切换选项，回车按键选中）选中后我们会进入这样的位置

同样选择上下方向键切换选项，空格键选中
在这里我们选中router和vuex

回车确定

这里问我们是否要安装旧版本的router 我们选择n

在这里推荐选择第三项ESLint+Standard config

第一项

这里问我们设置是要有单独的文件夹还是全写在package.json里
我们选择第一项

这里问我们是否保存预设的组件，我们选择是，这会在之后的项目中加入模板为你提供参考
创建完成项目后我们输入

cd 你刚才的项目名

这样会进入你的项目目录
在这个目录下我们输入

npm run serve

这样会编译并运行项目，之后会在命令行提示两个地址
第一个是你本地的地址
第二个就是你外网地址

随便打开一个网址就可以看到这样的画面

在这里点击about又会变一种样式

这就是我们所谓的前端路由

代码目录

近来之后用vs code打开项目所在文件夹
可以看到以下目录

其中这里主要在意src目录
components是你组件的目录
ruter是前端路由的配置目录
store是状态管理vuex的目录
views是视图目录
main.js是配置文件

vue-router

vue-router是一个vue生态里管理前端路由的一个组件
因为他默认就已经写好了一个前端路由所以我们先来看一下这个

定义组件

组件的作用

组件是干嘛的呢？
组件就是为了方便的进行代码重用而定义的
可以想象是把组件里的html代码插入到需要他的地方

如何定义组件

一个组件呢就是把html代码写在标签里头
如

<!-- 格外注意 这里不支持text标签 text标签全部换成span -->
<template>
  <div class="about">
    <h1>123</h1>
    <p>abc</p>
  </div>
</template>
  <!-- 注意这里必须有一个回车，而且每一段代码后面都不能有空格出现 -->

把html需要的css文件在main.js里引入就像下面这个样子

import '../static/css/about.css'
import '../static/css/mainstyle.css'

这样我们一个组件就定义好了，那怎么用呢

在需要他显示的html代码下面声明组件

因为vuecli规定的所有页面都是组件，只不过有父与子的区别
所以下面这段代码以父组件为例

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld/><!-- 1 -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'//2

export default {
  name: 'Home1S',//3
  components: {
    HelloWorld //4
  }
}
</script>

通常用不同的组件需要改四个地方
位置1:组件插入的位置，标签里的名称必须和2,4相同
位置2:引入组件，注意名称和路径就可以了，名称必须和1,4相同
位置3:名字随便起
位置4:声明组件，多个组件声明用逗号隔开，名称必须和1，2相同
注意事项
这里的script代码必须严格按照
两个空格缩进，
字符串用单引号，
括号附近有空格‘ () ’
运算符附近必须有空格’ + ’
冒号后面要有空格‘: ’
等严格的格式控制

定义路由跳转

声明一个路由

在src/router/目录下 有一个index.js文件
打开他
在routes数组后添加一个对象如下

 {
    path: '/about',//将来这个名称会在导航栏显示，被称之为哈希
    name: 'About',//随便起但后面会用到
    component: () => import('../views/About.vue')//跳转组件地址 和前面组件跳转一个样子
  }

定义路由交互组件

我们这里用
包裹住的所有标签最后都会成为跳转的可交互标签，同时这个标签可以定义样式，（事实上它本身会默认渲染成a标签）如

	  <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link>

定义路由组件显示位置

我们在需要路由转换的位置加上标签即可
如

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

vue 语法

这里的语法和其他开发的形式不太相同但可以看出来大体是相同的

v-text和插值表达式

我们在about.vue文件里实验一下以下代码
注意一定是about.vue别自己建一个就来，这里涉及到组件引用我们之后在说

<template>
  <div class="about">
    <h1 v-text="a">安琪拉</h1>
    <h1>{{a}}安琪拉</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: 'hello'
    }
  }
}
</script>

说白了就是将v-text属性的标签或者{{}}双括号里引入的变量与数据绑定数据会被实时渲染上去
a可以是列表 、对象等等等等、语法按照js语法就可以

v-html

这个组件会把变量当作html代码解析

<template>
  <div class="about">
    <h1 v-text="a">安琪拉</h1>
    <h1 v-html="a"></h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: '<h1>asd</h1>'
    }
  }
}
</script>

v-on 或者 @

绑定事件的组件事件有什么鼠标点击，双击等等等等

<!-- v-on:keyup.enter -->
<template>
    <h1 @click="click">{{a}}</h1>
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      this.a = this.a + 1
    }
  }
}
</script>

<!-- 回车事件 -->
<template>
  <input type = "text" @keyup.enter="click">
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      this.a = this.a + 1
      console.log(this.a)
    }
  }
}
</script>

v-show 和 v-if

这两个标签唯一的不同就是v-if会让代码树消失，v-shou只是不显示

<template>
  <div>`
    <h1 @click="click1" v-show = a>{{a}}</h1>
    <h1 @click="click2" v-if = b||a>{{b}}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: 2,
      b: 2
    }
  },
  methods: {
    click1: function () {
      this.a = this.a - 1
    },
    click2: function () {
      this.b = this.b - 1
    }
  }
}
</script>

v-bind 或者 ：

<template>
  <div>`
    <p @click="click" :id = a >asdf</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: '#naa'
    }
  },
  methods: {
    click: function () {
      this.a = 'nav'
    }
  }
}
</script>
<style scoped>
#nav {
  padding: 30px;
}
#naa {
  font-weight: bold;
  color: #2c3e50;
}
</style>

v-for

根据数组或者对象个数重复某个标签，同时可以将数据遍历出来

<template>
  <div>
    <h1 @click="click">{{a}}</h1>
    <h1 v-for="(item, name, index) in a" :key = "item">{{item}}{{name}}{{index}}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}
</script>

v-model

双向数据绑定

<template>
  <input type = "text" @keyup.enter="click" v-model="a">
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      console.log(this.a)
    }
  }
}
</script>

axios

将token放置在请求头

config.headers.accessToken = token;

get和post请求

// 组件中使用get方法
this.axios.get(url, parmas: {a: 1, b: 2})
  .then(res => {
    // 成功回调
  }, res => {
    // 错误回调
  })


// 组件中使用post方法
this.axios.post(url, {a: 1, b: 2})
  .then(res => {
    // 成功回调
  }, res => {
    // 错误回调
  })

vuex

vuex其实就是一个全局组件，无论在那里都可以通过

this.$store.state.xxx

访问储存在里面的状态
Getters：用来从 store 获取 Vue 组件数据。
Mutators：事件处理器用来驱动状态的变化。
Actions：可以给组件使用的函数，以此用来驱动事件处理器 mutations
Vuex和简单的全局对象是不同的，当Vuex从store中读取状态值的时候，若状态发生了变化，那么相应的组件也会高效的更新。并且，改变store中状态的唯一途径就是提交commit mutations。这样便于我们跟踪每一次状态的变化。只要发生了状态的变化，一定伴随着mutation的提交。
剩下的和变量一样

总结

vue这个东西特别简单，当然刚入门的时候我也踩了不少的坑，不过有了一个系统的架构，学起来其实也就一天就足够了，尤其是资源已经提供了模板的前提下。额外说一句，vuecli的严格模式是可以关掉的，需要的小伙伴们可以去网上查一下