day01

day01
1.vue-cli脚手架初始化项目
node+webpack+淘宝镜像
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. 报错
全局淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
npm下载缓慢：npm config set registry https://registry.npm.taobao.org 配置淘宝镜像
vscode配置gitee：教程
1.生成ssh公钥：
ssh-keygen -t rsa -C “xxxxxxxxx@qq.com”

所有提示点击回车

cat ~/.ssh/id_rsa.pub

复制显示的公钥

2.打开gitee的添加公钥
3.第一次同步代码
在vscode的终端中输入，会自动要求账号密码
git remote add origin https://gitee.com/mc_gao/zhang-vue.git
在执行如下命令，将修改的代码推送到码云仓库。
git push -u origin master
4.之后修改代码

文件信息：
node_modules： 项目依赖文件夹
public：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，
webpack进行打包的时候会原封不动的打包到dist文件夹。
src(程序猿源代码文件夹)：
assets：一般放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在assets文件夹中的资源，
在webpack打包的时候，webpack会把静态资源当成一个模块，打包到js文件里面。
components：一般放置非路由组件（全局组件）
App.vue：唯一的根组件，vue中的组件（.vue）
main.js：程序的入口文件，整个程序当中最先运行的文件
bable.config.js：配置文件（bable相关）兼容
package.json：记录项目的信息（项目的身份证）
package-lock.json：缓存性的文件
README.md：说明性的文件（使用说明书）
2.项目的其他配置
2.1 项目运行起来的时候，让浏览器自动打开
package.json–>scripts–> “serve”: “vue-cli-service serve --open”
“scripts”: {
“serve”: “vue-cli-service serve --open”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},
2.2 eslint校验功能的关闭
在根目录下，创建vue.config.js文件（默认文件已存在）
module.exports = defineConfig({
transpileDependencies: true ,
// 关闭eslint
lintOnSave:false
})
2.3src文件夹简写方法，配置别名 @
jsconfig.json配置别名@提示：
遇到@符号等价于src
{
“compilerOptions”: {
“target”: “es5”,
“module”: “esnext”,
“baseUrl”: “./”,
“moduleResolution”: “node”,
“paths”: {
“@/": [
"src/”
]
}
3.项目路由的分析
前端所谓路由：kv键值对
key：URL（地址栏路径）
value：相应的路由组件
注意：项目上中下结构

路由组件：
Home首页路由组件，search路由组件，login登录组件，register注册组件
非路由组件：
Header非路由组件【首页，搜索页】
Footer非路由组件【首页，搜索页，登录注册页面不显示】

4.完成非路由组件Header与Footer业务
在项目当中，不以HTML，CSS为主，主要搞业务，逻辑
在开发项目的时候：
1.书写静态页面（HTML+CSS）
2.拆分组件
3.获取服务器的数据动态显示
4.完成相应的动态业务逻辑

注意1：创建组件的时候，组件结构+组建的样式+图片资源
注意2：项目采用的less样式，浏览器不识别less样式，需要通过les、les-loader进行处理less，
把less样式变为css样式，浏览器才能识别。
安装依赖：
cnpm install --save less less-loader@5
安装版本5，防止冲突。
运行如果报错，降低webpack版本到webpack@4.46.0
注意3：让组件识别less样式，需要在style标签身上加上lang=less
4.1使用组件的步骤（非路由组件）：
–创建或者定义
–引入
–注册
–使用

App.vue中引入（components注册）

把reset.css引入public，在index.html中编写

<link rel="stylesheet" href="<%= BASE_URL %>reset.css">

使用

5.路由组件的搭建
需要安装vue-router npm install --save vue-router
感谢弹幕 npm install --save vue-router@3 4版本不在支持vue2
“vue-router”: “^3.5.3”,
路由组件应该有四个，home，search，login，register
-components：经常放置非路由文件（共用全局组件）
-pages | views :放置路由组件
//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
},
{
path: “/search”,
component: Search
},
{
path: “/login”,
component: Login
}, {
path: “/register”,
component: Register
},
// 重定向，项目跑起来，访问/，立马重定向到首页
{
path: “*”,
redirect: “/home”
}]
})

5.1配置路由
项目的配置的路由一般放置在router文件夹中
//main.js
import Vue from ‘vue’
import App from ‘./App.vue’
Vue.config.productionTip = false

