Vue框架相关(2)

如何使用别人的vue项目

• 通常情况网上下好的vue开源项目都是不包含node_modules文件的
• 这个时候只需要打开npm i一下，就会自动读取package.json中的记录下好依赖

第三方组件element-ui

3.0版本官网

居然是饿了么提供的开源前端框架

安装

1. 安装:npm install element-plus --save
2. 快速开始:
   1. 完整导入:如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

      import { createApp } from 'vue'
      import ElementPlus from 'element-plus'
      import 'element-plus/dist/index.css'
      import App from './App.vue'
      const app = createApp(App)
      app.use(ElementPlus)
      app.mount('#app')

      app.use(ElementPlus)就是一种全局注册

   2. 按需导入

      TO DO自行看官网，太多了有空来写

使用

看官方文档中的代码使用，不多赘述

图标库

推荐与使用

1. font Awesome4:免费，5，6收费
   1. 安装npm install font-awesome --save
   2. 使用import font-awesome/css/font-awesome.min.css
   3. eg:`

      更多使用方法见官方文档

2. 阿里矢量图库:免费，但是总感觉不实用

   element也有,但是很少用

组件生命周期函数(钩子)

每一个组件都有自己的生命周期，以及其对应的函数，其可以被调用实现一些功能

eg：created:被创建的时候

• 在组件js中的导出里使用created:function(){ console.log("component has been created")}就可以看见被创建时控制台打印

1. created:与data:同级
2. 其他生命周期函数类似，同样不多赘述
   

前端路由VueRouter

官方参考文档4.x

安装与使用

• Vue路由(vue-router)是官方的路由插件，能轻松的管理SPA项目中组件的切换。
• Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来
• vue-router目前有3.x和4.x版本，分别对应vue2和vue3
• 安装:npm install vue-router@4

  这里安装的是四，默认安装最新版，同理3就是安装@3

声明路由链接和占位标签

可以使用<router-link>标签来声明路由链接,并使用<router-view>标签来声明路由占位符。示例代码如下:
App.vue:

<template>
  <div>
    <h1>APP组件</h1>
    <!-- 声明路由链接 -->
    <router-link to="/discover">发现音乐</router-link>
    <!-- 声明路由占位符标签 -->
    <router-view></router-view>
  </div>
</template>

创建路由模块

建议在/src下新建一个/router
新建一个index.js:

import { createMemoryHistory, createRouter } from 'vue-router'

import guideView from './guide.vue'//导入你的组件

const routes = [
  { path: '/guide', component: guideView },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})
export default router

注册路由器插件

一旦创建了我们的路由器实例，我们就需要将其注册为插件，这一步骤可以通过调用 use() 来完成。

import router from './router/index'
createApp(App).use(router).mount('#app')

路由重定向

• 指的是:用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。
• 通过路由规则的redirect属性,指定一个新的路由地址:

const routes = [
    { path: '/', redirect: '/guide' },
    { path: '/guide', component: guideView },
]

嵌套路由

在其他组件（例如示例中的guide.vue中），声明子路由链接以及子路由占位符:

<template>
    <h1>HelloWorld</h1>
    <router-link to='/guide/toplist'>推荐</router-link>
    <hr>
    <router-view></router-view>
</template>

然后导入到index.js中：

1. 方法一(不推荐)：

import TopListView from '../components/TopList.vue'
const routes = [
    { path: '/', redirect: '/guide' },
    { path: '/guide', component: guideView },
    { path:'/guide/toplist', component: TopListView}
]

这样写不仅会覆盖父组件的内容，而且非常的不好区分子父

2. 方法二,通过children属性声明子路由规则：

import Toplist from '../components/toplist.vue'
const routes = [
    { path: '/', redirect: '/guide' },
    {
        path: '/guide',
        component: guideView,
        children: [
            { path: "toplist", component: Toplist },
        ]

    },
]

动态路由

把hash地址中可变的部分定义为参数项，从而提高路由规则的复用性

为了简化了路由参数的获取形式，可以开启props传参

{path: '/product/:id',component:Product,props:true}

在对应组件中有:

<template>
  <h1>组件<h1>
  <p>{{id}}<p>
</template>
<script>
  export default{
    name:'Product'
    props:[id]
  }
</script>

编程式导航

• 之前介绍的router-link属于声明式的，如果想要导航到不同的URL中，则使用router.push方法
• 这个方法会向history栈中添加一个新的记录，所以，当用户点击浏览器后退按钮时候，则回到之前的URL
• 两者在一定程度上类似（有区分以后这里添加）

<template>
  <button  @click="gotoguide">跳转到导航</button>
</template>
<script>
  export default{
    methods:{
      gotoguide:function(){
        this.$router.push('/guide')
      }
    }
  }

</script>

导航守卫

导航守卫可以控制路由的访问权限
可以使用router.beforeEach注册一个全局前置守卫:

router.beforeEach((to,from,next)=>{
  if(to.path ==='/main'&& !isAuthenticated){
    next('/login')
  }
  else{
    next()
  }
})

• to:即将要进入的目标
• from:当前导航正要离开的路由
• 在守卫方法中如果声明了next形参,则必须调用next()函数，否则不允许用户访问任何一个路由
  • 直接放行:next()
  • 强制其停留在当前页面:next(false)
  • 强制其跳转到登录页面:next('.login')

状态管理Vuex

以下介绍以vue3的vuex4.x为主

介绍

• Vuex是专为Vue.js应用程序开发的状态管理库，采用集中式储存管理应用的所有组件的状态
• 简单的说，Vuex用于管理分散在Vue各个组件中的数据
• 安装:npm install vuex@next
  官方文档4.x

状态管理

• 每个Vuex应用的核心都是一个store，与普通的全局对象不同的是，基于Vue数据与视图绑定的特点，当store中的状态发生变化时，与之绑定的视图也会被重新渲染
• store中的状态不允许被直接修改，改变store中的状态的唯一途径就是显式地提交(commit)mutation,这可以让我们方便的跟踪每一个状态的变化
• 在大型复杂应用中，如果无法有效地跟踪到状态的变化，将会对理解和维护代码带来极大的困扰
• Vuex中有五个重要的概念：State, Getter, Mutation, Action, Module.
  

State

• State用于维护所有应用层的状态，并确保应用只有唯一的数据源

//创建一个新的store实例
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

• 访问：在组件中，可以直接使用this.$store.state.count访问数据,也可以先用mapState辅助函数将其映射下来

import {mapState} from 'vuex'
export default{
  computed:mapState({
    count:state=>state.count
    countAlias:'count',
    coutPlusLocalState(state){
      return state.count + this.localCount
    }
  })
}

Getter

• 维护由State派生的一些状态，这些状态随着State状态变化而变化

const store = createStore({
state:{
  todos:[
    { id: 1, text;'...', done:true},
    { id: 2, text:'...',done:false}
  ]
},
getters:{
  doneTodos:(state)=>{
    return state.todos.filter(todo => todo.done)
  }
}
})

• 在组件中，可以直接使用this.$store.getters.doneTodos，也可以使用mapGetters辅助函数将其映射下来

import { mapGetters } from 'vuex'
export default{
  computterd:{
    ...mapGetters([
      'doneTodosCount',
      'anoherGetter',
    ])
  }
}

注意，这里的…不是省略，而是一个对象的展开函数

Action

Action类似Mutation，不同在于：
Action不能直接修改状态，只能通过提交mutation来修改，Action可以包含异步操作

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions:{
    increment(context){
      context.commit('increment')
    }
  }
})

• 在组件中，可以直接使用this.$store.dispatch('xxx')分发action，或者使用mapActions辅助函数先将其映射下来

methods:{
  ...mapActions([
    'increment',//将this.increment()映射为this.$store.dispatch('increment')
    //mapActions也支持载荷
    'incrementBy'//将this.incrementBy(amount)映射为this.$store.dispatch('incrementBy',amount)
  ]),
}

mutation

• 在组件中，可以直接使用store.commit来提交mutation

methods:{
  increment(){
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

• 也可以先用mapMutatiuon辅助函数将其映射下来

methods:{
  ...mapMutations([
    'increment'
    'incrementBy'
  ]),
}

Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

vue-element-admin

介绍

• vue-element-admin是后台前端解决方案，基于vue和element-ui实现
• 内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件
• 可以快速搭建企业级中后台产品原型
• 官方文档

  一般开发使用基础模板vue-admin-template,有需求添加再根据集成方案vue-element-admin源码添加

安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

官方TIP
强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn 替代 npm。
Windows 用户若安装不成功，很大概率是node-sass安装失败，解决方案。
另外因为 node-sass 是依赖 python环境的，如果你之前没有安装和配置过的话，需要自行查看一下相关安装教程。

• 启动完成后会自动打开浏览器访问 http://localhost:9527， 你看到下面的页面就代表操作成功了。

取消es-lint校验

如果不想使用ESLint，只要找到vue.config.js文件。设置lintOnSave: false即可