转自：coderwhy，写项目按照这个来啦！

一. 代码规范

1.1. 集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

 # http://editorconfig.org
 ​
 root = true
 ​
 [*] # 表示所有文件适用
 charset = utf-8 # 设置文件字符集为 utf-8
 indent_style = space # 缩进风格（tab | space）
 indent_size = 2 # 缩进大小
 end_of_line = lf # 控制换行类型(lf | cr | crlf)
 trim_trailing_whitespace = true # 去除行首的任意空白字符
 insert_final_newline = true # 始终在文件末尾插入一个新行
 ​
 [*.md] # 表示仅 md 文件适用以下规则
 max_line_length = off
 trim_trailing_whitespace = false

VSCode需要安装一个插件：EditorConfig for VS Code

1.2. 使用prettier工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

1.安装prettier

 npm install prettier -D

2.配置.prettierrc文件：

• useTabs：使用tab缩进还是空格缩进，选择false；
• tabWidth：tab是空格的情况下，是几个空格，选择2个；
• printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
• singleQuote：使用单引号还是双引号，选择true，使用单引号；
• trailingComma：在多行输入的尾逗号是否添加，设置为 none；
• semi：语句末尾是否要加分号，默认值true，选择false表示不加；

 {
   "useTabs": false,
   "tabWidth": 2,
   "printWidth": 80,
   "singleQuote": true,
   "trailingComma": "none",
   "semi": false
 }

