vue项目实战-尚品汇
实战项目--尚品汇
day1
目录
需要使用到的工具有
node+ webpack +taobao镜像
1.创建初始化项目
1.vue-cli脚手架初始化项目(这是一个vue2的项目记得在选择版本的时候选择vue2)
vue create demo // demo是项目文件的名称
vue-cli脚手架目录
- node_modules文件夹:项目依赖文件夹
- public文件夹:一般放置一些静态资源(图片),需要注意,放在public文件夹中的静态资源,webpack进行打包的时候会原封不动打包到dist文件夹中
- src文件夹(程序员源代码文件夹):
- assets文件夹:一般也是放置静态资源(一般放置多个组件公用的静态资源),需要注意,放置再assets文件夹里面静态资源,在webpack打包的时候,webpack会把静态资源当作一个模块,打包js文件里面
- components文件夹:一般放置的是非路由组件(全局组件)
- app.vue:唯一的跟组件,vue当中的组件(.vue)
- babel.config.js:配置文件(babel相关)
- package.json:认为项目身份证,记录项目叫做什么,项目中有哪些依赖,项目怎么运行
- package-lock.json:缓存行文件
- README.md说明性文件
2.项目的配置
1.项目运行起来让浏览器自动打开
//package.json文件 在serve启动这里加上--open
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
2.关闭eslint的校验功能
最新的cli脚手架中都有vue.config.js 如果没有自建创建一个即可在里面加入
module.exports = {
// 关闭eslint
lintOnSave: false
}
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样式,需要通过less、less-loader(版本5)进行处理less,把less样式变为css样式,浏览器才可以识别
3.如果想让组件识别less样式,需要在style标签的身上加上lang=less
4.1使用组件的步骤(非路由组件)
--创建 或者定义组件
--引入
创建好组件后在跟组件App.vue下引入
--注册
在components下进行注册
--使用
通过标签的方式使用
5.路由组件的搭建
在上面分析的时候,路由组件应该有四个:Home,Search,Login,Register
--components文件夹:经常放置的是非路由组件(公用全局组件)
-pages|views文件夹:经常放置路由组件
首先在views文件夹下创建着4个文件夹
以Home下的代码为例
写入vue代码,其余四个都是相同的,只是内容不相同
<template>
<div>
我是home组件
</div>
</template>
<script>
export default {
name: ''
};
</script>
<style scoped>
</style>
5.1配置路由
项目中配置的路由一般放置在router文件夹中
5.2 路由组件与非路由组件的区别
1:路由组件一般放置在pages|views文件夹,非路由组件一般放置在compnoents文件夹中
2:路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候,一般用标签名字使用
3.注册完路由,不管路由路由组件、还是非路由组件身上都有$route和$router属性
$route:一般获取路由信息[路径,query params信息]
$router:一般进行编程式导航进行路由跳转【push|replace】
5.3路由的跳转
路由的跳转有两种形式:
声明式导航router-link,可以进行路由的跳转
编程式导航push|replace,可以进行路由跳转
编程式导航:声明式导航能做的编程式导航都可以做,但是编程式导航除了可以进行路由跳转,还可以做一些其他的业务逻辑。
6.Footer组件显示与隐藏
Footer组件:在home search显示Footer组件
Footer组件:在登录、注册时候隐藏的
6.1我们可以根据组件身上的$route获取当前路由的信息,通过路由路径判断Footer显示与隐藏
6.2配置路由的时候,可以给路由添加路由元信息【meta】,路由需要配置对象,它的key不能瞎写、胡写
设置好路由元信息后直接使用即可
7.路由参数
7.1路由的跳转有几种方式?
比如A->B
声明式导航:router-link (务必要有to属性),可以实现路由的跳转
编程式导航:利用的是组件实例的$router.push|replace方法,可以实现路由的条状,(可以书写一些自己的业务)
8.2路由传参,参数有几种写法?
params参数:属于路径当中的一部分,需要注意,在配置路由的时候,需要占位
query参数:不属于路径当中的一部分,类似于ajax中的queryString /home?k=v&kv=, 不需要占位
router文件下index.js
src/router/index.js文件
//配置路由的地方
import Vue from "vue";
import VueRouter from "vue-router";
//使用插件
Vue.use(VueRouter);
// 引入路由组件
import Home from '@/views/Home'
import Search from '@/views/Search'
import Login from '@/views/Login'
import Register from '@/views/Register'
// 配置路由
export default new VueRouter({
// 配置路由
routes: [
{
path: "/home",
component: Home,
meta: { show: true } //meta是路由元,可以定义规则,比如Footer组件的显示与隐藏可以通过他来实现
},
{
path: '/search/:keyword?',
component: Search,
meta: { show: true },
name: "search",
// 路由组件能不能传递props数据?
// 布尔值写法:params 路由组件可以传递参数,只能传递params参数的值
// props:true
// 对象写法:额外的给路由组件传递一些props
// props: {a: 1, b: 2}
// 函数写法:可以params参数,query参数,通过props传递给路由组件
props:($route)=>{
return {keyword:$route.params.keyword,k:$route.query.k}
}
},
{
path: '/login',
component: Login,
meta: { show: false }
},
{
path: '/register',
component: Register,
meta: { show: false }
},
// 重定向,在项目跑起来的时候,访问/,立马让他定到首页
{
path: '*',
redirect: '/home'
}
]
})
以上就是第一天的内容,各位大佬指教,视频笔记
更多推荐
所有评论(0)