vue项目笔记(尚硅谷)

文章目录

  • Vue项目
    • 1. 搭建环境
        • 1.1 准备工作
          • 1.1.1常用dos命令
          • 1.1.2cli脚手架相关问题
        • 1.2 搭建
          • 1.2.1使用vueui搭建
          • 1.2.2在命令行中搭建
          • 1.2.3搭建完成目录结构
    • 2. 项目配置
        • 2.1 一些配置
          • 2.1.1 浏览器自动打开
          • 2.1.2 关闭eslint校验工具
          • 2.1.3 src文件夹的别名的设置
        • 2.2 路由的配置
          • 1.路由的分析
        • 2.3.创建非路由组件
          • 拆分组件
          • 引入注册使用组件
        • 2.4.路由的跳转
          • 1.安装路由组件:
          • 2.创建路由组件
          • 3.配置路由
            • main.js
            • app.vue
          • 4.路由跳转的两种形式
            • 声明式导航
            • 编程式导航
        • 2.5总结:路由非路由组件
        • 2.6.组件的显示与隐藏
          • $route获取路由信息
          • 路由元信息
          • v-show与v-if区别?
        • 2.7.路由传参
          • 字符串形式
            • params参数
            • query参数
            • 两种参数
          • 模板字符串
          • 对象写法
          • 路由传参相关问题
          • 路由传递参数相关面试题
            • 1、path与params
            • 2、params参数可传可不传
            • 3、params空
            • 4、路由组件传递props数据
    • 3.组件拆分
      • 3.1 首页组件拆分(静态)
        • 3.1.1 三级联动拆分
        • 3.1.2 其他拆分

Vue项目

1. 搭建环境

1.1 准备工作

需要先安装node,webpack,cli脚手架

1.1.1常用dos命令
  • cd 打开文件夹
  • md 创建新文件夹
  • dir 查看文件夹内容
  • cd 返回上一级文件夹
1.1.2cli脚手架相关问题

如果要卸掉旧版本脚手架(3以下):npm uninstall -g vue-cli;淘宝镜像安装的cnpm uni vue-cli -g(前面加c)

安装新版本npm install -g @vue/cli

淘宝镜像安装cnpm install -g @vue/cli

查看版本vue --versionvue -V

安装:npm install -g @vue/cli卸载:npm uninstall -g @vue/cli

指定版本安装(3):npm install -g @vue/[email protected]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FmVxXOSD-1645519249982)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220219234100391.png)]

(4):npm install -g @vue/[email protected]

1.2 搭建

1.2.1使用vueui搭建

vue ui

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVZnXTCN-1645519249983)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220219225918588.png)]

启动在http://localhost:8000/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BtWhIhXF-1645519249984)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220219230404609.png)]

1.2.2在命令行中搭建

(CLI 2)

vue init webpack 项目的名字

(CLI 3)在命令行中目标位置

vue create demo(项目名)
1.2.3搭建完成目录结构

node_modules:放置项目依赖

public + assets文件夹区别:
public:一般放置静态资源,打包上线的时候,public文件夹里面资源原封不动打包到dist文件夹里面;
src:程序员源代码文件夹
-assets文件夹:经常放置一些多个组件共用的静态资源(图片),assets文件夹里面资源webpack会进行打包为一个模块(js文件夹里面)
-components文件夹:一般放置非路由组件(或者项目共用的组件)
App.vue: 唯一的根组件
main.js: 入口文件【程序最先执行的文件】
.gitignore:git忽略文件
babel.config.js:babel配置文件
package.json:记录项目描述、项目依赖、项目运行指令等项目信息
package-lock.json:缓存性文件
README.md:项目说明文件

2. 项目配置

2.1 一些配置

2.1.1 浏览器自动打开

(我习惯不改)

在package.json文件中
“scripts”: {
“serve”: “vue-cli-service serve --open”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},

加上–open

启动命令:

npm run serve

输入命令启动后浏览器自动打开

2.1.2 关闭eslint校验工具

(可以关)

在根目录下创建vue.config.js文件:
module.exports = {
lintOnSave:false,
}

2.1.3 src文件夹的别名的设置

(会方便)

