Vue项目之简易版
vue的两大核心思想:组件化和数据驱动。
组件化:将整体拆分成可以复用的个体。
数据驱动:数据的变化关联BOM展示,避免DOM操作。
1.生成一个vue项目
cnpm install -g @vue/cli (安装vue脚手架,电脑安装过一次就不需要再次安装了)
vue create myapp / vue ui (自动创建一个myapp项目,记住名字不可包含大写)
注意:
1.如果是复制过来的vue项目,则需要在项目中安装依赖(命令:cnpm i),电脑卡的尽量不要在vscode中安装依赖,建议在原文件中安装。
2.修改package.json文件,增加dev : “npm run serve”(可加可不加,看个人习惯)。
分析项目的目录结构
-node_modules // 项目需要使用的依赖文件
-public // 静态资源文件
-src // 我们的主场
-tests // 测试
.browserslistrc // 浏览器版本的设置 使用最新的版本
.editorconfig // 编辑器的设置
.eslintrc.js // 代码格式校验
.gitignore // git的忽略文件
babel.config.js // babel配置文件
cypress.json // 测试的插件配置
package.json // 项目的一个描述的文件
postcss.config.js // css的配置
README.md
2. 修改App.vue
注:本文以普通的购物app为例,底部划分为主页、分类、购物车、我的四部分。
根据需要将App.vue中的部分代码删去,更改成自己需要的代码。(删除‘#app’内部的文件,按自己的需要编写代码,删除样式,根据需要编写相应的css代码,建议使用scss)。
其他步骤:
- 找到lib文件,赋值到src目录下
- 在App.vue文件中引入
- 需要用到图标,可以在public下的index.html中引入图标来源
示例如下:
< link rel=“stylesheet” href="//at.alicdn.com/t/font_1367902_c6r4eb0l0dc.css">
3. 抽离页面组件以及底部
3.1 在views下新建四个vue页面,并写上相应的内容。
新建四个文件夹如图,并在四个文件夹内创建index.vue。在组件内部中可以写入不同的页面效果。本文以主页为例。
3.2 在App.vue中删除相应的组件,用router-view标签代替。
< router-view>可以跳转到指定模块。
3.3 在router.js中配置路由
在router.js文件中,删除之前import的home文件,并重新编写routes的引入路径。在这里,首页用到了路由重定向,其他页面用到了路由的懒加载。(好处:在需要的时候再去调用。)
import Vue from 'vue'
import Router from 'vue-router'
/* eslint-disable */
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{ //路由的重定向
path: '/',
redirect :'/home'
},
{
path: '/home',
name: 'home',
component: () => import('@/views/home/index.vue') //路由的懒加载
},
{
path: '/kind',
name: 'kind',
component: () => import('@/views/kind/index.vue')
},
{
path: '/cart',
name: 'cart',
component: () => import('@/views/cart/index.vue')
},
{
path: '/user',
name: 'user',
component: () => import('@/views/user/index.vue')
}
]
})
注:该文件书写要求十分严格,经常因为多写或者少写空格而报错,可以在代码最前面加上/* eslint-disable */,可以屏蔽报错。完成以上操作,我们可以实现输入不同地址跳转不同的页面。
4. 生成底部点击效果
1.在App.vue中将页面底部分为四个部分,我们将这四个部分的标签改为router-link,示例:
< router-link to="/home" tag=“li”>
此标签为声明式导航,点击可以直接跳转。to代表我们点击想要跳转页面的路由,这里以主页为例。router-link会自动将标签渲染为a标签,如果想更改,可在tag=“ ”中定义自己想要的标签。
完成以上操作我们就可以实现点击底部跳转不同页面。
2. 在浏览器中打开控制台,可以看到,在每次点击时,都会在点击标签内部生成class属性:router-link-active。因此,可以借助此属性在App.vue中为点击标签设置样式,案例将点击标签字体颜色设置为粉色。
&.router-link-active{ @include color(pink);}
5. axios请求数据渲染页面
本文只渲染首页,以豆瓣电影为例
5.1 安装axios
cnpm i axios -S
5.2 抽离组件并请求数据
在主页(home/index.vue)中设置html样式以及css样式。同时,将内容部分抽离出来,作为子组件(prolist.vue)。此时,主页为父组件,抽离出的新文件为子组件。
详细步骤
- 1.在父组件中引入axios,通过生命周期钩子函数mounted去请求数据。
- 2.拿到数据后,去布局基本的产品列表页面,即创建子组件Prolist.vue。在子组件中,script标签可以省略,默认会将子组件暴露出去。
- 3.去父组件home.vue中引入子组件(import Prolist from ‘@/components/Prolist’)。此时子组件已经定义完成,需要在父组件中注册子组件。
- 4.渲染数据,在父组件中写入子组件的标签。
- 5.去子组件中设置相关样式,以便在后来接受数据时能够规范显示。
- 6.在父文件中设置初始化的值,以便传输数据(在父组件内添加data函数,并返回为一个空数组,此数组用来接收父给子传输的数据)。在钩子函数中可以直接将请求的数据放在此数组中。
分离步骤:(将详细步骤按父子组件拆分,与上相同)
在父组件中:
- 1.引入axios,通过生命周期钩子函数mounted去请求数据。
- 2.在script部分引入子组件,在定义父文件处注册子组件。在template中调用子组件。
- 3.设置初始化的值,以便传输数据(在父组件内添加data函数,并返回为一个空数组,此数组用来接收父给子传输的数据)。
- 4.此时,可以将axios接收的数据放置在data的空数组中。
在子组件中:
- 在定义子组件过程中,写出页面的基本结构,并设置好css样式,以便接受数据后直接在页面中规范展示出来。
- 在子组件中,script标签可以省略,默认会将子组件暴露出去。
父组件:
<template>
<div class="container">
<header class="header">首页头部</header>
<div class="content">
<prolist></prolist>
</div>
</div>
</template>
import axios from 'axios'
import Prolist from '@/components/Prolist' //引入子组件
export default {
data () {
return {
datalist: []
}
},
components: {
prolist: Prolist //注册子组件
},
mounted () {
axios.get('https://www.daxunxun.com/douban').then(res => {
console.log(res.data)
this.datalist = res.data
})
}
}
子组件:
<template>
<ul class="prolist">
<li class="proitem">
<div class="itemImg">
<img :src=" " alt="">
</div>
<div class="itemInfo">
<h4>
电影名称
</h4>
<div>
演员:
</div>
<div>
导演:
</div>
<p>
评分:
</p>
</div>
</li>
</ul>
</template>
<style lang="scss">
@import '@/lib/reset.scss';
.prolist{
.proitem{
@include rect(100%,1.2rem);
@include border(0 0 1px 0,#ccc,solid);
@include flexbox();
.itemImg{
@include rect(1.2rem,1.2rem);
img{
@include rect(1rem,1rem);
@include margin(0.1rem);
@include border(1px,#ccc,solid);
}
}
.itemInfo{
@include flex();
}
}
}
</style>
5.3 父组件向子组件传值
- 在父组件调用子组件的地方,添加自定义属性,此处属性值为变量,需要用到绑定属性。( < prolist :attname=“datalist”> )
<template>
<div class="container">
<header class="header">主页头部</header>
<div class="content">
<prolist :attname="datalist"></prolist>
</div>
</div>
</template>
- 在定义子组件的地方添加props选项,此处我们采用对象的形式(更加规范)。
export default {
props: {
//attname为之前自定义的属性名,在html中就可以通过这个属性名拿到数据。
attname: Array
}
}
- 此时就可以在子组件中调用父组件传过来的值(在之前打印的数据中,可以找到相应的图片、标题等位置)。在template中调用相应的值,有两处需要用到v-for循环,具体请看下方代码。
注:因为需要协议降级,我们需要在index.html中写入这句代码,不写将会影响图片数据的请求。
< meta name=“referrer” content=“no-referrer”>
<template>
<ul class="prolist">
<li class="proitem" v-for="item of attname" :key="item.id">
<div class="itemImg">
<img :src="item.images.small" alt="">
</div>
<div class="itemInfo">
<h4>
{{ item.title }}
</h4>
<div>
演员:
<span v-for="itm of item.casts" :key="itm.id">
{{ itm.name }}/
</span>
</div>
<div>
导演:
<span v-for="itm of item.directors" :key="itm.id">
{{ itm.name }}/
</span>
</div>
<p>
评分:{{ item.rating.average }}
</p>
</div>
</li>
</ul>
</template>
完成以上步骤就可以初步建立起一个简单的vue项目了,看完记得点赞哦!