3.创建.prettierignore忽略文件

 /dist/*
 .local
 .output.js
 /node_modules/**
 ​
 **/*.svg
 **/*.sh
 ​
 /public/*

4.VSCode需要安装prettier的插件

5.测试prettier是否生效

• 测试一：在代码中保存代码；
• 测试二：配置一次性修改的命令；

在package.json中配置一个scripts：

     "prettier": "prettier --write ."

1.3. 使用ESLint检测

1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。

2.VSCode需要安装ESLint插件：

3.解决eslint和prettier冲突的问题：

安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）

 npm i eslint-plugin-prettier eslint-config-prettier -D

添加prettier插件：

   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
     "@vue/prettier",
     "@vue/prettier/@typescript-eslint",
     'plugin:prettier/recommended'
   ],

4. 添加忽略规则.eslintrc.js

 module.exports = {
   root: true,
   env: {
     node: true,
   },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
     "plugin:prettier/recommended",
   ],
   parserOptions: {
     ecmaVersion: 2020,
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "vue/multi-word-component-names": "off", //关闭组件名必须为多个单词
   },
 };
 ​

1.4. git Husky和eslint

虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉了：

• 也就是我们希望保证代码仓库中的代码都是符合eslint规范的；
• 那么我们需要在组员执行 git commit 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复；

那么如何做到这一点呢？可以通过Husky工具：

• husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

如何使用husky呢？

这里我们可以使用自动配置命令：

 npx husky-init && npm install

这里会做三件事：

1.安装husky相关的依赖：

2.在项目目录下创建 .husky 文件夹：

 npx huksy install

3.在package.json中添加一个脚本：

接下来，我们需要去完成一个操作：在进行commit时，执行lint脚本：

这个时候我们执行git commit的时候会自动对代码进行lint校验。

1.5. git commit规范

1.5.1. 代码提交风格

通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen

• Commitizen 是一个帮助我们编写规范 commit message 的工具；

1.安装Commitizen

 npm install commitizen -D

2.安装cz-conventional-changelog，并且初始化cz-conventional-changelog：

 npx commitizen init cz-conventional-changelog --save-dev --save-exact

这个命令会帮助我们安装cz-conventional-changelog：

并且在package.json中进行配置：

这个时候我们提交代码需要使用 npx cz：

• 第一步是选择type，本次更新的类型

• 第二步选择本次修改的范围（作用域）

• 第三步选择提交的信息

• 第四步提交详细的描述信息

• 第五步是否是一次重大的更改

• 第六步是否影响某个open issue

我们也可以在scripts中构建一个命令来执行 cz：

1.5.2. 代码提交验证

如果我们按照cz来规范了提交风格，但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢？

• 我们可以通过commitlint来限制提交；

1.安装 @commitlint/config-conventional 和 @commitlint/cli

 npm i @commitlint/config-conventional @commitlint/cli -D

2.在根目录创建commitlint.config.js文件，配置commitlint

 module.exports = {
   extends: ['@commitlint/config-conventional']
 }

3.使用husky生成commit-msg文件，验证提交信息：

 npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

二. 第三方库集成

2.1. vue.config.js配置

vue.config.js有三种配置方式：

• 方式一：直接通过CLI提供给我们的选项来配置：
  • 比如publicPath：配置应用程序部署的子目录（默认是 /，相当于部署在 https://www.my-app.com/）；
  • 比如outputDir：修改输出的文件夹；
• 方式二：通过configureWebpack修改webpack的配置：
  • 可以是一个对象，直接会被合并；
  • 可以是一个函数，会接收一个config，可以通过config来修改配置；
• 方式三：通过chainWebpack修改webpack的配置：
  • 是一个函数，会接收一个基于 webpack-chain 的config对象，可以对配置进行修改；

 const path = require('path')
 ​
 module.exports = {
   outputDir: './build',
   // configureWebpack: {
   //   resolve: {
   //     alias: {
   //       views: '@/views'
   //     }
   //   }
   // }
   // configureWebpack: (config) => {
   //   config.resolve.alias = {
   //     '@': path.resolve(__dirname, 'src'),
   //     views: '@/views'
   //   }
   // },
   chainWebpack: (config) => {
     config.resolve.alias.set('@', path.resolve(__dirname, 'src')).set('views', '@/views')
   }
 }

2.2. vue-router集成

安装vue-router的最新版本：

 npm install vue-router@next

创建router对象：

 import { createRouter, createWebHashHistory } from 'vue-router'
 import { RouteRecordRaw } from 'vue-router'
 ​
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
     redirect: '/main'
   },
   {
     path: '/main',
     component: () => import('../views/main/main.vue')
   },
   {
     path: '/login',
     component: () => import('../views/login/login.vue')
   }
 ]
 ​
 const router = createRouter({
   routes,
   history: createWebHashHistory()
 })
 ​
 export default router

安装router：

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

在App.vue中配置跳转：

 <template>
   <div id="app">
     <router-link to="/login">登录</router-link>
     <router-link to="/main">首页</router-link>
     <router-view></router-view>
   </div>
 </template>

2.3. vuex集成

安装vuex：

 npm install vuex@next

创建store对象：

 import { createStore } from 'vuex'
 ​
 const store = createStore({
   state() {
     return {
       name: 'coderwhy'
     }
   }
 })
 ​
 export default store

安装store：

 createApp(App).use(router).use(store).mount('#app')

在App.vue中使用：

 <h2>{{ $store.state.name }}</h2>

2.4. element-plus集成

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库：

• 相信很多同学在Vue2中都使用过element-ui，而element-plus正是element-ui针对于vue3开发的一个UI组件库；
• 它的使用方式和很多其他的组件库是一样的，所以学会element-plus，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；

安装element-plus

 npm install element-plus

2.4.1. 全局引入

一种引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册：

 import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
 ​
 import router from './router'
 import store from './store'
 ​
 createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

2.4.2. 局部引入

也就是在开发中用到某个组件对某个组件进行引入：

 <template>
   <div id="app">
     <router-link to="/login">登录</router-link>
     <router-link to="/main">首页</router-link>
     <router-view></router-view>
 ​
     <h2>{{ $store.state.name }}</h2>
 ​
     <el-button>默认按钮</el-button>
     <el-button type="primary">主要按钮</el-button>
     <el-button type="success">成功按钮</el-button>
     <el-button type="info">信息按钮</el-button>
     <el-button type="warning">警告按钮</el-button>
     <el-button type="danger">危险按钮</el-button>
   </div>
 </template>
 ​
 <script lang="ts">
 import { defineComponent } from 'vue'
 ​
 import { ElButton } from 'element-plus'
 ​
 export default defineComponent({
   name: 'App',
   components: {
     ElButton
   }
 })
 </script>
 ​
 <style lang="less">
 </style>

但是我们会发现是没有对应的样式的，引入样式有两种方式：

• 全局引用样式（像之前做的那样）；
• 局部引用样式（通过babel的插件）；

1.安装babel的插件：

 npm install babel-plugin-import -D

2.配置babel.config.js

 module.exports = {
   plugins: [
     [
       'import',
       {
         libraryName: 'element-plus',
         customStyleName: (name) => {
           return `element-plus/lib/theme-chalk/${name}.css`
         }
       }
     ]
   ],
   presets: ['@vue/cli-plugin-babel/preset']
 }

但是这里依然有个弊端：

• 这些组件我们在多个页面或者组件中使用的时候，都需要导入并且在components中进行注册；
• 所以我们可以将它们在全局注册一次；

 import {
   ElButton,
   ElTable,
   ElAlert,
   ElAside,
   ElAutocomplete,
   ElAvatar,
   ElBacktop,
   ElBadge,
 } from 'element-plus'
 ​
 const app = createApp(App)
 ​
 const components = [
   ElButton,
   ElTable,
   ElAlert,
   ElAside,
   ElAutocomplete,
   ElAvatar,
   ElBacktop,
   ElBadge
 ]
 ​
 for (const cpn of components) {
   app.component(cpn.name, cpn)
 }

2.5. axios集成

安装axios：

 npm install axios

封装axios：

 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 import { Result } from './types'
 import { useUserStore } from '/@/store/modules/user'
 ​
 class HYRequest {
   private instance: AxiosInstance
 ​
   private readonly options: AxiosRequestConfig
 ​
   constructor(options: AxiosRequestConfig) {
     this.options = options
     this.instance = axios.create(options)
 ​
     this.instance.interceptors.request.use(
       (config) => {
         const token = useUserStore().getToken
         if (token) {
           config.headers.Authorization = `Bearer ${token}`
         }
         return config
       },
       (err) => {
         return err
       }
     )
 ​
     this.instance.interceptors.response.use(
       (res) => {
         // 拦截响应的数据
         if (res.data.code === 0) {
           return res.data.data
         }
         return res.data
       },
       (err) => {
         return err
       }
     )
   }
 ​
   request<T = any>(config: AxiosRequestConfig): Promise<T> {
     return new Promise((resolve, reject) => {
       this.instance
         .request<any, AxiosResponse<Result<T>>>(config)
         .then((res) => {
           resolve((res as unknown) as Promise<T>)
         })
         .catch((err) => {
           reject(err)
         })
     })
   }
 ​
   get<T = any>(config: AxiosRequestConfig): Promise<T> {
     return this.request({ ...config, method: 'GET' })
   }
 ​
   post<T = any>(config: AxiosRequestConfig): Promise<T> {
     return this.request({ ...config, method: 'POST' })
   }
 ​
   patch<T = any>(config: AxiosRequestConfig): Promise<T> {
     return this.request({ ...config, method: 'PATCH' })
   }
 ​
   delete<T = any>(config: AxiosRequestConfig): Promise<T> {
     return this.request({ ...config, method: 'DELETE' })
   }
 }
 ​
 export default HYRequest

2.6. VSCode配置

 {
   "workbench.iconTheme": "vscode-great-icons",
   "editor.fontSize": 17,
   "eslint.migration.2_x": "off",
   "[javascript]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "files.autoSave": "afterDelay",
   "editor.tabSize": 2,
   "terminal.integrated.fontSize": 16,
   "editor.renderWhitespace": "all",
   "editor.quickSuggestions": {
     "strings": true
   },
   "dhttps://markdown.cztcode.com/008i3skNgy1gsqwar8xp1j30fq00ya9x.jpgebug.console.fontSize": 15,
   "window.zoomLevel": 1,
   "emmet.includeLanguages": {
     "javascript": "javascriptreact"
   },
   "explorer.confirmDragAndDrop": false,
   "workbench.tree.indent": 16,
   "javascript.updateImportsOnFileMove.enabled": "always",
   "editor.wordWrap": "on",
   "path-intellisense.mappings": {
     "@": "${workspaceRoot}/src"
   },
   "hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWM7YXJyb3dzMjtmbG93Y2hhcnQ7ZXI7c2l0ZW1hcDt1bWw7YnBtbjt3ZWJpY29uc1wiLFwiY3VzdG9tTGlicmFyaWVzXCI6W1wiTC5zY3JhdGNocGFkXCJdLFwicGx1Z2luc1wiOltdLFwicmVjZW50Q29sb3JzXCI6W1wiRkYwMDAwXCIsXCIwMENDNjZcIixcIm5vbmVcIixcIkNDRTVGRlwiLFwiNTI1MjUyXCIsXCJGRjMzMzNcIixcIjMzMzMzM1wiLFwiMzMwMDAwXCIsXCIwMENDQ0NcIixcIkZGNjZCM1wiLFwiRkZGRkZGMDBcIl0sXCJmb3JtYXRXaWR0aFwiOjI0MCxcImNyZWF0ZVRhcmdldFwiOmZhbHNlLFwicGFnZUZvcm1hdFwiOntcInhcIjowLFwieVwiOjAsXCJ3aWR0aFwiOjExNjksXCJoZWlnaHRcIjoxNjU0fSxcInNlYXJjaFwiOnRydWUsXCJzaG93U3RhcnRTY3JlZW5cIjp0cnVlLFwiZ3JpZENvbG9yXCI6XCIjZDBkMGQwXCIsXCJkYXJrR3JpZENvbG9yXCI6XCIjNmU2ZTZlXCIsXCJhdXRvc2F2ZVwiOnRydWUsXCJyZXNpemVJbWFnZXNcIjpudWxsLFwib3BlbkNvdW50ZXJcIjowLFwidmVyc2lvblwiOjE4LFwidW5pdFwiOjEsXCJpc1J1bGVyT25cIjpmYWxzZSxcInVpXCI6XCJcIn0ifQ==",
   "hediet.vscode-drawio.theme": "Kennedy",
   "editor.fontFamily": "Source Code Pro, 'Courier New', monospace",
   "editor.smoothScrolling": true,
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "workbench.colorTheme": "Atom One Dark",
   "vetur.completion.autoImport": false,
   "security.workspace.trust.untrustedFiles": "open",
   "eslint.lintTask.enable": true,
   "eslint.alwaysShowStatus": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }
 }

浅拷贝

定义

浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。 如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

    const info={name:"why"} //属性的value是值，所以只是复制值
    const obj=Object.assign({},info)
    obj.name="he"
    console.log(info)

    const obj1 = {a: {b: 1}}//属性的value是对象，复制的是引用
    const obj2 = Object.assign({}, obj1)

    obj1.a.b = 2
    obj2.a.b // 2
    console.log(obj2)

输出结果

{ name: 'why' }
{ a: { b: 2 } }

这里也可以用es6语法展开运算符进行浅拷贝

    const obj1 = {a: {b: 1}}//属性的value是对象
    const obj2 = {...obj1}

    obj1.a.b = 2
    obj2.a.b // 2
    console.log(obj2.a===obj1.a)

比较一下，结果为true，对象确实是同一个

深拷贝

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

利用lodash库实现深拷贝

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库

const _ = require('lodash');
const obj1 = {
    a: 1,
    b: {f: {g: 1}},
    c: [1, 2, 3]
};
const obj2 = _.cloneDeep(obj1);

console.log(obj1.b.f === obj2.b.f);

结果是false，深拷贝不是同一个对象

vuex的基本使用

创建一个store：

import {createStore} from 'vuex'

const store = createStore();

export default store;

在Main.js中使用：

import store from './store'

createApp(App).use(store).mount('#app')

state

在store中定义数据，需要在state属性中：

const store = createStore({
  state(){
    return{
      counter:0
    }
  }
});

在组件中使用时，需要从$store.state中获取：

<h2>{{$store.state.counter}}</h2>

mutations

在vuex的开发模式中，不推荐直接对数据进行操作，而是应该通过commit来提交一次数据操作。在store中定义mutations属性：

  mutations:{
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    }
  }

在组件中调用store的commit方法，参数是要执行的mutation的方法名：

  methods:{
    increment(){
      this.$store.commit("increment")
    },
    decrement(){
      this.$store.commit("decrement")
    }
  }

mutations的一些补充

mutations中的方法的第一个参数是state，可以获取state中的变量，第二个参数是payload，即从外部传入的参数：

  mutations:{
    incrementN(state,payload){
      state.counter+=payload
    }
  },

    methods: {
      addTen(){
        this.$store.commit('incrementN',10)
      }
    },

另一种提交的风格是，将两个参数合并，即传入一个对象，当中有type来指明提交给某个函数：

this.$store.commit({
  type:'incrementN',
  incre:10
})

另外为了防止将方法名写错，可以使用常量的方式定义方法名：

  const INCREMENT_N = "increment_n";
    mutations:{
    [INCREMENT_N](state,payload){
      state.counter+=payload
    }
  },

mapState辅助函数

可以通过计算属性来简化获取state中的数据：

  computed:{
    sCounter(){
      return this.$store.state.counter
    }
  }

不过vuex为我们提供了一个函数，可以更加快速地获取到state中的变量：

import { mapState } from 'vuex'
  export default {
    computed:{
      sCounter(){
        return this.$store.state.counter
      },
      ...mapState(["counter","name"])
    }
  }

mapState传入的是要获取的state中的变量名数组，返回值是变量的computed对象，所以需要用…展开；也可以传入一个对象，可以自定义名字：

...mapState({
  sCounter:state=>state.counter,
  name:state=>state.name
})

在composition API中使用

vuex提供了一个useStore方法让我们在setup中可以获取到store：

import { useStore } from 'vuex'
import { computed } from 'vue'
  export default {
    setup(props) {
      const store = useStore();

      const sCounter = computed(()=>store.state.counter)

      return {
        sCounter
      }
    }
  }

如果要使用mapState，需要进行一些处理：

setup(props) {
      const store = useStore();

      const storeStateFns = mapState(["counter","name"]);
      const storeState = {};
      Object.keys(storeStateFns).forEach(fnKey =>{
        const fn = storeStateFns[fnKey].bind({$store:store});
        console.log(fnKey);
        storeState[fnKey]=computed(fn);
      })

      return {
        ...storeState 
      }
    }

mapState返回的都是函数，在执行时需要用到$store属性，所以需要加上bind。

对以上的内容进行封装以便使用：

      const storeStateFns = mapState(["counter","name"]);
      const storeState = {};
      Object.keys(storeStateFns).forEach(fnKey =>{
        const fn = storeStateFns[fnKey].bind({$store:store});
        console.log(fnKey);
        storeState[fnKey]=computed(fn);
      })

getters

一些数据可能需要结果处理之后再进行显示（和computed类似，不用在每一个组件中写计算属性），定义方式如下：

const store = createStore({
  state(){},
  mutations:{},
  getters:{
    totalPrice(state){
      let totalPrice=0;
      for (const book of state.books){
        totalPrice+=book.count*book.price
      }
      return totalPrice;
    }
  }
});

使用方式：

<h2>总价值:{{$store.getters.totalPrice}}</h2>

getters中定义的函数的第一个参数是state，可以获取state中定义的变量，第二个参数是getters，可以用其调用getters中其它的函数：

  getters:{
    totalPrice(state,getters){
      let totalPrice=0;
      for (const book of state.books){
        totalPrice+=book.count*book.price
      }
      return totalPrice * getters.currentDiscount;
    },
    currentDiscount(state){
      return state.discount*0.9;
    }
  }

getter函数的返回值可以是一个值，在使用时就应该如同上面所示：

<h2>总价值:{{$store.getters.totalPrice}}</h2>

也可以返回一个函数，返回函数的一个目的是传入我们的自定义参数：

totalPriceForCountN(state,getters){
  return function(n){
    let totalPrice=0;
    for (const book of state.books){
      if (book.count>=n){
        totalPrice+=book.count*book.price
      }
    }
    return totalPrice * getters.currentDiscount;
  }
}

使用时需要在后面加上小括号表示函数调用：

<h2>总价值:{{$store.getters.totalPriceForCountN(4)}}</h2>

vue-router的基本使用和配置

首先要有两个组件Home.vue和About.vue，之后将这两个组件注册到路由中：

import Home from '../pages/Home.vue';
import About from '../pages/About.vue';

// 配置映射关系
const routes = [
  {path: '/', component: Home},
  {path: '/home', component: Home},
  {path: '/about', component: About}
];

创建一个路由对象，并传入配置：

import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
// 创建一个路由对象router
const router = createRouter({
  routes,
  history: createWebHashHistory()
})

在main.js中使用router：

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

const app=createApp(App);
app.use(router);
app.mount('#app');

此时路由已经添加成功，需要在app.vue中使用路由组件。

router-view是用于显示路由中组件的地方，router-link是一个控制路由路径的a元素，使用如下：

  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>

vue-router知识点补充

在路由关系中：

const routes = [
  {path: '/', component: Home},
  {path: '/home', component: Home},
  {path: '/about', component: About}
];

默认的’/’，可以为其指定一个component，也可以重定向到一个页面：

  {path: '/', redirect: '/home'},

route还有两个属性：name是为一个route定义一个名字，路由是可以通过这个name跳转的；meta定义了这个路由的内部数据，可以通过route.meta来获取到。

对于route-link，默认使用的是history的popstate策略，为其增加replace属性后将使用replacestate策略。

  <div>
    <router-link to="/home" replace>首页</router-link>
    <router-link to="/about" replace>关于</router-link>
    <router-view></router-view>
  </div>

被选中的route-link，会自动添加上两个class属性：router-link-active和router-link-exact-active

可以利用这个class为其配置样式。其中router-link-exact-active与router-link-active的区别是，router-link-exact-active只有在精准匹配时才会加上这个class（嵌套组件的嵌套路由），而router-link-active是任何父组件也会加上。

这个默认的class可以通过active-class和extra-active-class来修改：

  <div>
    <router-link to="/home" replace active-class="home-active">首页</router-link>
    <router-link to="/about" replace active-class="about-active">关于</router-link>
    <router-view></router-view>
  </div>

路由懒加载

在路由配置的component属性中，将原来的组件替换为一个function（import的promise）：

// import Home from '../pages/Home.vue';
// import About from '../pages/About.vue';

const routes = [
  {path: '/', redirect: '/home'},
  {path: '/home', component: ()=>{
    return import("../pages/Home.vue")
  }},
  {path: '/about', component: ()=>{
    return import("../pages/About.vue")
  }}
];

利用webpack的魔法注释来为组件分包文件命名，格式为/* webpackChunkName: “” */：

