VUE项目实战（一）

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

1.首先需要下载node+webpack+淘宝镜像

2.Vue创建项目：

npm install --global

vue-cli vue init web pack “项目名称”

npm run dev

3.目录介绍

node_modules：项目依赖文件夹

public：一般放置一些静态资源，需要注意，放置在public中的静态资源，webpack打包的时候会原封不动的打包到dist文件夹中；

src：程序员源代码文件夹

2.项目的其他配置

1.项目运行起来的时候，浏览器自动打开

– package.json

"scripts":{

"serve": "vue-cli-serve serve --open"

}

2.eslint校验功能关闭

– 在根目录下，创建一个vue.config.js

module.exports = {

//关闭eslint

lintOnSave: false

}

3.src简写为@

– 创建jsconfig.json

{

"compilerOptions": {

"baseUrl": "./",

"paths": {

"@/*": ["src/*"]

},

//在这两个文件中不起作用

"exclude": {

"node_module",

"dist"

}

}

}

3.路由传参

1.字符串形式

在index中，要进行占位：path:“search/:keyword”

this.$router.push('/search/+ this.keyword +'?k='+this.keyword.toUpperCase()')

1

2.模版字符串

this.$router.push('/search/$${this.keyword}?k=${this.keyword.toUpperCase()}')

1

3.对象：最常用的写法

this.$router.push(

{

name: "search",

param:{

keyword:this.keyword

},

query:{

k:this.keyword.toUpperCase()

}

}

)

4.路由传参相关面试题

路由传参（对象写法）path能否可以结合params参数一起使用？

— 不可以，只能用name；

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

— 在配置路由的时候，在占位的后面加上一个问号；

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

— keyword: ’ ’ || undefined

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

— 可以；

1.布尔值写法： params

props：true

2.对象写法：额外的给路由组件传递一些props

props:{a:1,b:2},

3.函数写法：最常用，可以params参数、通过props传递给路由组件；

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

1

5.重写push和replace方法

路由跳转有两种形式：声明式导航和编程式导航（push）