// 引入路由
import router from ‘@/router’
new Vue({
render: h => h(App),
// 注册路口，kv一致，省略v
// 注册路由信息，书写router是，组件身上拥有$route,$router属性
router
}).$mount(‘#app’)

5.2总结
路由组件和非路由组件的区别？
1.路由组件一般放置在pages | views文件夹中，非路由组件一般放置在components文件夹中
2.路由组件一般需要在router文件夹中进行注册（使用时组件的名字），非路由组件使用时，一般以标签的形式使用
3.注册完路由，无论路由组件、非路由组件都有$route、$router属性
$route:一般获取路由信息【路径、query、params等】
$router：一般进行编程式导航进行路由跳转【push | replace】
5.3路由的跳转
两种形式：
声明式导航 router-link，进行路由跳转
编程式导航 push | replace 进行路由跳转

声明式导航必须要有to属性

编程式导航：声明式导航能做的，编程式都能做。有其他功能
6.Footer组件的显示与隐藏
显示隐藏组件：v-if | v-show
Footer组件：在Home、Search组件中显示，登录、注册页面不显示
6.1根据组件身上的$route获取当前路由的显示与隐藏

6.2在配置路由的时候，可以给路由添加元信息[meta]，路由需要配置对象，他的key不能瞎写。 index.js // 配置路由 export default new VueRouter({ // 配置路由 routes: [{ path: "/home", component: Home, meta:{show:true} }, { path: "/search", component: Search, meta:{show:true} }, { path: "/login", component: Login, meta:{show:false} }, { path: "/register", component: Register, meta:{show:false} },

7.路由传参
7.1路由传参的方式：
比如：A—>B
声明式导航：route-link（务必to属性）可以实现路由的跳转
编程式导航：采用$route.push | replace方法（可以书写一些自己的业务）
7.2路由传参的集中方法：
params参数：属于路由当中的一部分，注意：在配置的时候，需要占位
query参数：不属于路由的一部分，类似ajax的quseryString /home？k=v&kv，不需要占位
占位： path: “/search/:keyword”,
//返回值
return {
keyword:‘’
}
//添加v-model

//更改路径
{
path: “/search/:keyword”,
component: Search,
meta:{show:true},
},
//search中的index.vue

搜索

params参数{{$route.params.keyword}}

query参数{{$route.query.k}}

//路由跳转 //显示结果 http://localhost:8080/?#/search/abc?k=ABC 搜索框：1a2b params参数1a2b query参数1A2B //注意 方法三需要name参数 { path: "/search/:keyword", component: Search, meta:{show:true}, name:"search" },

8.路由传参相关面试题
1:路由传递参数（对象写法）path是否可以结合params参数一起使用?
不可以：不能这样书写，程序会崩掉
2:如何指定params参数可传可不传?
3:params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
4: 路由组件能不能传递props数据?
答案：
1.不可以
this.$router.push(path:"/search",params:keyword:this.keyword,query:k:this.keyword.toUpperCase());路由跳转传参的时候，对象的写法可以是name，path的形式，注意：path写法不能与params参数一起使用2.this.$router.push({name:“search”,query:{k:this.keyword.toUpperCase()}});
配置路由的时候，占位（params参数），但是路由跳转的时候就不传参，路径会出现问题
localhost:8080/#/?k=QWE
解决办法：加?【可传递可不传递】
{
path: “/search/:keyword?”,
component: Search,
meta:{show:true},
},
3. 如果指定name与params配置, 但params中数据是一个"“, 无法跳转，路径会出问题
this.KaTeX parse error: Expected 'EOF', got '#' at position 108: …localhost:8080/#̲/?k=QWE 解决办法：使用…router.push({name:“search”,params:{keyword:”"||undefined},query:{k:this.keyword.toUpperCase()}});
4.可以
export default new VueRouter({
// 配置路由
routes: [{
path: “/home”,
component: Home,
meta:{show:true}
},
{
path: “/search/:keyword”,
component: Search,
meta:{show:true},
name:“search”,
//4: 路由组件能不能传递props数据?
//布尔值写法:只能传递params参数
//props:true,
//对象写法：额外的给路由组件传递一些props
//props:{a:1,b:2}
//函数写法:可以params参数、query参数，通过props传递给路由组件
// props:(KaTeX parse error: Expected '}', got 'EOF' at end of input: …eturn {keyword:route.params,keyword,k:KaTeX parse error: Expected 'EOF', got '}' at position 14: route.query.k}̲ // } /…route)=>({keyword:$route.params,keyword,k:$route.query.k})

index.vue

搜索

params参数{{$route.params.keyword}}==={{keyword}}

query参数{{$route.query.k}}==={{k}}