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()')

2.模版字符串

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

3.对象：最常用的写法

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

4.路由传参相关面试题

1. 路由传参（对象写法）path能否可以结合params参数一起使用？
   — 不可以，只能用name；
2. 如何指定params参数可传可不传；
   — 在配置路由的时候，在占位的后面加上一个问号；
3. params参数可以传递也可以不传递，但是如果传递是空串，如何解决；
   — keyword: ’ ’ || undefined
4. 路由组件能不能传递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})

5.重写push和replace方法

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