Vue脚手架学习 vue脚手架配置代理、插槽、Vuex使用、路由、ElementUi插件库的使用

麒麟而非淇淋2024-10-22 10:38

目录

1.vue脚手架配置代理

[1.1 方法一](#1.1 方法一)

[1.2 方法二](#1.2 方法二)

2.插槽

[2.1 默认插槽](#2.1 默认插槽)

[2.2 具名插槽](#2.2 具名插槽)

[2.3 作用域插槽](#2.3 作用域插槽)

3.Vuex

[3.1 概念](#3.1 概念)

[3.2 何时使用？](#3.2 何时使用？)

[3.3 搭建vuex环境](#3.3 搭建vuex环境)

[3.4 基本使用](#3.4 基本使用)

[3.5 getters的使用](#3.5 getters的使用)

[3.6 四个map方法的使用](#3.6 四个map方法的使用)

[3.6.1 mapState方法](#3.6.1 mapState方法)

[3.6.2 mapGetters方法](#3.6.2 mapGetters方法)

[3.6.3 mapActions方法](#3.6.3 mapActions方法)

[3.7 模块化+命名空间](#3.7 模块化+命名空间)

4.路由

1.基本使用

2.几个注意点

3.多级路由（多级路由）

4.路由的query参数

5.命名路由

6.路由的params参数

7.路由的props配置

8.的replace属性

9.编程式路由导航

10.缓存路由组件

11.两个新的生命周期钩子

12.路由守卫

13.路由器的两种工作模式

5.ElementUi组件库的使用

1.首先安装element-ui插件库

[2.引入 Element](#2.引入 Element)

[2.1 一般引入](#2.1 一般引入)

[2.2 按需引入](#2.2 按需引入)

1.vue脚手架配置代理

1.1 方法一

在vue.config.js中添加如下配置：

javascript 复制代码 
devServer:{
  proxy:"http://localhost:5000"
}

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。

  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。如果路径上有8080本身的文件时，就会访问该文件，而不会选择代理。

  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

1.2 方法二

编写vue.config.js配置具体代理规则：

javascript 复制代码 
module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

  2. 缺点：配置略微繁琐，请求资源时必须加前缀。

2.插槽

作用：让父组件可以向子组件指定位置插入html结构 ，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

分类：默认插槽、具名插槽、作用域插槽

2.1 默认插槽

示例代码：

html 复制代码 
父组件中：
        <Category>
           <div>html结构1</div>
        </Category>



子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

2.2 具名插槽

示例代码：

html 复制代码 
父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

           <!-- template slot="footer" -->

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>



子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

2.3 作用域插槽

理解：数据在组件插槽的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

示例代码：

html 复制代码 
父组件中：
        <Category>
            <template scope="scopeData">
                <!-- 生成的是ul列表 -->
                <ul>
                    <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                </ul>
            </template>
        </Category>

        <Category>
            <template slot-scope="scopeData">
                <!-- 生成的是h4标题 -->
                <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
            </template>
        </Category>



子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
        
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

3.Vuex

3.1 概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

Vue2必须下载Vuex3，下载 npm i vuex@3

3.2 何时使用？

多个组件需要共享数据时

3.3 搭建vuex环境

  1. 创建文件：src/store/index.js

    javascript 复制代码 
    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
​
//准备actions对象------响应组件中用户的动作
const actions = {}
//准备mutations对象------修改state中的数据
const mutations = {}
//准备state对象------保存具体的数据
const state = {}
​
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

  2. 在main.js中创建vm时传入store配置项

    javascript 复制代码 
    ......
//引入store
import store from './store'
......
​
//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store
})

3.4 基本使用

  1. 初始化数据、配置actions、配置mutations，操作文件store.js

    javascript 复制代码 
    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
​
const actions = {
    //响应组件中加的动作
    jia(context,value){
        // console.log('actions中的jia被调用了',miniStore,value)
        context.commit('JIA',value)
    },
}
​
const mutations = {
    //执行加
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value)
        state.sum += value
    }
}
​
//初始化数据
const state = {
   sum:0
}
​
//注意要创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

  2. 组件中读取vuex中的数据：$store.state.sum

3.5 getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。虽然计算属性也可以实现，但是这种方法可以多个组件进行调用。

  2. 在store.js中追加getters配置

  3. 组件中读取数据：$store.getters.bigSum

代码演示：

javascript 复制代码 
......

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

3.6 四个map方法的使用

3.6.1 mapState方法

用于帮助我们映射state中的数据为计算属性，本来要在模版 {{ $store.state.subject }}，写成计算属性只需 {{ subject }}， 看起来更简洁

javascript 复制代码 
computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

注意事项：

问题：为什么mapState前面需要用到（...）扩展运算符

原因：

mapState 返回一个对象：
mapState({sum:'sum',school:'school',subject:'subject'}) 会返回一个对象，这个对象的键是 sum、school 和 subject，值是从 Vuex store 中对应的状态。加上扩展运算符可以将对象的键和值加到computed身上。。

3.6.2 mapGetters方法

用于帮助我们映射getters中的数据为计算属性，本来要在模版 {{ $store.getters.bigSum }}，写成计算属性只需 {{ bigSum }}， 看起来更简洁

javascript 复制代码 
computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

3.6.3 mapActions方法

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

javascript 复制代码 
methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

本来需要这样写

javascript 复制代码 
incrementOdd(){
    this.$store.dispatch('odd',this.n)
},

简化后

javascript 复制代码 
...mapActions({incrementOdd : 'odd'}),

注意事项：

有参数必须在调用的时候传，不然收到的会是一个事件对象。。

3.6.4 mapMutations方法

用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

javascript 复制代码 
methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

**注意事项：**mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

3.7 模块化+命名空间

1.目的：让代码更好维护，让多种数据分类更加明确。

2.修改：store.js

javascript 复制代码 
const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

3.开启命名空间后，组件中读取state数据：

javascript 复制代码 
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

4.开启命名空间后，组件中读取getters数据：

javascript 复制代码 
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

5.开启命名空间后，组件中调用dispatch

javascript 复制代码 
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6.开启命名空间后，组件中调用commit

javascript 复制代码 
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

注意事项：

引入模块化之后，模版要改进成下面

$store.state.sum

$store.state.countAbout.sum

4.路由

理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

前端路由：key是路径，value是组件。

1.基本使用

  1. 安装vue-router，命令：npm i vue-router@3

  2. 引入VueRouter并且应用插件：Vue.use(VueRouter)

  3. 编写router配置项:

    javascript 复制代码 
    //引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
​
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})
​
//暴露router
export default router

  4. 实现切换（active-class可配置高亮样式）

    html 复制代码 
    <router-link active-class="active" to="/about">About</router-link>

  5. 指定展示位置

    html 复制代码 
    <router-view></router-view>

2.几个注意点

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

  2. 通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。

  4. 整个应用只有一个router，可以通过组件的$router属性获取到。

3.多级路由（多级路由）

1.配置路由规则，使用children配置项：

javascript 复制代码 
routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

2.跳转（要写完整路径）：

html 复制代码 
<router-link to="/home/news">News</router-link>

注意事项：二级路由开始的路径，最好不要用 /

4.路由的query参数

html 复制代码 
$route.query.id
$route.query.title

1.传递参数

html 复制代码 
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

2.接收参数：

html 复制代码 
$route.query.id
$route.query.title

5.命名路由

1.作用：可以简化路由的跳转。

2.如何使用

  • 给路由命名：
    *

    javascript 复制代码 
    {
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

  • 简化跳转：
    *

    javascript 复制代码 
    <!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

6.路由的params参数

params携带参数也就是Restful风格的写法

1.配置路由，声明接收params参数

javascript 复制代码 
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

2.传递参数：

javascript 复制代码 
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

特别注意：

  • 路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
  • params配置的参数，需要在路由器中占位

3.接收参数：

javascript 复制代码 
$route.params.id
$route.params.title

7.路由的props配置

作用：让路由组件更方便的收到参数

javascript 复制代码 
{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

三种写法：

  • 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
  • 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail
  • 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件

注意事项：

1.第一种写法传的数据都是死数据，所以基本不使用

2.第二种写法只适合传 params参数，不能传 query参数

3.第三种写法是一个回调函数，路由器会调用该方法，并且传该组件的 $route 作为参数

8.<router-link>的replace属性

1.作用：控制路由跳转时操作浏览器历史记录的模式(也就是后退和前进) ，可以实现无痕浏览

2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。

3.如何开启replace模式：<router-link replace .......>News</router-link>

注意事项：replace的完整写法是 :replace="true"

原理：

9.编程式路由导航

1.作用：不借助<router-link>实现路由跳转（to），让路由跳转更加灵活

2.具体编码：

javascript 复制代码 
//$router的两个API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})


this.$router.forward() //页面前进
this.$router.back() //页面后退
this.$router.go(params) //params为2表示前进2步，-2表示后退两步

10.缓存路由组件

1.作用：切换不同的路由，默认之前的路由是会被销毁的。为了让路由组件保持挂载，不被销毁，以下做法可以实现。

2.具体编码：

html 复制代码 
// include值是组件名，如果没有配置include就默认缓存所有组件
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

3.使用场景

例如在input框输入了一些信息，然后要切到另外一个组件，回来发现之前输入的信息不见了，是因为组件在切换时就会被销毁，此时就可以设置该组件处于活跃状态就不会被销毁。

4.如果想缓存多个路由

html 复制代码 
<keep-alive :include="['News'，'Xxx']">

11.两个新的生命周期钩子

  1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

  2. 具体名字：

    1. activated路由组件被激活时触发。

    2. deactivated路由组件失活时触发。

  • activated ：当一个 keep-alive 组件被激活时触发。这个钩子在组件从缓存中恢复时调用，通常用于恢复组件的状态或执行一些需要在组件激活时进行的操作。
  • deactivated ：当一个 keep-alive 组件失活时触发。这个钩子在组件被缓存时调用，通常用于清理组件的状态或执行一些需要在组件失活时进行的操作。

注意事项：】

拥有这两个生命周期的条件？

该路由组件被keep-alive修饰。

12.路由守卫

  1. 作用：对路由进行权限控制

  2. 分类：全局守卫、独享守卫、组件内守卫

  3. 全局守卫:

    javascript 复制代码 
    //全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

// 向外暴露配置好的路由器
export default router

  4. 独享守卫: 只有beforeEnter。在配置路由里面写

    javascript 复制代码 
    beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

  5. 组件内守卫：

    javascript 复制代码 
    //进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

13.路由器的两种工作模式

  1. 对于一个url来说，什么是hash值？------ #及其后面的内容就是hash值。

  2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

  3. hash模式：

    1. 地址中永远带着#号，不美观 。

    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

    3. 兼容性较好。

  4. history模式：

    1. 地址干净，美观 。

    2. 兼容性和hash模式相比略差。

    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

5.ElementUi组件库的使用

ElementUi官网： https://element.eleme.cn/#/zh-CN/component/quickstart

1.首先安装element-ui插件库

javascript 复制代码 
npm i element-ui -S

2.引入 Element

2.1 一般引入

在 main.js 中写入以下内容：

javascript 复制代码 
import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

注意事项：上面这种引入方式比较暴力，直接把全部的CSS和组件都引入，会导致所占的空间比较大。

改进方法就是按需引入

2.2 按需引入

1.首先，安装 babel-plugin-component：

javascript 复制代码 
npm install babel-plugin-component -D

2.然后，将 .babel.config.js 修改为：

javascript 复制代码 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

使用以下组件

main.js引入部分组件，不需要引入CSS，因为自动会引入所需的部分

javascript 复制代码 
import { DatePicker, Dropdown, DropdownMenu, DropdownItem } from 'element-ui';

Vue.component(DatePicker.name, DatePicker);
Vue.component(Dropdown.name, Dropdown);
Vue.component(DropdownMenu.name, DropdownMenu);
Vue.component(DropdownItem.name, DropdownItem);
相关推荐
PleaSure乐事18 分钟前
Ant-Dseign-Pro如何去国际化及删除oneapi.json后出现程序直接结束问题的解决方案
前端·javascript·react.js·前端框架·json·oneapi·antdesignpro
QQ_77813297420 分钟前
关于深度学习方向学习的一些建议
人工智能·深度学习·学习
哦哦～92138 分钟前
Fluent和深度学习算法驱动的流体力学计算与应用
人工智能·深度学习·学习·算法
霍格沃兹测试开发学社测试人社区42 分钟前
软件测试学习笔记丨SeleniumPO模式
软件测试·笔记·测试开发·学习
奶糖 肥晨1 小时前
vue的路由的两种模式 hash与history 详细讲解
前端·vue.js·哈希算法
奶糖 肥晨1 小时前
react基础之reactHooks
前端·javascript·react.js
放逐者-保持本心，方可放逐1 小时前
vue3-ref 和 reactive
前端·javascript·vue.js
linly12191 小时前
R学习笔记-单因素重复测量方差分析
笔记·学习
码农白衣1 小时前
后端Java学习：springboot之文件上传(阿里云OSS存储)
spring boot·学习·阿里云
热门推荐
01Windows10安装PCL1.14.0及点云配准02制冷毛细管的计算方法介绍03【经验分享】Ubuntu22.04安装微信(linux官方版)04ECharts 地图实战分析：实现一个完整的地图下钻功能05前端vue3实现本地及在线文件预览（含pdf/txt/mp3/mp4/docx/xlsx/pptx）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07红米手机使用google play08【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总09RAG 实践- Ollama+RagFlow 部署本地知识库10浏览器无法连接网络问题