vue项目的配置文件说明

1、main.js

是js主程序入口，项目中所有的页面都会加载main.js,所以main.js,主要有三个作用：
1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload
3.存储全局变量。

import Vue from 'vue'
import App from './App.vue'
//三级联动组件--全局组件
import TypeNav from '@/components/TypeNav';
//第一个参数:全局组件名字,第二个参数：哪一个组件 
Vue.component(TypeNav.name,TypeNav);
//引入路由
import router from '@/router';
//引入仓库
import store from '@/store';
//测试

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //注册路由：底下的写法KV一致省略V【router小写】
  router,
  //注册仓库：组件实例的身上会多一个属性$store属性
  store

}).$mount('#app')

2、App.vue

为根组件，写在此配置文件下的组件会一直作为"模板"全局展示

使用组件的步骤（非路由组件）
1、创建或者定义组件（组件（路由/非路由）都由三部分组成，结构template，样式css，图片资源script）
（位置在：components文件夹下的组件Header，Footer下各有一个index.vue）
2、引入组件（Header，Footer）
3、注册组件（写在app.vue的components里）
4、使用组件（用标签使用）

• 以下为引入，注册，使用组件。

<template>
  <div>
  //使用组件
    <Header></Header>
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
    <!-- 第一种写法：在home，search显示的，在登陆、注册隐藏 -->
    <!-- <Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer> -->
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
//引入组件
import Header from './components/Header';
import Footer from './components/Footer'
//注册组件
export default {
  name: 'App',
  components: {
    Header,
    Footer
  }
}
</script>

<style>
</style>

3、vueconfig.js

放一些常见的配置代理，对外暴漏module.exports对象

module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint（为了关闭eslint校验工具：声明变量但没有使用）
  lintOnSave:false,
  //代理跨域
  devServer:{
     proxy: {
        "/api": {
         target: "http://gmall-h5-api.atguigu.cn",
        //  pathRewrite: {"^/api" : ""}
            },
         },
     },
})

4、package.json

主要存放一些依赖dependencies（一般成功安装包后会出现该文件版本号）

5、package-lock.json

npm5以后package-lock.json文件锁定所有模块的版本号，包括主模块和所有依赖子模块。当你执行npm
install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新
因此，正因为有了package-lock.json文件锁定版本号，所以当你执行npm install的时候，node不会自动更新package.json文件中的模块，必须用npm install packagename@x.x.x（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。

6、babel.config.js

Babel是一个JS编译器，主要作用是将ECMAScript 2015+ 版本的代码，转换为向后兼容的JS语法，以便能够运行在当前和旧版本的浏览器或其他环境中。Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel插件，将ES6转换为ES5。
Vue3.0项目根目录中存在babel.config.js文件，即为Babel的配置文件，作用于整个项目。具体用法暂时不多赘述，详情请参考Babel中文文档：https://www.babeljs.cn

7、jsconfig.json

jsconfig.json目录中存在文件表明该目录是 JavaScript 项目的根目录。该jsconfig.json文件指定了JavaScript 语言服务提供的功能的根文件和选项。

8、src文件夹

• 简写，配置别名的方法：（即全局用@代表src文件夹，这样将来文件过多，找的时候方便）
  在根目录下创建jsconfig.json文件（2022.6.12目前vue-cli已自动创建该文件并自动配置该项）

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

什么是vue前端路由

根据路由表里配置的URL路径展示其对应的路由组件

• 由n组key-value键值对组成，key：URL（地址栏中的路径），value：相应的路由组件
• 在路由表里配置

怎么划分路由组件与非路由组件

• 是否需要内容经常改变状态展示/不展示：一般来说，页面中经常变化的部分划为路由组件，常年不动的为非路由组件。

• 所在位置不同：
  -路由组件：放在pages/views文件夹下各组件的index.vue中。
  -非路由组件/共用全局组件：放在components文件夹下各组件下的index.vue中

• 使用形式不同：
  -路由组件使用：一般需要在router文件夹中进行注册（使用的即为组件名字）
  -非路由组件使用：一般以标签的形式使用

• 注册完路由，不管是路由组件还是非路由组件，身上都有&route/&router属性
  &route：一般获取路由信息【路径，query，params等等】
  &router：一般编程式导航进行路由跳转【push/replace（可以记住历史记录）】

怎么配置/搭建路由组件vue-router，有哪些属性

配置路由：配置路由一般在router文件夹下的index.js文件中；

怎么使用vue-router（在哪引入，在哪注册）

配置路由步骤
1、引入vue包，vueRouter包
2、使用插件Vue.use(VueRouter)
3、引入路由组件
4、配置路由出口，入口文件里全局注册路由信息

-配置路由分两块
1、路由出口在哪？（根组件app.vue里）

<template>
  <div>
  //使用组件
    <Header></Header>
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
  </div>
  </template>

2、入口文件里全局注册(main.js里)

//引入路由
import router from '@/router';
new Vue({
  render: h => h(App),
  //注册路由：底下的写法KV一致省略V【router小写】
  **//注册路由信息：当这里书写router的时候，组件身上都拥有&route，&router属性**
  router,
  //注册仓库：组件实例的身上会多一个属性$store属性
  store

}).$mount('#app')

• 引入，使用插件，引入路由组件见下（router下index.js里）

//配置路由的地方（Router下index.js）
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
//配置路由
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:"/home",
            component:Home,
            meta:{show:true}
        },
        {
            //路由传参第一种方式，字符串传递就需要在路由这里写占位keyword
            path:"/search",
            component:Search,
            meta:{show:true},
            name:"search"
        },
        {
            path:"/login",
            component:Login,
            meta:{show:false}
        },
        {
            path:"/register",
            component:Register,
            meta:{show:false}
        },
        //重定向，在项目跑起来的时候，访问/立马让它定向到首页
        {
            path:'*',
            redirect:'/home'
        }
    ]
})

路由跳转的几种方式

• 声明式导航router-link，可以进行路由的跳转
• 编程式导航push/replace

区别：

• 编程式导航：声明式导航能做的，编程式导航都能做；
• 但编程式导航不仅可以路由跳转，还能做一些其他业务逻辑

promise是什么

promise中async和await分别是什么作用