vue学习笔记

一.vue环境搭建

参考博文：https://www.cnblogs.com/hellman/p/10985377.html

 

vue官网地址：

https://cn.vuejs.org/v2/guide/

二：vue项目目录介绍

 

      1、build：构建脚本目录

　　　　1）build.js   ==>  生产环境构建脚本；

　　　　2）check-versions.js   ==>  检查npm，node.js版本；

　　　　3）utils.js   ==>  构建相关工具方法；

　　　　4）vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀；

　　　　5）webpack.base.conf.js   ==>  webpack基本配置；

　　　　6）webpack.dev.conf.js   ==>  webpack开发环境配置；

　　　　7）webpack.prod.conf.js   ==>  webpack生产环境配置；

　　2、config：项目配置

　　　　1）dev.env.js   ==>  开发环境变量；

　　　　2）index.js   ==>  项目配置文件；

　　　　3）prod.env.js   ==>  生产环境变量；

　　3、node_modules：npm 加载的项目依赖模块

　　4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

　　　　2）components：组件目录，我们写的组件就放在这个目录里面；

　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；

　　　　4）App.vue：根组件；

　　　　5）main.js：入口js文件；

　　5、static：静态资源目录，如图片、字体等。不会被webpack构建

　　6、index.html：首页入口文件，可以添加一些 meta 信息等

　　7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

　　8、README.md：项目的说明文档，markdown 格式

　　9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

 

 

三：webpack的作用

 

webpack的作用的模块化开发和打包的作用。

vue模块化开发思维可以参考博文：

https://www.cnblogs.com/ITPower/p/14466964.html

 

vue打包将的比较详细的博文：

https://www.cnblogs.com/ITPower/p/14467745.html

 

四。 vueRouter 路由的原理和作用

 

4.1 概念

    vueRouter的作用：通过改变 URL，在不重新请求页面的情况下，更新页面视图。

前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:
1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航
2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。

4.2 实现方式

              更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：

　　　　1.Hash --- 利用 URL 中的hash("#");

　　　　2.利用 History interface 在HTML5中新增的方法。

 

            

            Vue 中，它是通过 mode 这一参数控制路由的实现模式：

        const router=new VueRouter({ mode:'history', routes:[...] })

               未指定mode的化，默认是hash方式。

 

mode 区别：

　　　　1. mode:"hash"  多了 “#”

http://localhost:8080/#/login

　　　　

　　　　2.mode:"history" 

http://localhost:8080/recommend

　　

　　HashHistory:

　　　　hash("#") 的作用是加载 URL 中指示网页中的位置。

　　　　# 本身以及它后面的字符称职位 hash，可通过 window.location.hash 获取

　　　　特点：

　　　　　　1. hash 虽然出现在 url 中，但不会被包括在 http 请求中，它是用来指导浏览器动作的，对服务器端完全无用，因此，改变 hash 不会重新加载页面。

　　　　　　2. 可以为 hash 的改变添加监听事件：

　　　　　　window.addEventListener("hashchange",funcRef,false)

　　　　　　3. 每一次改变 hash(window.localtion.hash)，都会在浏览器访问历史中增加一个记录。

　　　　利用 hash 的以上特点，就可以来实现前端路由"更新视图但不重新请求页面"的功能了。

 

 

         History interface 是浏览器历史记录栈提供的接口，通过back()、forward()、go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。

　　　　从 HTML5开始，History interface 提供了2个新的方法：pushState()、replaceState() 使得我们可以对浏览器历史记录栈进行修改：

　　window.history.pushState(stateObject,title,url) 　　window.history,replaceState(stateObject,title,url)

　　　　

　　　　stateObject：当浏览器跳转到新的状态时，将触发 Popstate 事件，该事件将携带这个 stateObject 参数的副本

　　　　title：所添加记录的标题

　　　　url：所添加记录的 url

　　　　

　　　　这2个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然当前url改变了，但浏览器不会立即发送请求该url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础。

 

4.3 vueRouter的用法：

 

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. 插件
// 安装 <router-view> and <router-link> 组件
// 且给当前应用下所有的组件都注入 $router and $route 对象
Vue.use(VueRouter)

// 2. 定义各个路由下使用的组件，简称路由组件
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 3. 创建 VueRouter 实例 router
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})

// 4. 创建 启动应用
// 一定要确认注入了 router
// 在 <router-view> 中将会渲染路由组件
new Vue({
router,
template: `
<div id="app">
<h1>Basic</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
<router-link tag="li" to="/bar">/bar</router-link>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')

 

 

router-link 标签

<router-link to='./home'></router-link>
//vue 内置标签 在渲染时渲染成a标签在点击的情况路由中的页面在<router-view>标签中渲染
to属性可以跳转页面
tag="button" 属性可以渲染成想要的原生标签

router-view标签

<router-view></router-view>写在组件想要渲染的地方,等组件跳转过来就渲染

 

 

vueRouter的钩子方法：router.beforeEach（）

router.beforeEach（）一般用来做一些进入页面的限制。比如没有登录，就不能进入某些页面，只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。

第一步 规定进入路由需不需要权限
@/router/index.js
import A from '@/components/a'
{
path: '/a',
name: 'a',
component: A,
meta : { //加一个自定义obj
requireAuth:true //这个参数 true 代表需要登录才能进入A
}
},

第二步 使用vuex整一个userId
@/assets/store.js
//使用vuex三步走
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//这个理论来说
const store = new Vuex.Store({
state:{
userId : ''
}
})

export default store

 

 

第三步 使用router.beforeEach()
@/main.js
思路：【
如果（即将进入的这个路由需要权限才能进入）{

如果(能获取到这个老哥的userID){
就让这个老哥进入这个路由
}否则{
就让这个老哥进入b这个页面
}

} 即将进入的路由不需要权限就能进入 {

就让这个老哥进入这个路由

}
】
对应代码：
import store from '@/assets/store' //把这个userId获取过来
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){
if(store.state.userId){
next()
}else{
next({path:'/b'})
}
}else{
next()
}
})

第四步
第三步这个/b路由其实就是登陆页面，
当进入A页面之前，需要请求接口，获取一下是否有登陆过，然后把这个userId存在vuex的state里。
当没有userId时，则在登陆之后，存一个userId到state里。

 

 

 

vueRouter的钩子方法：router.afterEach()

 

beforeEach是路由跳转前执行的，afterEach是路由跳转后执行的。

afterEach只有两个参数  afterEach((to,from)=>{})

例子：

router.afterEach((to,from)=>{ if(to.path === "/news"){ alert("进来news了哦"); } })

 

4.4 子路由

用children属性来定义子路由：

export default [
  {
    path: '/otherStore',
    meta: {title: '跨业合作', icon: 's-marketing', order: 41},
    component: Layout,
    children: [
      {
        path: 'otherStoreInfo',
        name: 'otherStoreInfo',
        meta: {title: '门店管理', order: 42},
        component: otherStoreInfo
      },
      {
        path: 'otherActivity',
        name: 'otherActivity',
        component: otherActivity,
        meta: {title: '预约到店活动管理', order: 43}
      },
      {
        path: 'otherStoreActivity',
        name: 'otherStoreActivity',
        component: otherStoreActivity,
        meta: {title: '预约到店信息管理', order: 44}
      }
    ]
  }
]