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项目了，看完记得点赞哦！
扫一扫
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