const routes = [
  {path: '/', redirect: '/home'},
  {path: '/home', component: ()=>{
    return import(/* webpackChunkName: "home-chunk" */"../pages/Home.vue")
  }},
  {path: '/about', component: ()=>{
    return import(/* webpackChunkName: "page-chunk" */"../pages/About.vue")
  }}
];

动态路由

在route中可以加上/:params来表示动态路由：

// route
  {
    path: "/user/:username",
    component: ()=>{
      return import("../pages/User.vue")
    }
  }

在route-link中，必须要匹配到对应的格式才能正确路由：

// route-link
    <router-link :to="'/user/'+name">用户</router-link>

在组件中获取动态路由的参数：一是从this中获取，在this.$route中：

<template>
  <div>
    <h2>User: {{$route.params.username}}</h2>
  </div>
</template>

<script>
  export default {
    created() {
      console.log(this.$route.params.username);
    },
  }
</script>

二是使用vue-route 4的钩子函数useRoute直接获取这个组件的route：

<script>
import {useRoute, useRouter} from "vue-router"
  export default {
    setup(props) {
      const route = useRoute();
      console.log(route.params.username);
    }
  }
</script>

嵌套路由同理。

NotFound

定义一个类似于动态路由中的route，不过path是固定写法：

  {
    // 固定写法pathMatch
    path: "/:pathMatch(.*)",
    component: ()=>{
      return import("../pages/NotFound.vue")
    }
  }

