尚硅谷尚品汇学习笔记011.初始化 1.脚手架的使用前置：node+webpack+淘宝镜像创建项目 vue cre

1.初始化

1.脚手架的使用

前置：node+webpack+淘宝镜像
创建项目 vue create 项目名字
脚手架目录解析脚手架目录:public + assets文件夹区别 node_modules:放置项目依赖的地方 public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面%%比如：图片%% src：程序员源代码文件夹 -----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面） -----components文件夹:一般放置非路由组件（或者项目共用的组件） -----pages|views文件夹:一般放置路由组件 App.vue 唯一的根组件 main.js 入口文件【程序最先执行的文件】 babel.config.js:babel配置文件 package.json：看到项目描述、项目依赖、项目运行指令 package-lock.json:缓存性文件%%曾经的文件从哪里下的%% README.md:项目说明文件

2.脚手架配置更改

浏览器自动打开在package.json文件中

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

关闭eslint校验工具创建vue.config.js文件：需要对外暴露

module.exports = {
   lintOnSave:false,
}

src文件夹的别名的设置因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些根目录下创建jsconfig.json文件

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    %%@不能在以下两个地方使用%%
    "exclude": [
        "node_modules",
        "dist"
    ]
}

4:项目上传GIT 微信小程序实战课的时候，会带着大家玩耍的注意:前面基础课程当中，创建分支、处理冲突等等 gitee.com/jch1011/sha…

3.本项目路由分析

vue-router 路由分为Key,Value

node平台（并非语言）对于后台而言:K即为URL地址 V即为相应的中间件 http://localhost:8080/0607

app.get("/0607",(res,req)=>{
   res.send('我是祖国的老花骨朵');
});

前端路由: K即为URL（网络资源定位符） V即为相应的路由组件
本项目路由分析确定项目结构顺序:上中下 -----只有中间部分的V在发生变化，中间部分应该使用的是路由组件 2个非路由组件、四个路由组件

两个非路由组件：Header 【首页，搜索页，登录页】、Footer【首页，搜索页】
路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）

4.非路由组件

创建非路由组件（2个：Header、Footer）

步骤：定义、引入、注册、使用
搭建：组件结构+组件样式+图片资源 %%非路由组件的结构的搭建：前台项目的结构与样式不需要自己写的，老师准备好了辉洪老师静态页面：结构 + 样式 +图片资源%%
how to 开发？
1. 静态页面
2. 拆分组件
3. 获取服务器的数据动态展示
4. 完成相应的动态业务逻辑
【less】浏览器不识别less样式，需要通过less，less-loader进行处理，把less转化为css
1. npm install --save less less-loader@5 安装5版本
2. style 标签 lang <style lang="less"></style>

5.路由组件的搭建

安装路由 `cnpm install --save vue-router@3

--save:可以让你安装的依赖，在package.json文件当中进行记录
创建路由组件【一般放在views|pages文件夹】
配置路由，配置完四个路由组件

配置路由
1. src/router/index.js
2. 在main.js引入并注册：import router from "@/router"
```
new Vue({
  render: h => h(App),
  // 注册路由(key,value一致，省略value，router小写)
  // 注册路由信息：这里注册后，组件上都拥有$route,$router属性
  router
}).$mount('#app')
```
1. 注册完成后，组件都拥有 $route,$ router属性 $route:一般获取路由信息：path，query，params $router：一般进行编程式导航，进行路由跳转：push,replace
2. 路由出口：在app.vue中 <router-view></router-view>
3. 重定向

        // 重定向:项目跑起来后，访问“/”,立马定向到首页
        {
            path: "*",
            // redirect:路径
            redirect: "/Home",
        }

路由的跳转两种形式：
1. 声明式导航（router-link：务必要有to属性） %%登录、免费注册、尚硅谷logo图标转到home%%
  - router 本质 a标签
2. 编程式导航：组件实例的$router.push||replace %%编程式导航更好用：因为可以书写自己的业务逻辑%% %%goSearch%%
路由传参
1. 两种传参方式： [[vue_router 路由#4.路由的query参数]] [[vue_router 路由#6.路由的params参数]]
- params参数：属于URL路径当中一部分，配置路由时需要占位
- query参数：不需要占位；写法类似于ajax当中queryStrinf /Home?k=v&kv=123
1. 写法：字符串、模板字符串、对象（推荐）注意：使用params对象形式传参，一定要有name属性%%不能用path%%
2. 路由传递参数先关面试题
  1. 路由传递参数（对象写法）path是否可以结合params参数一起使用? 不可以：params不能这样书写，程序会崩掉。一定要用name
  2. 如何指定params参数可传可不传 path:"/search/:keyword?" 加个问号
  3. params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
    - 如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题
    - 使用undefined,不传递或者空串就是undefined params: { keyword: this.keyword || undefined },
  4. 路由组件能不能传递props数据? [[vue_router 路由#7.路由的props配置]]
    1. 可以。三种：对象，Boolean，函数

6.路由组件与非路由组件区别

	路由组件	非路由组件
文件夹	pages.views	components
使用	要在router文件夹中注册，使用router-view展示	以标签形式使用

7.Footer组件的显示与隐藏(按需加载)

在home，search中显示，在register、login隐藏

方法一：v-show+$route %%不利于后续添加、大批量设置%%

 <Footer v-show="$route.path == '/Home' || $route.path == '/Search'" ></Footer>

方法二：路由元信息meta

<Footer v-show="$route.meta.show"></Footer>

面试题：v-show与v-if区别? v-show:通过样式display控制 v-if：通过元素上树与下树进行操作（更加消耗性能）
面试题:开发项目的时候，优化手段有哪些? 按需加载

问题

安装less时报错 blog.csdn.net/m0_55960697… 原因：npm 版本过高解决方案：后面加上--legacy-peer-deps 安装：npm install save less less-loader@5 --legacy-peer-deps
样式加载不出来 (3条消息) Refused to apply style from ‘http://localhost:8080/iconfont.css‘ because its MIME type (‘text/html‘)_redy_的博客-CSDN博客
export default { name: "Header",}; name的值一定要加双引号
奇奇怪怪其他问题：
1. 是不是不小心引入、乱写了什么
2. 没保存
编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误? 注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。这种异常，对于程序没有任何影响的。为什么会出现这种现象: 由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象,
- 第一种解决方案：是给push函数，传入相应的成功的回调与失败的回调%%第一种解决方案可以暂时解决当前问题，但是以后再用push|replace还是会出现类似现象，因此我们需要从‘根’治病%%
- 治本：重写vueRouter.prototype.push()%% $router是vueRouter类的一个实例，push是vueRouter的原型上的一个方法==>push的this是此实例的上下文对象%%

how to do?

创建项目，脚手架配置更改
下载相应的包，vue-router@3,vuex@3,less,less-loader@5
分析路由
创建非路由组件：静态、拆分、获取服务器的数据动态展示、完成相应的动态业务逻辑
使用组件：定义、引入、注册、使用
清楚默认样式:
1. public文件下,reset.css清楚默认的样式,在index.html里面引入 <link rel="stylesheet" href="<%= BASE_URL %>reset.css" />
路由组件放在pages中。配置重定向，默认进入首页
Footer的显示与隐藏：路由元$route.meta.show+v-show
声明式路由导航做简单跳转。编程式路由导航做复杂跳转%%"搜索"按钮按下，路由传参给search组件并跳转到search%%