因为项目大的时候src(源代码文件夹):里面目录会很多,找文件不方便,设置src文件夹的别名的好处,找文件会方便一些
创建jsconfig.json文件
{
“compilerOptions”: {
“baseUrl”: “./”,
“paths”: {
“@/": [
"src/

]
}
},
“exclude”: [
“node_modules”,
“dist”
]
}

2.2 路由的配置

vue-router
路由分为Key:Value键值对

node平台(并非语言)
对于后台而言:K即为URL地址 V即为相应的中间件
http://localhost:8080/0607
app.get(“/0607”,(res,req)=>{
res.send(‘我是祖国的花朵’);
});

前端路由:
K即为URL(网络资源定位符)
V即为相应的路由组件

1.路由的分析

确定项目结构顺序:上中下 -----只有中间部分的V在发生变化,中间部分应该使用的是路由组件

2个非路由组件|四个路由组件:
两个非路由组件:Header 、Footer
路由组件:Home、Search、Login(没有底部的Footer组件)、Register(没有底部的Footer组件)

2.3.创建非路由组件

(2个:Header、Footer)

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

非路由组件使用步骤:
定义;引入;注册;使用

非路由组件的结构的搭建:

静态页面:
结构 + 样式 + 图片资源

拆分组件

将写好的静态页面引入,拆分组件

方法:在components下建文件夹,将组件相关放入一个文件夹

components文件夹:通常放置非路由组件或共用的全局组件

如Header:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sx0AHHgo-1645519249984)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220183616937.png)]

如果项目采用的less样式,浏览器不识别less语法,需要一些loader进行处理,把less语法转换为CSS语法

1:安装less less-loader@5

命令:

npm install less less-loader@5 --save-dev

切记less-loader安装5版本的,不要安装在最新版本,安装最新版本less-loader会报错,报的错误setOption函数未定义

2:需要在style标签的身上加上lang=“less”(识别less)

引入注册使用组件

在App.vue中引入:import+修改components

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5EV3ehUA-1645519249985)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220185859193.png)]

注册后可以在template中引用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EmE5i8pD-1645519249985)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220185951932.png)]

注:一些样式如reset样式可以放在public中,在index.html中引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zethqSI1-1645519249986)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220190213064.png)]

同理,引入多个组件App.vue:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHsBQTRG-1645519249986)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220191517511.png)]






2.4.路由的跳转

1.安装路由组件:
 cnpm install --save vue-router 

–save:可以让你安装的依赖,在package.json文件当中进行记录

安装指定版本:

cnpm install --save vue-router@3
2.创建路由组件

【一般放在views/pages文件夹

在views/pages文件夹下建文件夹放置组件。

3.配置路由

配置路由一般放在src的router文件夹下(新建)

新建index.js文件,配置路由

引入vue,vue-router:

import Vue  from 'vue';
import VueRouter from 'vue-router'

使用插件:

Vue.use(VueRouter);

引入路由组件:

import Home from '@/views/Home/homeIndex'
import Login from '@/views/Login/loginIndex'

配置路由:

export default new VueRouter({
	routes:[
	{
        path:"/home",
        component:Home
	},
	{
        path:"/login",
        component:Login
	}
	]
})

重定向:开始时跳转到首页

		{
            path:"/",
            component:Home
        },

代码:

// 配置路由
import Vue  from 'vue';
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter);
// 引入路由组件
import Home from '@/views/Home/homeIndex'
import Login from '@/views/Login/loginIndex'
import Register from '@/views/Register/registerIndex'
import Search from '@/views/Search/searchIndex'
// 配置路由
export default new VueRouter({
    routes:[
    	{
            path:"/",
            component:Home
        },
        {
            path:"/home",
            component:Home
        },
        {
            path:"/login",
            component:Login
        },
        {
            path:"/register",
            component:Register
        },
        {
            path:"/search",
            component:Search
        }
    ]
})

之后再在main.js中配置

main.js

引入注册路由:

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router/index'

new Vue({
  render: h => h(App),
  // 注册路由(kv一致且省略v)
  // 这里书写router时,组件身上同时都拥有$route,$routers属性
  router
}).$mount('#app')
app.vue