由此可以导向我们编写的NotFound的组件。

获取NotFound时的路径的方法：从route.params.pathMatch中获取：

<h2>{{$route.params.pathMatch}}</h2>

如果在/:pathMatch(.*)后面再加上一个*，就会将路径按照每一个”/”为分隔符进行分割并返回一个数组。

嵌套路由

现在home组件下还有两个子组件HomeShops和HomeMessage，分别应该使用/home/shops和/home/message来访问之，在配置路由时，在home的路由下的children属性来为这两个组件配置。

  {
    path: '/home', 
    component: ()=>{
      return import(/* webpackChunkName: "home-chunk" */"../pages/Home.vue")
    },
    name: "home",
    meta: {
      name: "shopkeeper"
    },
    children: [
      {
        path:'shops',
        component: ()=> import("../pages/HomeShops.vue")
      },
      {
        path:'message',
        component:()=> import("../pages/HomeMessage.vue")
      }
    ]
  },

可以发现在children中的route，path缺省了父组件的”/home”，并且也不需要加上”/”。

在children中设置重定向，path直接填写空字符串即可，但是redirect内容要填写完整的重定向路径：

    children: [
      {
        path:"",
        redirect:"/home/message"
      },
      {
        path:'shops',
        component: ()=> import("../pages/HomeShops.vue")
      },
      {
        path:'message',
        component:()=> import("../pages/HomeMessage.vue")
      }
    ]

