Vue3 & app.use 与 install 函数的作用

Posted 2023-03-31 cookcyq

1. app.use

在 vue3 中，默认初始化 vue 的方式是这样的

// src/main.js
import  createApp  from 'vue'
import App from '@/App.vue'
const app = createApp(App)
app.mount('#app')
export default app

如果我们需要引入 vue-router 则需要修改成比如这样

// src/main.js
import  createApp  from 'vue'
...
++++++++
import Home from '@/pages/Home.vue'
import 
  createRouter,
  createWebHistory
 from "vue-router"

const routes = [
   path: '/home', component: Home ,
]
const router = createRouter(
  history: createWebHistory('/'),
  routes
)
// 最后通过 app.use 方法引入 Router
app.use(router)

类似的，其它插件如 i18n、vuex、vant 等都要借助 app.use 引入，
官方也解释了 app.use 就是用来引入插件，这里不在赘述。

2. install

在介绍 install 方法前，我们需要知道有这么一个方法 app.use(plugin, options)
其中 plugin 表示要传递的插件对象， options 参数是可选的，表示选项配置，
install 方法的定义就插件对象里面，install 方法会在引入插件时自动被 vue 调用，
并传参 vue 实例和 options ，具体代码如下：

// src/plugins/my-plugin.js
const myPlugin = 
	install(app, options) 
		//  name: 'Jack' 
		console.log(options);

		// 有了 app，我们注入一个全局组件
		app.component('my-button', import('@/components/my-button.vue'))
		// 也可以声明一个全局属性/函数
		app.config.globalProperties.$Tools = () => console.log('Hello,world')
	

// src/main.js
app.use(myPlugin,  name: 'Jack' )

以上代码的作用在 vue 官方都有解释，但它还隐藏了与 vue-cli 构建有关的一个很有用的功能，
install 方法除了在插件对象内定义外，组件也可以自定义 install 方法，是的，组件本身也是一个对象，
因此组件被引入时也会自动触发 install，代码如下

// src/components/my-buttonn.js
import MyButton from '@/components/my-button.vue'
MyButton.install = (app) => 
	app.component('MyButton', MyButton)

上面在 my-button.js 中引入 my-butgton.vue 组件，并新增了 install 方法，里面通过 vue 实例加载了这个 my-button 组件，这有什么用呢？我们可以先看看 vue-cli 构建
里面解释了在打包 vue 时，有个选项 --target lib 命令，此命令可以将文件打包成一个可作为依赖导入的 js 库，
我们可以将这个库推送到 npm 中，然后通过 npm install [name] 的方式安装下来，接着在项目中引入这个依赖，就可以像往常那样使用组件了，伪代码如下：

// 例如：npm install cookcyq/MyButton

// 在代码中引入
// demo.vue
<template>
	<div class="main">
		<MyButton/>
	</div>
</template>
<script>
import MyButton from '@/cookcyq/Mybutton';
export default 
  components: 
	MyButton,
  

</script>

当依赖引入时，便会触发 install 方法，实现组件自引，一个库不止一个组件，你可以在 my-button.js 引入额外的组件，
构建属于自己的组件库，这样既可以单独维护，也可以减少主体项目的代码量。

对库感兴趣的同学可以往下读 Vue3 & 详解 vue-cli 使用 --target lib 打包的方式

完！

app.use与app.get的区别及解析

app.use(path,callback)中的callback既可以是router对象又可以是函数

app.get(path,callback)中的callback只能是函数

例子

app.js

var express = require(‘express‘);
var app = express();

var index = require(‘./routes/index‘);

//1.
app.use(‘/test1‘,function(req,res,next){
    res.send(‘hello test1‘);
});

//2.
app.get(‘/test2‘,function(req,res,next){
    res.send(‘hello test2‘);
});

//3.
app.use(‘/test3‘, index);
app.use(‘/‘, test1);

//4. 页面显示错误：Cannot GET /test4
app.get(‘/test4‘, index);

//监听端口
app.listen(8888, ‘127.0.0.1‘, function () {
    console.log("服务器maintest正在监听...");
});

index是一个路由对象，结果例1、2、3结果都能正确显示，而例4却报404.

index.js:

var express = require(‘express‘);
var router = express.Router();

router.get(‘/‘, function(req, res, next) {
  res.send(‘hello world!‘);
});

module.exports = router;

两者关系

这说明，给app.get(app.post、app.put同理)赋个路由对象是不行的，其实，可以将app.get()看作app.use的特定请求(get)的简要写法。即

var express = require(‘express‘);
var app = express();
app.get(‘/hello‘,function(req,res,next){
    res.send(‘hello test2‘);

});

等同于：

var express = require(‘express‘);
var app = express();
var router = express.Router();

router.get(‘/‘, function(req, res, next) {
  res.send(‘hello world!‘);
});
app.use(‘/hello‘,router);

什么时用app.use,什么时用app.get呢？

路由规则是app.use(path,router)定义的，router代表一个由express.Router()创建的对象，在路由对象中可定义多个路由规则。可是如果我们的路由只有一条规则时，可直接接一个回调作为简写，也可以直接使用app.get或app.post方法。即

当一个路径有多个匹配规则时即一个路由有多个子路由时用app.use(path,router)，使用app.use,否则使用相应的app.method(get、post)

 

例子：
http://localhost:3000/home/one
http://localhost:3000/home/second
http://localhost:3000/home/three

路由/home后面有三个子路由紧紧跟随，分别是/one，/second，/three

如果使用app.get(),则要不断地重复，很麻烦，也不利于区分：

app.get("/home",callback)
app.get("/home/one",callback)
app.get("/home/second",callback)
app.get("/home/three",callback)

我们可以创建一个router.js专门用来一个路由匹配多个子路由

 

 

var express = require(‘express‘)
var router = express.Router()
router.get("/",(req,res)=>{
    res.send("/")
})
router.get("/one",(req,res)=>{
    res.send("one")
})
router.get("/second",(req,res)=>{
    res.send("second")
})
router.get("/treen",(req,res)=>{
    res.send("treen")
})
module.exports = router;

 

在app.js中导入router.js

var express = require(‘express‘)
var router = require("./router")
var app = express()

app.use(‘/home‘,router) //router路由对象中的路由都会匹配到"/home"路由后面
app.get(‘/about‘, function (req, res) {
  console.log(req.query)
  res.send(‘你好，我是 Express!‘)
})

// 4 .启动服务
app.listen(3000, function () {
  console.log(‘app is running at port 3000.‘)
})

app.use的作用是将一个中间件绑定到应用中，参数path是一个路径前缀，用于限定中间件的作用范围，所有以该前缀开始的请求路径均是中间件的作用范围，不考虑http的请求方法，例如：

如果path设置为‘/’，则

- GET / 
- PUT /foo 
- POST /foo/bar 
均是中间件的作用范围

 

 

app.use(express.static(‘public‘));

为了提供对静态资源文件（图片，css，js文件）的服务，请使用Express内置的中间函数express.static.

传递一个包含静态资源的目录给express.static中间件用于立即开始提供文件。 比如用以下代码来提供public目录下的图片、css文件和js文件：
app.use(express.static(‘public‘));

如果前台想请求后台public目录下images/08.jpg静态的图片资源
通过： http://localhost:3000/images/08.jpg

通过多次使用 express.static中间件来添加多个静态资源目录:

app.use(express.static(‘public‘));
app.use(express.static(‘file‘));

Express将会按照你设置静态资源目录的顺序来查看静态资源文件。

参考：https://www.jianshu.com/p/1d92463ebb69