在app.vue中设置路由出口



[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qvphr1wc-1645519249987)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220195017353.png)]

配置完四个路由组件

4.路由跳转的两种形式

路由的跳转就两种形式:声明式导航(router-link:务必要有to属性)、编程式导航push||replace

声明式导航
登录
编程式导航

点击事件

goSearch(){
      this.$router.push('/search')
}

编程式导航可以传参,可以书写自己的业务逻辑

2.5总结:路由非路由组件

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

2.6.组件的显示与隐藏

登录注册时隐藏Footer组件,其他显示

$route获取路由信息

可以根据组件身上$router获取路由信息,通过路由路径判断

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LSuRqLa3-1645519249987)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220202040948.png)]

路由元信息

定义路由时可以配置meta字段

router/index:

        {
            path:"/login",
            component:Login,
            meta:{show:false}
        },

App.vue:

v-show与v-if区别?

v-show:通过样式display控制
v-if:通过元素上树与下树进行操作
面试题:开发项目的时候,优化手段有哪些?
1:v-show|v-if
2:按需加载

2.7.路由传参

两种方式:声明式,编程式

参数:

params参数:路由需要占位,属于URL当中一部分;
query参数:路由不需要占位,不属于路径当中一部分,写法类似于ajax当中query参数

字符串形式
params参数

会拼在URL中:

在router/index.js中占位

        {
            path:"/search/:key",
            component:Search,
            meta:{show:true}
        }

页面中:

获得key:(v-model=“key”)


data添加key=‘’

data () {
    return {
      key:''
    }
  },

方法中拼上this.key

goSearch(){
      this.$router.push('/search/'+this.key)
}

在输入框输入字符串后:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGMRie0L-1645519249987)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220222342178.png)]

query参数

不需要占位

goSearch(){
  this.$router.push("/search/" +"?k="+ this.key.toUpperCase())
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gr3bWxw0-1645519249988)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220223552916.png)]

两种参数

方法:

goSearch(){
      this.$router.push("/search/" +this.key+"?k="+ this.key.toUpperCase())
}

data

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q4Uk8ASb-1645519249988)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220224245916.png)]

在search组件中设置显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r0tvFNyx-1645519249988)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220224500797.png)]

显示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MLF4QZ8n-1645519249989)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220224547145.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsMQZsR0-1645519249989)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220224341182.png)]

模板字符串
goSearch(){
      this.$router.push(`/search/${this.key}?k=${this.key.toUpperCase()}`)
}

效果同上

对象写法

router/index.js中需要有name:

{
    path:"/search/:key",
    component:Search,
    meta:{show:true},
    name:"search"
}

方法:

this.$router.push({name:"search",params:{key:this.key},query:{k:this.key.toUpperCase()}})

可以成功[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-88qQ7dA5-1645519249990)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220225527086.png)]

路由传参相关问题

1、编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?
注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。
这种异常,对于程序没有任何影响的。
为什么会出现这种现象:
由于vue-router最新版本3.5.2,引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象,
①第一种解决方案:是给push函数,传入相应的成功的回调与失败的回调给promise

function push(){
	return new Promise((resolve,reject) => {
	
	})
}

例子:增加成功与失败回调

this.$router.push({name:"search",params:{key:this.key},query:{k:this.key.toUpperCase()}},()=>{},(error)=>{console.log(error)})

这种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从‘根’治病;

②push方法是VueRouter的原型对象一个实例

VueRouter.prototype.push = function(){
//原型对象的方法
}
let $router = new VueRouter();
$router = new VueRouter();
$router.push();

this.$router.push();

要解决问题:重写push|replace方法(router/index.js)

重写push方法:

第一个参数:告诉原来push方法传递哪些参数;第二个:成功回调;第三个:失败回调

//先保存原方法
let originPush = VueRouter.prototype.push;
//重写
VueRouter.prototype.push = function(location,resolve,reject){
	if(resolve && reject){
		//call|apply
		//相同点:都可以调用函数一次,都可以篡改函数的上下文一次
		//不同:传递参数时,call多个参数用逗号隔开,apply方法执行,传递数组
		originPush.call(this,location,resolve,reject);
	}else{
		originPush.call(this,location,()=>{},()=>{});
	}
}