编程式导航

编程式导航是指通过代码来实现跳转逻辑。例如我们需要点击一个按钮来跳转到“关于”页，假设有如下的button：

    <button @click="jumpToAbout">关于</button>

对于jumpToAbout方法，如果是在methods的options中定义，可以直接使用this.$router对象：

  methods: {
    jumpToAbout(){
      // 首先要拿到router对象（不推荐直接导入）
      this.$router.push("/about");
    }
  },

如果是在setup中，需要使用一个和useRoute相似的钩子函数useRouter：

import {useRouter} from 'vue-router'
export default {
  components: {
  },
  setup(props) {
    const router = useRouter();
    function jumpToAbout(){
      // 首先要拿到router对象（不推荐直接导入）
      router.push("/about");
    }
    return {
      name: "shopkeeper"
    }
  },

在这个push方法中还可以传入一个对象（router-link的to属性也可以传入对象），对象中可以包含其它的一些配置，例如：

      router.push({
        path:"/about",
        query:{
          name: "shopkeeper",
          age:18
        }
      });

参数可以在子组件的$route.query中获取：

<h2>About: {{$route.query.name}}-{{$route.query.age}}</h2>

router还有的方法例如replace、go、forward、back等都和history中的用法相同。

router-link的v-slot

router-link实际上可以看作是一个插槽，在这个标签的内部可以写入我们想要展示的元素或者组件：

    <router-link to="/home" replace active-class="home-active">
      <nav-bar title="首页"></nav-bar>
    </router-link>

route-link中定义v-slot属性，可以获取其内部传来的一个对象：

    <!-- props：href 跳转的链接 -->
    <!-- props：route对象 -->
    <!-- props：navigate函数 -->
    <!-- props：isActive 当前是否处于活跃状态 -->
    <!-- props：isExactActive 是否是精确活跃状态 -->
    <router-link to="/home" replace active-class="home-active" v-slot="props" custom>
      <!-- <nav-bar title="首页"></nav-bar> -->
      <button>{{props.href}}</button>
      <p>{{props.route}}</p>
      <button @click="props.navigate">导航</button>
      <span :class="{'active': props.isActive}">{{props.isActive}}</span>
    </router-link>

如果再加上custom属性的话，router-link将不会给插槽中的组件外层嵌套一个a标签，即此时跳转需要我们手动执行（使用props.navigate函数）。

router-view的v-slot

router-view也可以使用插槽，在v-slot中可以获取props.Component属性，即当前要显示的组件，通过这种方式就可以结合transition、component、keep-live等组件使用

动态添加/删除路由

对于一些需要选择性注释的路由，可以动态添加：

// 动态添加路由
const categoryRoute = {
  path: "/category",
  component: ()=>import("../pages/Category.vue") 
}
const momentRoute = {
  path: "moment",
  component: ()=>import("../pages/HomeMoment.vue") 
}
// 添加顶级的路由对象
router.addRoute(categoryRoute);
// 添加二级的路由对象
router.addRoute("home",momentRoute);

动态删除一个路由有三种方式：

• 添加一个name相同的路由，之前的路由就会被替代
• 通过removeRoute方法，传入路由的名称
• 通过addRoute方法的返回值回调（返回的值是一个删除路由的函数）

路由的其它一些方法补充：

• router.hasRoute() 检查路由是否存在
• router.getRoutes() 获取一个包含所有路由记录的数组

路由导航守卫

路由的导航守卫有多种函数可以实现，现在以beforeEach为例，beforeEach种传入一个函数：

// to：Route对象，即将跳转到的route对象
// from：Route对象，从哪个路由对象导航过来的
/**
 * 返回值：
 * 1.false：不进行导航
 * 2.undefined或者不写返回值：进行默认的导航
 * 3.字符串：路径，跳转到对应的路径中
 * 4.对象：类似于router.push({path:"/login",component})
 */
router.beforeEach((to, from)=>{
  console.log(to.path,from.path);
  if (to.path.indexOf("/home")!==-1){
    return "/login"
  }
})

使用导航守卫实现一个简单的登录逻辑：假定login组件中，按下登录按钮就会在localStorage中保存一个token，

<template>
  <div>
    <button @click="loginClick">登录</button>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
  export default {
    setup(props) {
      const router=useRouter()
      const loginClick=()=>{
        window.localStorage.setItem("token","shopkeper")
        router.push({
          path:"/home"
        })
      }
      return {loginClick}
    }
  }
</script>

那么在导航守卫中，如果要跳转到一个非login的页面，都应该判断本地是否有token，如果没有就应该跳转到login组件中：

router.beforeEach((to, from)=>{
  if (to.path!== "/login"){
    const token = window.localStorage.getItem("token");
    if (!token){
      return "/login"
    }
  }
})

其它的导航守卫可以参考官网

Render函数

基本使用

render函数用于渲染html元素，用于利用JavaScript实现在template标签中做不了的事情。render提供一个h函数来构造元素，h函数的第一个参数是元素类型，第二个参数是元素的属性，第三个参数是元素的子组件：

<script>
import {h} from 'vue';
  export default {
    render() {
      return h("h2",{class:"title"},"hello render");
    },
  }
</script>

render函数实现计数器

<script>
import {h} from 'vue';
  export default {
    data() {
      return {
        counter:0
      }
    },
    render() {
      return h("div",{class:"app"},[
        h("h2",null,`当前计数：${this.counter}`),
        h("button",{
          onClick:()=>this.counter++
        },"+1"),
        h("button",{
          onClick:()=>this.counter--
        },"-1"),
      ]);
    },
  }
</script>

setup函数也可以完成替代render函数的功能：

<script>
import {h,ref} from 'vue';
  export default {
    setup(props) {
      const counter=ref(0);
      return ()=>{
        return h("div",{class:"app"},[
        h("h2",null,`当前计数：${counter.value}`),
        h("button",{
          onClick:()=>counter.value++
        },"+1"),
        h("button",{
          onClick:()=>counter.value--
        },"-1"),
      ]);
      }
    },
  }
</script>

插槽的使用

// HelloWorld.vue
<script>
import { h } from 'vue';
    export default {
        render() {
            return h("div",null,[
                h("h2",null,"hello world"),
                this.$slots.default? this.$slots.default({name:"sk"}):h("span",null,"我是hello world的默认插槽") 
            ]);
        },
    }
</script>

// App.vue
<script>
import {h} from 'vue';
import HelloWorld from './HelloWorld.vue';
  export default {
    render() {
      return h(HelloWorld,{},{
        default: props=>h("span",null,`App传入HelloWorld的内容: ${props.name}`)
      });
    },
  }
</script>

生命周期钩子

在setup中使用生命周期函数，直接导入vue中的onX函数注册生命周期：

<script>
import {onMounted, onUpdated,onUnmounted,ref} from 'vue';
    export default {
        setup(props) {
            const counter =ref(0);
            const increment=()=>{
                counter.value++;
            };
            onMounted(() => {
                console.log("app mounted");
            });
            onUpdated(() => {
                console.log("app updated");
            });
            onUnmounted(() => {
                console.log("app unmounted");
            });
            return {
                counter,
                increment
            }
        }
    }
</script>

一个生命周期函数可以使用多次。

Reactive API的补充

isProxy：检查对象是否是由reactive或readonly创建的proxy.

isReactive：检查对象是否是由reactive创建的响应式代理；如果该代理是readonly建的，但包裹了由reactive 创建的另一个代理，它也会返回true ;

isReadonly：检查对象是否是由readonly 创建的只读代理。

toRaw：返回reactive或readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用)。

