Vue项目流程1，vue-cli脚手架初始化项目，项目的其他配置，路由组件的搭建，TheFooter组件显示与隐藏，路由传参相关面试题，重写push与replace方法，以及相关我遇到的问题及解决办法

Vue项目流程

1、vue-cli脚手架初始化项目

需要的下载安装：node+webpack+淘宝镜像

各文件夹介绍

• node_modules文件夹：项目依赖文件夹。
• public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件 夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中。
• src文件夹（程序员源代码文件夹）：
  • assets文件夹：一般也是放置的静态资源（一般放置多个组件共用的静态资源），需要注意，放置在assets文件夹里面的静态资源，在webpack打包的时候，webpack会把静态资源当作一个模块打包到JS文件里面。
  • components文件夹：一般是放置的非路由组件（全局组件）
  • App.vue：唯一的根组件，Vue当中的组件（.vue）
  • main.js：程序入口文件，也是整个程序当中最先执行的文件。
• babel.config.js：配置文件（babel相关）
• package.json文件：认为项目的身份证，记录项目需要的依赖等等
• pack-lock.json：缓存性文件
• READNE.md：说明性文件

2、项目的其他配置

1、项目运行起来的时候，让浏览器自动打开。
找到package.json文件，找到"scripts"进行如下修改：

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

如果开了在0.0.0.0:8080打开就不使用这个方法，选择在终端打开

我遇到的问题：Parsing error: No Babel config file detected for D:\web项目\big_project\project_store\app\vue.config.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint
解决：找到 package.json文件，添加以下代码：
“parserOptions”: {
“parser”: “@babel/eslint-parser”,
“requireConfigFile”:false
},

2、eslint校验功能关闭。

例如声明一个变量未使用会报错等问题，如果不想报错可以关闭，如果可以接受，也可以选择不关闭。
在根目录下，创建一个vue.config.js文件，添加以下代码：

module.exports = defineConfig({
    //关闭eslint
  lintOnSave:false
})

3、src文件夹简写方法，配置别名。@代表的是src文件夹，这样将来文件过多，找的时候方便很多。

  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "exclude":[
      "node_modules",
      "dist"
    ],

如果已经配置好了就不用配置了

3、项目路由的分析

结构：上中下
路由组件：
TheHome首页路由组件，TheSearch路由组件，TheLogin路由组件、TheRegister
非路由组件：
TheHeader【首页、搜索页、登录、注册】
TheFooter【首页、搜索页】

完成非路由组件

1、书写静态页面（HTML+CSS）
2、拆分组件
3、获取服务器的数据动态展示
4、完成相应的动态业务逻辑

注意1：创建组件的时候，组件的结构+样式+图片资源
注意2：项目如果采用的less样式，浏览器不识别less样式，需要通过less、less-loader【安装五版本】进行处理less，把less样式变为css样式，浏览器才可以识别。
npm install less less-loader --save-dev
注意3：如果想要组件识别less样式，需要在style标签加上lang=“less”。
注意4：引入清除默认样式，将默认样式文件放在public文件夹内，在index.html里引入。
<link rel="stylesheet" href="<%= BASE_URL %>reset.css">

遇到的问题：Refused to apply style from ‘http://localhost:8081/iconfont.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
解决：删掉reset.css中的@import"./iconfont.css";

路由组件的搭建

组件：TheHome、TheSearch、TheLogin、TheRegister
安装版本3vue-router:cnpm install --save vue-router@3

注意：vue2安装3版本的vue-router

路由组件：一般放在pages|views文件夹。

配置路由：项目中配置的路由一般放在router文件夹中。

总结：
路由组件和非路由组件的区别
1.路由组件一般放置在pages|views文件夹，非路由组件一般放置在components文件夹中
2.路由组件一般需要在文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用
3.注册完路由，不管是路由组件，还是非路由组件身上都有$route、$router属性。
$route：一般获取路由信息【路径、query、params等】
$router:一般进行编程式导航进行路由跳转【push|replace】

路由的跳转有两种形式：
1、声名式导航：ruoter-link，进行路由的跳转
2、编程式导航：push|replace

注：声名式导航能做的，编程式导航都能做，但是编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑。

TheFooter组件显示与隐藏

TheFooter:在TheHome、TheSearch显示，但在TheLogin、TheRegister隐藏
方式一：根据组件身上的$route获取当前路由的信息，通过路由路径判断TheFooter显示与隐藏。（不利于多个组件的使用）
方式二：配置路由的时候，可以给路由添加路由元信息【meta】，路由需要的的是配置对象，它的key不能瞎写。