重写replace方法

//先保存原方法
let originReplace = VueRouter.prototype.replace;
//重写
VueRouter.prototype.replace = function(location,resolve,reject){
	if(resolve && reject){
		//call|apply
		//相同点:都可以调用函数一次,都可以篡改函数的上下文一次
		//不同:传递参数时,call用逗号隔开,apply方法执行,传递数组
		originReplace.call(this,location,resolve,reject);
	}else{
		originReplace.call(this,location,()=>{},()=>{});
	}
}
路由传递参数相关面试题
1、path与params

路由传递参数(对象写法)path是否可以结合params参数一起使用?

this.$router.push({path:'/search',params:{key:this.key}})

不可以:不能这样书写,程序会崩掉

2、params参数可传可不传

如何指定params参数可传可不传?

配置路由时占位后加问号:

path:"/search/:key?",
3、params空

params参数可以传递也可以不传递,但是如果传递是空串,如何解决?

使用undefined

this.$router.push({name:"search",params:{key:this.key || undefined},query:{k:this.key.toUpperCase()}})

如果指定name与params配置, 但params中数据是一个"", 无法跳转,路径会出问题

4、路由组件传递props数据

路由组件能不能传递props数据?

props通常用于父子组件通信

可以,三种写法

①布尔值写法,params

index.js设置props

props:true

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QtPgfZWq-1645519249990)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220233836282.png)]

测试可以看到可以传参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIPiRKE3-1645519249990)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220233734786.png)]

接收参数:(只能传递params参数)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pMI3AIgB-1645519249991)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220234311630.png)]

②对象写法

(额外给路由组件传递props参数)

props:{a:1,b:2}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5SgZvGv-1645519249991)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220234615538.png)]

接收:props:[‘a’,‘b’]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIjKZHYb-1645519249991)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220235423636.png)]

结果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lp6ujVOA-1645519249992)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220235353816.png)]

③函数写法

可以params参数、query参数,通过props传递给路由组件

props:($route) => {
return {key:$route.params.key,k:$route.query.k}
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2bm98fBl-1645519249992)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220220235848226.png)]

可以拿到key、k

接收参数:

index.js

props:($route) => {
                return {ke:$route.params.key,k:$route.query.k}
            }

页面接收:

export default

props:['ke','k']

template

params参数 -> {{$route.params.key}} - {{ke}}

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8b6cwdc-1645519249992)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220221000615276.png)]

改写(简写):注意加括号,不然箭头函数认为函数体不正确

props:($route) => ({ke:$route.params.key,k:$route.query.k})

5.call|apply

相同点:都可以调用函数一次,都可以篡改函数的上下文一次;
不同:传递参数时,call多个参数用逗号隔开,apply方法执行,传递数组.

3.组件拆分

组件拆分时只看静态页面,比如轮播图只显示第一个页面,将其余页面注释掉

3.1 首页组件拆分(静态)

将Home组件的静态组件拆分
1静态页面(样式)
2拆分静态组件
3发请求获取服务器数据进行展示
4开发动态业务
拆分组件:结构+样式+图片资源
一共要拆分为七个组件

结构相似可以拆成一个组件,复用

3.1.1 三级联动拆分

三级联动在多个页面使用,注册为全局组件。

好处:只需要注册一次,就可以在项目任意地方使用

(如果文件夹中vue文件命名为index.vue,可以少写一层路径)

main.js:

// 引入三级联动组件--全局组件
import TypeNav from '@/views/Home/TypeNav/TypeNav'
//第一个参数:全局组件的名字,第二个参数:哪一个组件
Vue.component(TypeNav.name,TypeNav)

使用:


在需要使用的地方引用即可

3.1.2 其他拆分

不是全局组件,建好后在需要的页面注册

如:在homeIndex.vue引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgGhPurQ-1645519249992)(C:\Users\yang6\AppData\Roaming\Typora\typora-user-images\image-20220222131605575.png)]


使用:



其他同理,页面使用多个组件:


3.1.3 POSTMAN测试接口

你可能感兴趣的:(笔记,前端学习,vue.js,javascript,webpack)