shallowReactive：创建一个响应式代理，它跟踪其自身property 的响应性，但不执行嵌套对象的深层响应式转换(深层还是原生对象)。

shallowReadonly：创建一个proxy，使其自身的 property为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的)。

toRefs和toRef

toRefs：将reactive对象中所有属性都转为ref，建立连接

toRef：对其中一个属性进行转换为ref，建立连接

<script>
import { reactive, toRefs, toRef } from "vue";
    export default {
        setup() {
            const info=reactive({name:"sk",age:18});
            // toRefs：将reactive对象中所有属性都转为ref，建立连接
            // let { name, age }=toRefs(info);
            // toRef：对其中一个属性进行转换为ref，建立连接
            let {name}=toRefs(info);
            let age=toRef(info,"age");
            const change=()=>{
                // age.value++;
                info.age++;
            }

            return {
                name,
                age,
                change
            }
        }
    }
</script>

ref API的补充

unref：如果我们想要获取一个ref引用中的value，那么也可以通过unref方法︰如果参数是一个ref，则返回内部值，否则返回参数本身;这是val = isRef(val) ? val.value : val的语法糖函数;

isRef：判断值是否是一个ref对象。

shallowRef：创建一个浅层的ref对象

triggerRef：手动触发和shallowRef相关联的副作用。

