个人总结----Vue的基本使用

1.为什么要用Vue？

对于我们常规学python的话， 可能接触到的后端框架就是django和flask，可能还有个tornado（没接触过）, 对于以上两个框架来说都是讲后端和前端模板杂糅到一起了， 如果你要单纯写前端模板的话， 你需要和后端沟通， 需要预留哪些坑， 而一旦需求变更了， 你可能前后端都得改动， 虽然大部分人强调模板应该交由前端写， 但实际上大部分都是后端完成了， 然后维护的时候也基本上是后端在维护。（个人体验）

而使用Vue可以将前端从后端中剥离出来， 将前端模板放在Vue的前台服务器中， Vue获取到用户请求后再去动态请求后台服务器， 将获取到的数据实时同步到页面上， 这样的一个好处就是， 前后端的自由度提高了， 只需要商定好需要什么字段， 以什么方式提供就OK了， 当然一般这时候后端都是基于Restful的架构， 比较推荐的有DjangoRestframework， 也可以用flask，flask的话目前没了解有现成的框架。

2. Vue长啥样

build：里面基本是建立项目用的东西， 一般不用动

config：里面是一些基本配置， dev是测试环境， prod是生产环境， index是基本配置， 例如设置前端跨域代理就是修改里面的

             proxyTable

node_modules: 所需要的各种安装包

src： 所有的资源文件， 基本上你的代码都在这里面

         api： 用于向后端请求数据， 格式基本为json

         common: 一些公共的模块， 或者配置可以放在里面

         components： 一些封装好的组件， 例如导航条之类的组件， 几乎每页都相同， 就可以抽取出来作为组件

         router：路由映射，基本上你的前端访问路径都在这里面， 类似于django里面的urlpatterns

import Router from 'vue-router'
let routes = [
  {path: '/test', name: 'test', component: ()=> import('../views/test/test'), meta: {requireAuth: false, keepAlive: false}},
]
const router = new Router({
    mode: 'history',
    linkActiveClass: 'active',
    routes
})

export default router

         views: 常用的视图模块， 例如你能看到的所有页面

         App.Vue: 你的主视图入口，

         main.js: 你的主程序的入口， 一般默认只想App.Vue

static： 静态资源文件

package.json： 一些需要安装的包可以再里面导入，例如硬性依赖的， 可以添加到dependencies中， 非硬性依赖但是编译需要的可以放到devDependencies中

3. 启动项目

首先需要你的环境里安装有node.js, 然后可以安装下cnpm，之后就可以cd到项目主目录进行cnpm install了，这样的话就可以去自主安装刚刚package.json里面的安装包了， 如果有个别需要安装的话， 可以使用cnpm install package --save， 这里面--save关系到这个包是否是硬性依赖的

安装完成后就可以开始尝试运行了， 很简单， npm run dev， 如果你没有改动的话， 他会提示你启动成功， 可以通过127.0.0.1:8080去访问自己的前端页面，可以尝试一下，页面打开后就是一个很简陋的Vue图片， 加上官网的一些连接。

4. 如何去写项目？

可能一开始我们对这个框架了解的不深， 所以我们都会选择尝试先编写一个简单的静态页面

例如这样的：

<template>
  <div id="app">
    <p>{{ msg }}</p>
    <input type="text" v-model="msg">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'hello world'
    }
  }
}
</script>

在HelloWorld里面协商这么几句代码， 就能实现下面的效果

上面标签的值根据下面输入的值的改变而实时改变， 这如果通过js代码来实现的话肯定是要复杂的多的， 这就是这套框架的优势之一， 能够实时的检测你的空间属性， 甚至实现双向绑定。

可能有些人觉得一个页面太单调了， 我向有多个页面， 怎么设置呢？

组件的话就按照刚刚样式去定义， 定义之后是需要注册的， 可以再main.js里面注册， 在main.js里面导入该模块， 然后， vue.components()就可以了， 这是全局注册，注册后的模块所有组件页面都可以使用

那么还有局部注册， 比如，可以在另一个模块内部导入Helloworld.vue，然后在下面的export default里面加上components： {Helloworld.name: Helloworld}就可以了， 这样的注册，只能保证注册模块被本模块使用 

注册完成之后就可以去设置路由了，在routes里面加上

{path: '/', name: 'Helloworld', component: ()=>import('../components/HelloWorld')}

就OK了， 路由设计规则如果不懂的话， 可以去详细了解， 这样设置完成后，再npm run dev就能看到自己的新页面啦。

而一旦这些简单的页面玩会了之后我们可能就开始考虑怎么去进行动态渲染，动态渲染需要数据， 数据来自于后台， 怎么获取后台数据呢？ 常规前端可能是靠ajax， 但是vue里面木有， 因为它不需要那么多乱七八糟的文档属性之类的， 所以它采用了另一个东西，axios，这也是一个用来做网络请求的模块， 通过他我们可以从后端获取数据， 获取到数据后， 通过回调， 可以将数据渲染到各个组件上，axios还可以支持拦截器， 在所有请求之前加上拦截， 比如验证之类的， 具体大家可以去看更详细的教程。