1 脚手架使用初始化项目
初始化项目：vue create 项目名称 脚手架目录:public + assets文件夹区别
node_modules：放置项目依赖的地方 public：一般放置一些共用的静态资源（图片），webpack打包的时候，public文件夹里面资源原封不动打包到dist文件夹里面 src：程序员源代码文件夹的
assets文件夹经常放置一些静态资源（一般放置多个组件公用的静态资源），assets文件夹里面的静态资源，webpack会把静态资源当作一个模块，打包到JS文件夹里面 components文件夹一般放置非路由组件（或者项目共用的组件-全局组件） App.vue唯一的根组件 main.js入口文件【程序最先执行的文件】 babel.config.js:babel配置文件 package.json项目描述、项目依赖、项目运行指令，项目的身份证 package-lock.json缓存性文件 README.md项目说明文件，依赖是哪里来的都给你记录了
2 项目的其他配置
2.1 浏览器自动打开
"serve": "vue-cli-service serve"，后面加上--open
注意：要进去app文件里面去CMD启动项目npm run serve
错误的话要再加一句： "serve": "vue-cli-service serve --open --host=localhost"
在package.json文件中
"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 = {
lintOnSave:false,
}
2.3 src文件夹的别名的设置
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些 创建jsconfig.json文件（5.12—09.29现在vue项目初始化的时候就有@了）
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
3 路由的分析和配置
vue-router
前端所谓路由：Key-Value键值对
K即为URL（网络资源定位符）
V即为相应的路由组件
确定项目结构顺序：上中下
跳转的时候只有中间部分的V在发生变化，所以中间部分应该使用的是路由组件
由2个非路由组件|四个路由组件组成：
两个非路由组件：Header 【首页、搜索页】、Footer【首页、搜索页】，但是登入、注册页是没有的路由组件:Home、Search、Login（没有底部的Footer组件–带有二维码的）、Register（没有底部的Footer组件–带二维码的）
4 创建非路由组件Header与Footer业务
本次项目主要以业务和逻辑为主，不写html和css了
项目开发的时候：
书写静态页面（html+css）拆分组件获取服务器的数据动态展示完成相应的动态业务逻辑
注意点：
创建组件的时候需要：组件结构 + 组件样式 + 图片资源 （意思就是将静态页面copy过来的时候一部分一部分来）本项目采用less样式，但是浏览器不识别，所以需要通过安装less、less-loader进行处理，注意安装版本，此处安装的是npm i less-loader@6安装完成之后，还是会报错，想让组件识别less样式，需要在style标签上添加lang="less"
4.1 使用组件的步骤（非路由组件）
第一步：创建或定义
第二步：引入
第三步：注册
第四步：使用
注意清除默认的样式css文件，放在public文件夹下，记得引入
还有记得把app.vue里面的样式给他删除了！！！！！
给你 html 和 less 和资源图片文件时
首先第一步创建一般组件index.vue第二步找到对应的html和less结构分别放入template和style中，其中style记得写上 lang="less"第三步在组件中新建资源文件夹images，然后找到html中所需要的，放进去第四步在app.vue中引入组件，注册组件，使用组件
5 路由组件的搭建
安装 vue-router 注意安装@3版本
路由组件有四个：Home、Search、Login、Register
components文件夹经常存放的是非路由组件（共用全局组件）
pages/views文件夹经常存放路由组件
5.1 路由的配置
项目当中配置的路由一般放在router文件夹中
router文件夹中创建index.js文件
需要引入Vue和VueRouter
然后暴露路由实例，然后里面配置对象(路由)----就是写一个个对象，里面是path和component
之后将要暴露的路由组件引入–对象中需要告诉路径path和组件component
之后需要路由文件执行一次，路由文件需要在入口文件main.js中注册
//引入路由
import router from '@/router'
new Vue({
render: h => h(App),
//注册路由
router
}).$mount('#app')
注册完还看不见，需要在app.vue中展示
Vue中借助router-link标签实现路由的切换----目前这个用不到
以及指定位置展示----需要
5.2 小结
路由组件与非路由组件的区别
路由组件放在pages或views中，非路由组件放在components中路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字component: SearchYu）、非路由组件在使用的时候，一般都以标签的形式使用（重要！！！！注册完路由，不管是路由组件还是非路由组件身上都会拥有
r
o
u
t
e
,
route,
route,router属性
//注册路由信息：写下下面这句的时候，组件身上都会拥有$route,$router属性
router
还需要在路由中，重定向，在项目运行时，访问/，立马定位到首页
{
path: "*",
redirect: "/home"
}
$route：一般获取路由信息【路径、query、params等】
$router：一般进行编程式导航进行路由跳转【push、replace】
5.3 路由的跳转
路由的跳转就两种形式：
声明式导航router-link和编程式导航push | replace 都可以进行路由跳转
编程式导航更好用：编程式导航除了路由跳转，还可以在路由跳转之前做一些其他的业务逻辑
修改登入和注册跳转
在修改Header组件中的跳转
同理，点击头部的企业图片是往主页跳转
同理，点击头部的搜索按钮也要跳转----注意这个是按钮，将来要收集文本框里用户的输入信息----用编程式导航
@click="goSearch"
methods中配置相应回调
goSearch() {
this.$router.push("/search");
},
6 Footer组件显示与隐藏
显示和隐藏组件：v-if或v-show
FooterYu组件：在主页和搜索页显示，在登入和注册页隐藏
面试题：v-show与v-if区别
v-show：通过样式display控制
v-if：通过元素上树与下树进行操作，操作DOM，效率低
我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断是否显示或隐藏
优化写法----路由元信息----在配置路由的时候自己定义一些属性（show）在meta对象中
routes: [
{
path: "/home",
component: Home,
meta: { show: true }
},
{
path: "/login",
component: Login,
meta: { show: false }
},
...都要配置meta...
]
然后直接判断$route中的属性
配置路由的时候，可以给路由添加路由元信息meta，路由需要配置对象，meta是规定的，我们不能随意添加想要的key，这是不行的
7 路由传参
7.1 路由的跳转方式
声明式导航router-link和编程式导航push | replace 都可以进行路由跳转（需要指定 to去哪里 写路由路径） 编程式导航更好用：编程式导航除了路由跳转，还可以在路由跳转之前做一些其他的业务逻辑
7.2 路由传参，有几种写法
params参数：路由需要占位，属于URL当中一部分 query参数：路由不需要占位，写法类似于ajax当中query参数/home?k=v&k=v,
获取搜索框中的用户输入信息，用v-model
data中配置keyword用来收集
data() {
return {
keyword: "",
};
},
type="text" id="autocomplete" class="input-error input-xxlarge" v-model="keyword" /> 7.3 路由传递参数 字符串写法模板字符串写法对象写法 这是在编程式路由导航中的写法，params和query都有以上这三种写法 点击搜索的时候要接受路由传递过来的参数，params和query参数都要，params需要占位----在路由中写好 就是将搜索框中的参数用params和query传给搜索组件 字符串写法 小写是parans参数，大写是query参数（带问号的键值对形式 this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase()); 这样子search组件就可以拿到params和query参数，可以在search中展示一下----取出来展示一下，在$route中params参数{{ $route.params.keyword }}
query参数{{ $route.query.k }}
模板字符串写法
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);
对象写法
注意：如果是对象写法，而且是路由跳转传参，传的还是params参数，那就需要给我们的路由命名
在路由配置文件中，给search路由起个名字 name: "search"
this.$router.push({
name: "search",
params: {
keyword: this.keyword,
},
query: {
k: this.keyword.toUpperCase(),
},
});
总结流程：在头部Header组件中可以用v-model拿到用户的输入keyword，然后通过三种方式（字符串，模板字符串，对象写法）给search组件传递收集来的keyword，然后search组件就可以展示了（在$route中可以读取到）
8 关于路由传参的面试题
路由传递参数（对象写法）path是否可以结合params参数一起使用？
不可以，不能进行路由的跳转。对象的写法可以是name或者path，但是path写法不能与params参数一起使用，params需要与name搭配
如何指定params参数可传可不传
比如：配置路由的时候，占位了（params参数），但是路由跳转的时候我就故意不传递值
会导致路径地址中连search都没有：
http://localhost:8080/#/?k=QWE
http://localhost:8080/#/search?k=QWE（至少应该要有search，但是不传递的话，连search都没有）
指定params可传可不传的时候，可以在路由占位的时候，加上?，代表将来传或者不传都可以
{
path: "/search/:keyword?",
component: Search,
meta: { show: true },
name: "search"
},
params参数可以传递也可以不传递，但是如果传递的是空串，该怎么解决
传递空串的话，会出现路径当中少了search
使用undefined解决：{ name: 'search', params: { keyword: ' ' || undefined }, query: {...} }一个小技巧
路由组件能不能传递props数据
可以的，有三种写法
路由的props配置----意思就是在配置路由（index.js）的时候写上props
第一种：布尔值方式 注意只能传递params参数
在配置路由的时候加上 { props: true }
同时在组件中用 props: ['keyword'] 接收，组件中的模板就可以直接使用参数了{{ keyword }}，不用写$route.params.XXX
相当于一个开关，true就可以接受到了。Header中该传的还得传：this.$router.push("/search/" + this.keyword);
第二种：对象写法 额外给路由组件传递一些props
props: { a: 1, b: 2 }
第三种：函数写法 可以params参数和query参数，通过props传递给路由组件，最常用----可以写一般写法props($route){}
props: ($route) => {
return {
keyword: $route.params.keyword,
k: $route.query.k
}
}
如果用props来传参数的话，就是说先把参数传到路由组件身上去，用的时候就不用在$route里面去取了----直接用{{ keyword }}
获取路由参数就是为了组件获取参数方便一些，上面模板的写法简单一点；路由那边（路由配置index.js文件中的函数写法）处理好了，组件拿的时候更方便一些
今天犯错的几个点：
App组件的模板中忘记加一个最外层的div App组件中注册其他组件时，把components因为自动输入写成commits没有发现，导致引入失败 ES6模板字符串的写法
精彩链接
您阅读本篇文章共花了：
发表评论