<script>
import { ref, shallowRef, triggerRef } from "vue";
    export default {
        setup() {
            // 浅层响应式
            const info=shallowRef({name:"sk"});
            const changeInfo=()=>{
                info.value.name="james";
                triggerRef(info);
            }
            return {
                info,
                changeInfo
            }
        }
    }
</script>

customRef

customRef可以是我们能够决定如何跟踪依赖与什么时候触发更新。其工厂函数需要传入track和trigger参数，并返回一个拥有get和set方法的对象：

import { customRef } from "vue";
// 自定义ref
export default function(value){
    let timer=null;
    return customRef((track,trigger)=>{
        return {
            get(){
                track();
                return value;
            },
            set(newValue){
                clearTimeout(timer);
                timer=setTimeout(()=>{
                    value=newValue;
                    trigger();
                },1000);
            }
        }
    })
}

mixin和extends

mixin的基本使用

mixin本质上是一个对象，其中可以包含一个组件的option属性:

export const demoMixin = {
    data() {
        return {
            message:"hello demoMixin"
        }
    },
    methods: {
        foo(){
            console.log("demo mixin foo");
        }
    },
    created() {
        console.log("执行了demo mixin");
    },
}

在使用时，写在组件的options的mixins属性里面：

<script>
import {demoMixin} from './mixins/demoMixin.js'
    export default {
        mixins:[demoMixin],
        data() {
            return {
                title: "hello world"
            }
        },
        methods: {
            
        },
    }
