【VUE】vue.js库，脚手架vue-cli，路由vue-router，Axios

超级“简”介

• vue是双向绑定的前端框架
• Vue核心思想：
  1. 数据驱动(即是双向的数据绑定)
  2. 组件化 扩展HTML元素
• 轻量级MVVM
• 使用VUE后，不需要进行DOM操作，即不需要使用jQuery
• 可在VUE中使用Bootstrap
  （https://blog.csdn.net/liuguiqian1/article/details/82712868）

中文官网

https://cn.vuejs.org/

使用

1.非安装使用vue.js

Vue 可以直接把它当做一个js库使用，可以很简单的接⼊入到你的项⽬目中，或者你只需要使⽤用双向数据绑定。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.安装vue脚手架“vue-cli”

1. 安装node.js (为了使用“npm”,它是Node.js的包管理工具)
   下载地址：http://nodejs.cn/download/
2. 打开cmd，输入npm -v 查看版本号
3. 如有需要：修改npm镜像为国内镜像： npm config set registry http://registry.npm.taobao.org/
4. 安装vue-cli： npm install -g @vue/cli
5. 检查是否安装好： vue -V
6. cmd到想要创建VUE的目录上
7. 创建项目：vue create vueDemo
8. 启动项目：npm run serve (需在创建的vue项目路径)

3.安装路由vue-router

1. 需要在每个工程目录下安装vue-router

    npm install vue-router
   

2. 在main.js中导入：

    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
   

3. 在main.js中导入路由使用的组件：

    import Child1 from "./components/Child1.vue"
   

4. 在main.js中定义路由规则：

    var routes = [
    {
    	path: "/",  // 根路径
    	redirect: '/child1'  // 重定向
    },
    {
    	path: '/child1',  
    	component: Child1
    },
    {
    	path: '/child2',  
    	component: Child2
    },
    {
    	path: '/child3',  
    	component: Child3
    },
    {
    	path: '/child4',  
    	component: Child4
    },
    {
    	path: '/child5',  
    	component: Child5
    }
   

   ]

5. 在main.js中创建路由对象：

    var router = new VueRouter({
    routes
    })
   

6. 在main.js中挂载路由到vue对象
   

7. 是否需要重启自己看着办：npm run serve

4. 安装Axios

1. 用于发送Ajax请求，需要在每个工程目录下安装

    npm install --save axios
   

2. 在main.js中导入

    import Axios from 'axios'
    Vue.prototype.$ajax = Axios //$ajax(自定义名)