路由传参

路由传参，参数有几种写法？
params参数：属于路径当中的一部分，需要注意，在配置路由的时候需要占位。
query参数：不属于路径当中的一部分，类似于ajax当中的queryString ，不需要占位。

//路由传递参数：第一种字符串形式
            // this.$router.push('/search/'+this.keyword+'?k='+this.keyword.toUpperCase())
            //第二种，模板字符串
            // this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
            //第三种，对象的写法
            this.$router.push({
                name:'search',
                params:{keyword:this.keyword},
                query:{k:this.keyword.toLocaleUpperCase()}
            })

路由传参相关面试题

1、路由传递参数（对象写法）path是否可以结合params参数一起使用？
答：路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是path的这种写法不能与params参数一起使用。
2、如何指定params参数可传可不传？
答：如果路由要求传递params参数，但就不传params，会发现URL会有问题。在配置路由时在占位的后面加一个？，代表params可以传递或不传递。
3、params参数可以传递也可以不传递，但是如果传递的是空串，如何解决？
答：使用undefined解决，params参数可以传递、不传递（空的字符串）例：params:{keyword:'this.keyword' || undefined}
4、路由组件能不能传递props数据？
答：可以。三种写法

//传递props数据
//布尔值的写法:只能传params
// props:true
//对象写法：额外的给路由组件传递一些props
// props:{a:1,b:2}
//函数写法：可以params参数、query参数，通过props传递给路由组件
props:($route)=>{
    return {
        keyword:$route.params.keyword,
        k:$route.query.k
    }  
}
//简写
// props:($route)=>({keyword:$route.params.keyword,k:$route.query.k}) 

重写push与replace方法

编程式路由跳转到当前路由(参数不变)，多次执行会抛出NavigationDuplicated的警告错误?
–路由跳转有两种形式:声明式导航、编程式导航
–声明式导航没有这类问题的,因为vue-router底层已经处理好了
为什么编程式导航进行路由跳转的时候，就有这种警告错误那?"
答：vue-router":“^3.5.3”:最新的vue-router引入promise
通过给push方法传递相应的成功、失败的回调函数,可以捕获到当前错误,可以解决。通过底部的代码,可以实现解决错误

this. $router.push({name:"search",params: (keyword:this.keyword},query:{k:this.keyword.touppercase()}},()=>{},()=>{})

这种写法:治标不治本,将来在别的组件当中push Ireplace，编程式导航还是有类似错误。
解答：
this：当前组件实例（search)
this. $router属性：当前的这个属性，属性值VueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$router|$route属性。
push:VueRouter类的一个实例
重写push和replace即可解决:

//先把VueRouter原型对象的push和replace，先保存一份
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.Replace
//重写push|replace方法
//第一个参数：告诉原来push方法，往哪里跳转（传递哪种参数）
//第一个参数：成功的回调
//第三个参数：失败的回调
VueRouter.prototype.push = function(location,resolve,reject){
    if(resolve && reject){
        //call||apply：相同点：都可以调用函数一次，都可以篡改函数的上下文一次
        //不同点：call与apply传递参数：call传递参数多个参数用逗号隔开，而apply方法执行要传递数组
        originPush.call(this,location,resolve,reject)
    }else{
        originPush.call(this,location,()=>{},()=>{})
    }
}
//第一个参数：告诉原来replace方法，往哪里跳转（传递哪种参数）
VueRouter.prototype.replace = function(location,resolve,reject){
    if(resolve && reject){
        originReplace.call(this,location,resolve,reject)
    }else{
        originReplace.call(this,location,()=>{},()=>{})
    }
}

call与apply：
相同点：都可以调用函数一次，都可以篡改函数的上下文一次
不同点：call与apply传递参数，call多个参数用逗号隔开，而apply方法执行要传递数组

4、TheHome模块组件拆分

1、先把静态页面完成
2、拆分出静态组件
3、获取服务器的数据进行展示
4、动态业务完成

三级联动组件完成

由于三级联动，在TheHome、TheSearch、TheDetail，把三级联动注册全局组件。
好处：只需要注册一次就可以在项目任意地方使用。

完成其余静态组件

HTML+CSS+图片资源 -----【结构、样式、图片资源缺一不可】