</script>

如果mixin与组件中不存在命名冲突，就直接合并，如果存在冲突，分成不同情况处理：

返回值对象默认情况下会合并，如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据。

生命周期钩子函数会被合并到数组中，都会被调用。

对于methods、computed这种对象，会直接合并，如果对象的key相同，则采用组件的value。

全局mixin

全局mixin是直接调用app实例的mixin方法，并传入mixin对象完成的，所有app的组件都会享有全局mixin的内容：

const app=createApp(App);
app.mixin({
    created() {
        console.log("全局的生命周期")
    },
})
app.mount('#app');

extends

extends类似于OOP的继承，可以让一个页面继承于另一个页面：

// BasePage.vue
<script>
    export default {
        data() {
            return {
                title:"hello page"
            }
        },
        methods: {
            bar(){
                console.log("base page bar");
            }
        },
    }
</script>

// Home.vue
<template>
    <div>
        home page
        <h2>{{title}}</h2>
        <button @click="bar">按钮</button>
    </div>
</template>

<script>
import BasePage from './BasePage.vue';
    export default {
        extends:BasePage
    }
</script>

extends的规则和用法与mixin相同，并且只能继承父组件的script标签的内容。

animate.css

安装：

npm install animate.css -save

在文件中添加引用：

import "animate.css";

第一种使用方法和普通的animation用法差不多，需要使用动画的元素要被<transition>包裹，并在style中通过动画的名字使用animate.css的样式：

<template>
  <div class="app">
      <div>
        <button @click="isShow=!isShow">显示/隐藏</button>
      </div>
      <transition name="sk" mode="out-in" :appear="true">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true
      }
    },
  }
</script>

<style scoped>

  .title{
    display: inline-block;
  }

  .sk-enter-active{
    animation: rollIn 1s ease-in
  }
  
  .sk-leave-active{
    animation: rollOut 1s ease-in
  }
</style>

第二种用法是直接在transition标签中加入enter-active-class和leave-active-class属性，属性值为”animate__animated “+动画名称：

      <transition enter-active-class="animate__animated animate__rotateIn" 
        leave-active-class="animate__animated animate__rotateOutDownLeft">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>

此外还有一些属性例如enter-to-class、enter-from-class、leave-to-class、leave-from-class

transition的基本使用

对要使用动画的单个组件使用transition标签包裹，并为transition标签定义一个name：

      <transition name="sk">
        <h2 v-if="isShow">hello world</h2>
      </transition>

根据name的名称去style中定义样式，以name-为开头的一系列class：

<style scoped>
  .sk-enter-from,
  .sk-leave-to{
    opacity: 0;
  }

  .sk-enter-to,
  .sk-leave-from{
    opacity: 1;
  }

  .sk-enter-active,
  .sk-leave-active{
    transition: opacity 2s ease;
  }
</style>

如果在transition中不指定name，以上的class都以v-开头，如v-enter-from