基于bkui的vue应用开发（一、基本搭建与使用）

Vue路由基础知识

在我们使用vue-cli创建项目时，只要在create时，将router选上即可

route（只读）

进行以上配置后，在 window 全局对象中，就有了一个 路由的构造函数叫做 VueRouter，我们可以自定义一段我们的路由规则。
路由对象会被赋值为 this.$route ，并且当路由切换时，路由对象会被更新（就是说每次url变了的时候，路由对象一般也会有变化）

属性	用途
$route.path	当前路由对象的路径，比如"/home/index"
$route.params	类似于vue内部的post传值，从一个页面传过去，可以从另一个页面取到
$route.query	get传的值，比如/home/index/?value=6时，$route.query.value的值为6
$route.router	路由规则所属的路由器（稍后解释）
$route.name	当前路径的名字
$route.matched	包含当前匹配的路径中所包含的所有片段所对应的配置参数对象

router（只写）

与route对应，route是只读的，而router是只写的。
例子：

// 页面跳转
this.$router.push({
    name:'index', params:{
    name:'syc'} })
// 路径名读取
var name = this.$route.params.name

实现原理

相信初学vue的同学可能会有疑惑，为什么我们要用vue-router，直接在template中写上a标签不香么？
答案是因为Vue做的是单页应用，其实整个网站在本质上只有一个页面。
他是怎么实现的呢？

bkui框架初探

安装与创建

安装bkui

npm install -g bkui-cli

创建项目：

bkui init xxx
cd xxx
bk i

运行项目

npm run dev

引用路径的写法

在build/webpack.base.conf.js中有如下代码：

    resolve: {
   
        // 指定以下目录寻找第三方模块，避免 webpack 往父级目录递归搜索，
        // 默认值为 ['node_modules']，会依次查找./node_modules、../node_modules、../../node_modules
        modules: [resolve('src'), resolve('node_modules')],
        extensions: ['.js', '.vue', '.json'],
        alias: {
   
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            '@doc'