Vue 全家桶知识点

vue全家桶：vue + vuex (状态管理) + vue-router (路由) + vue-resource + axios +UI框架（iview、vant、elementUI等等）
概括起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。
两大核心思想：组件化和数据驱动。组件化：把整体拆分为各个可以复用的个体，数据驱动：通过数据变化直接影响bom展示，避免dom操作。

Vue-cli是快速构建单页应用的脚手架
# 全局安装 vue-cli
$ npm install --global vue-cli 或 npm install -g @vue/cli 卸载npm uninstall -g @vue/cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack myproject
# 安装依赖，走你
$ cd myproject
$ npm install
$ npm run dev

注，如初始化不成功，需切换镜像地址
查看原来的镜像地址：
npm get registry
换成淘宝镜像
npm config set registry http://registry.npm.taobao.org/
换成淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
如，vue无法识别，则需添加环境变量到path中
C:\Users\Administrator\AppData\Roaming\npm

vue-router
安装：npm installvue-router
在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

$route 和 $router 的区别
$route  是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。

router的更多详解
https://www.jianshu.com/p/4c5c99abb864

传参：
Hi页面传参|

接收参数：
{{$route.params.addr}}
{{$route.query.addr}}
{{$route.name}}   #接收变量名为name的参数，name的定义是在router/index.js中的 routes 数组定义

或 
Params


router/index.js 文件内容：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi-1'
import Hi2 from '@/components/Hi-2'
import Hi21 from '@/components/Hi-2-1'
import Error from '@/components/Error'
import Params from '@/components/Params'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'HelloWorld',
        // components:{default:HelloWorld,left:Hi2,right:Hi1} , //路由后 解析多组件（模板）
        component: HelloWorld
    }, {
        path: '/hi', // router-link 的 to 用到
        name: 'Hi', //router-link 传参时， 属性 to 用到
        component: Hi, //路由后 解析的模板
        alias:'/gethi',//取别名
		children: [
            { path: 'hi1', name: 'Hi1', component: Hi1 },
            { path: 'hi2', name: 'Hi2', component: Hi2, children: [{ path: 'hi21', name: "hi21", component: Hi21 }] }
        ]
    }, {
        path: '/params/:newsId(\\d+)/:newsTitle',  //router-link 传参，用占位符替换 （可用正则），获取参数: {{$route.params.newsId}} - {{$route.params.newsTitle}}
        name: 'params', 
        component: Params 

    }, {
        path: '/gotoparams/:newsId(\\d+)/:newsTitle',
        redirect: '/params/:newsId(\\d+)/:newsTitle' //redirect 时带参数。
    }, {
        path: '*', //所有路由不匹配时，会匹配这
        component: Error,
    }]
})

redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了中的内容。

跳转时有过渡效果

 

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}



vuex
专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。
vuex 由五部分组成：state、action、mutation、getters、module组成。
使用流程是：组件中可以直接调用除了module的其他四个部分。
在src目录下，创建vuex目录，并创建store.js文件，此时，，store.js文件即有state、action、mutation、getters、module属性：

----------- store.js start ----------------
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';


Vue.use(Vuex); //vue 加载vuex模块


//定义对象state状态
const state = {
    count: 1,
    products: {
        date: '2020-7-2 11:30',
        name: 'apple',
        seller: 'jd',
        price: '￥5000',
        addr: '广州天河',
        num: 12,
        color: 'red'
    },
    them: []
}

//state数据输出前调用
const getters = {
    count(state) {
        return state.count += 10; //不管调用的是add ，还是reduce，都会调用到
    }
}

//同步请求，改变state
//mutations 里的方法，可当做当前对象的commit()方法参数
const mutations = {
    add: (state, n) => {
        state.count += n;
    },
    reduce(state) {
        state.count--;
    },
    ggthem(state) {
        axios.get('http://localhost/')
            .then(function(res) {
                state.them = res.data
                console.log('from store :')
                console.log(state.them)
            })
            .catch(function(error) {
                console.log(error)
            })
    }
}


// 异步请求，改变state
// 在组件中，可用dispatch调用，如 this.$store.dispatch('addAction');  
const actions = {
    addAction(context) { // context上下文对象，这里可以理解称store本身
        context.commit('add', 10);
        console.log('3s后异步调用reduce.')
        setTimeout(() => {
            context.commit('reduce');
            console.log('在addAction中异步调用reduce..')
        }, 3000);
    },
    reduceAction({ commit }) { // 直接把commit对象解构出来，可以让方法体逻辑和代码更清晰明了
        commit('reduce');
    },
    // themAction({ commit }) {
    //     commit('getThem');
    // }

}


export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})
----------- store.js end ----------------

注意，在vue组件，导入 mapState, mapGetters, mapActions ,mapMutations 中一个或多个时要有大括号包裹，不然会报错，如，
import { mapState, mapGetters, mapActions } from 'vuex'，例如在count 组件中：

--------------- count.vue start ----------------------




--------------- count.vue end ----------------------

axios
是一个http请求包，vue官网推荐使用axios进行http调用。
安装：
npm install axios --save

搭配UI框架如：iview（新版View UI）、vant、elementUI
iview 一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本)；
vant 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
Ant Design Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
elementUI 是基于 Vue 2.0 桌面端中后台组件库。
http://www.axios-js.com/zh-cn/docs/


初始化后的文件目录
|-- build                                // 项目构建(webpack)相关代码
|   |-- build.js                     　　// 生产环境构建代码
|   |-- check-version.js             　　// 检查node、npm等版本
|   |-- dev-client.js                　　// 热重载相关
|   |-- dev-server.js                　　// 构建本地服务器
|   |-- utils.js                     　　// 构建工具相关
|   |-- webpack.base.conf.js         　　// webpack基础配置
|   |-- webpack.dev.conf.js          　　// webpack开发环境配置
|   |-- webpack.prod.conf.js         　　// webpack生产环境配置
|-- config                               // 项目开发环境配置
|   |-- dev.env.js                       // 开发环境变量
|   |-- index.js                     　　// 项目一些配置变量
|   |-- prod.env.js                  　　// 生产环境变量
|   |-- test.env.js                  　　// 测试环境变量
|-- node_modules                         // 项目开用到的包（可忽略）
|-- src                                  // 源码目录
|   |-- assets                   　　	 // assets是静态文件目录，如logo图等
|   |-- components                   　　// vue公共组件
|   |-- router                   　　	 // router路由文件目录
|   |-- store                        　　// vuex的状态管理
|   |-- App.vue                      　　// 页面入口文件
|   |-- main.js                      　　// 程序入口文件，加载各种公共组件
|-- static                               // 静态文件，比如一些图片，json数据等
|   |-- data                         　　// 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息


打包注意事项
修改config/index.js中build的 assetsPublicPath 为 "/" ,若想在本地打开打包后的文件可改为 "./"