Vue实现的前端项目开发

一、工具安装

安装前端编辑器vscode:shift+alt+F指令格式化

vscode安装地址：Download Visual Studio Code - Mac, Linux, Windows

搭建node环境和npm安装

Node.js 就是运行在服务端的 JavaScript，可类比为java

npm:是nodejs的包管理工具，可以下载使用公共仓库的包，类似maven 包安装分为本地安装（local）、全局安装（global）两种

npm install express # 本地安装express

npm install express -g # 全局安装express

npm list -g #查看所有全局安装的模块

Node安装包：下载 | Node.js 中文网

验证

node -v
npm -v

修改npm镜像源为国内

类似maven，从国外下载包很慢，所以就有人改成国内的maven仓库就会快很多，或者搭建自己本地的私服。国内直接使用 npm 的官方镜像是非常慢的，推荐使用淘宝 NPM 镜像。

vue -V看环境是否搭建好

在所要创建的目录下cmd打开文件

进入要创建的文件目录

设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

安装或升级vue脚手架

VUE是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，只关注视图层，易于上手，且方便与第三方库或既有项目整合。

学习Vue的网址：Vue.js - 渐进式 JavaScript 框架 | Vue.js

npm install -g @vue/cli

二、环境搭建

1.创建vue项目

先进入要操作的目录下

vue create vue项目名

运行

npm run serve

成功的效果

2.相关配置

安装插件

vetur 插件: vue文件基本语法的高亮插件

eslint插件:智能错误检测插件，能够及时的帮我们发现错误

运行前端项目

npm install #安装需要的资源
npm run serve #运行项目

项目结构

配置Axios请求

基于promise用于浏览器和node.js的http客户端，相当于postman功能

学习文档地址：axios中文文档|axios中文网 | axios

安装 npm install axios

具体配置：编写request.js请求模块

import axios from 'axios'//导入axios请求模块//配置axios请求
const service = axios.create({//url = base url + reqeust url(配置方法的请求路径)baseURL : "http://127.0.0.1:8089",//请求的资源地址，写本机后端资源的访问地址//配置请求超时时间timeout: 5000
})export default service//导出模块，方便不同模块的接口调用

api模块调用axios请求

import axios from '../request'//注册接口：指定请求的url地址，post请求传入参数
export const registerApi = (phone, pwd , name)=> axios.post("/api/v1/pri/user/register",{"phone":phone,"pwd":pwd,"name":name
})//登录接口
export const loginApi = (phone, pwd) => axios.post("/api/v1/pri/user/login",{phone,pwd
})//轮播图接口
export const getBanner = () => axios.get("/api/v1/pub/video/list_banner")//视频列表接口
export const getVideoList = ()=> axios.get("/api/v1/pub/video/list")//视频详情：指定请求的url地址，post请求传入参数
export const getVideoDetail = (vid)=> axios.get("/api/v1/pub/video/find_detail_by_id?",{params: {video_id:vid}
})//下单接口
export const saveOrder = (token, vid)=>axios.post("/api/v1/pri/order/save",{"video_id":vid
},{headers:{//请求头参数"token":token}
})//订单列表
export const getOrderList = (token)=>axios.get("/api/v1/pri/order/list",{params:{"token":token}
})//用户信息接口
export const getUserInfo = (token)=>axios.get("/api/v1/pri/user/find_by_token",{params:{"token":token}
})

配置router路由

vue-router是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用更简单。

官方文档：Vue Router | Vue.js 的官方路由

在router文件夹下创建路由配置文件

index.js

//导入组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home/Home.vue'
import CourseDetail from '../views/CourseDetail/CourseDetail.vue'
import Login from '../views/Login/Login.vue'
import Order from '../views/Order/Order.vue'
import Pay from '../views/Pay/Pay.vue'
import Personal from '../views/Personal/Personal.vue'
import Register from '../views/Register/Register.vue'//绑定跳转的路由路径
Vue.use(VueRouter)const routes = [{path:"/",name:"Home",component:Home},{path:"/coursedetail",name:"CourseDetail",//按需加载component : ()=>import("../views/CourseDetail/CourseDetail.vue")//component:CourseDetail},{path:"/login",name:"Login",component:Login//全部加载},{path:"/order",name:"Order",component:Order,meta:{ requiresAuth : true}},{path:"/pay",name:"Pay",component:Pay,meta:{ requiresAuth : true}},{path:"/personal",name:"Personal",component:Personal,meta:{ requiresAuth : true}},{path:"/register",name:"Register",component:Register},]//实例化VueRouter实例
const router = new VueRouter({routes
})export default router//导出方便其它模块使用

三、项目开发

1.语法

vue指令

vue中组件的使用

组件就是对可复用的代码的封装，相当于一个通用模板。

通过Vue.component(组件名, 选项)实例化一个组件，通过props来接收外部数据

安装live server插件运行html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><div id="app"><!-- 逻辑判断的应用 --><div v-if="Math.random()>0.5">大于0.5</div><div v-else>小于0.5</div><!-- 有序列表 --><oi><!-- 通过循环指令遍历显示 --><li v-for="user in users">{{user.name}}</li></oi><!--通过v-model实现双向数据绑定 --><p>{{phone}} </p><input v-model="phone"/><!-- 通过v-on实现监听点击事件 --><p>{{title}}</p><!-- <button v-on:click="link">link一下！</button> --><button @click="link">link一下！</button><p></p><!-- <a v-bind:href="url">学习一下</a> --><a :href="url">学习一下</a><p></p><!-- 组件的使用 --><component1></component1><p></p><component1 msg="give you a number!"></component1></div><script>//实例化一个组件Vue.component('component1',{//接收外部数据props:{//数据名msg:{type:String//数据类型}},//data函数中存放组件内部定义的源数据data:function(){return {count:0}},//逻辑业务编写及页面展示，但只能包含一个根结点template:'<div> <p>{{msg}} </p> <button @click="count++">点击{{count}}次</button>   </div>'})//new一个vue实例new Vue({//指定要绑定的元素el:'#app',//数据源data:{//定义一个user数组users:[{name:"xiaoming"},{name:"xiaoming"},{name:"zhangsan"}],phone:"0000",title:"world!",url:"https://cn.vuejs.org/"},//自定义方法methods:{link:function(){this.title="hello "+this.title;}}})</script>
</body>
</html>

Cube-UI是基于 Vue.js 实现的精致移动端组件库

前端开发组件模板参考

cube-ui文档： cube-ui Document

cube-tab-bar组件：cube-ui Document

地址：cube-ui Document

Vuex: 在Vue项目开发时使用的状态管理工具
属性：state-存储数据，mutations-同步修改存储数据，actions-异步修改存储数据

getters-获取存储数据前进行修改

Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，相当于postman的功能
Vue-router是Vue官方的路由管理器，实现页面前端路由 Hash模式（默认）

ES6 ECMAScript 6（简称ES6）是JavaScript语言的标准,它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
let、const 语法 let : 定义变量，推荐在函数中使用 let 定义变量，可定义的变量类型更广。
箭头函数：函数的一种简写形式，使用括号包裹参数，跟一个 =>，紧接着是函数体
对象词法扩展: 在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法
解构赋值一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

导出模块

方式一： export default 向外暴露的成员可以使用任意的变量来接收注意：在一个模块中只能使用export default向外暴露一次

方式二： export 向外暴露的成员只能使用 {} 接收，这叫做按需导出注意：一个模块中可以同时使用 export default 和 export 暴露成员

导入模块

方式一： import axios from 'axios'

方式二： import { loginApi } from '@/api/getData.js'

       //解构赋值let [a,b,c]=[1,2,3];let {name,age}={name:"zhangsan",age:12};//箭头函数let sum=(a,b)=>a+b;//对象词法function getKV(name,sex,age){return{name,sex,age};let KV=getKV('xiaohong','girl',13);

2.具体业务

开发选项卡组件

编写html模块，引入选项卡组件----->编写js模块，定义组件参数的数据内容----->编写css模块，调整样式效果

CommonFooter.vue

// html 
<template><div class="tab"><cube-tab-bar v-model="selectedLabelSlots" @click="changHandler"><!-- 绑定选项卡中的信息 --><cube-tabv-for="(item) in tabs":icon="item.icon":label="item.label":key="item.path":value="item.path"></cube-tab></cube-tab-bar></div>
</template>//js逻辑处理
<script>
export default {//数据源data() {return {selectedLabelSlots: "/",//设置默认选择//设置选项卡信息tabs: [{label: "首页",//名称icon: "cubeic-home",//图标path: "/"//跳转路由路径 },{label: "我的订单",icon: "cubeic-like",path: "/order"},{label: "个人中心",icon: "cubeic-person",path: "/personal"}]};},methods: {//实现保持当前页面的效果changHandler(path){//this.$route.path是当前路径if(path !== this.$route.path){this.$router.push(path)}}},//vue实例生命周期 created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图//vue实例生命周期 mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行额外的操作    //https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90created(){//默认路由选择器，比如刷新页面，需要重新进到当前路由this.selectedLabelSlots = this.$route.path}};</script><!--SCSS是一种CSS预处理语言, scoped 是指这个scss样式 只作用于当前组件-->
<style lang="scss" scoped>
.tab {position: fixed;bottom: 0;z-index: 999;background-color:#fff;width: 100%;border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
} 
.cube-tab_active {color: #3bb149;
}
</style>

开发Home页面

编写js模块，导入组件、注册组件、声明数据源、定义方法获取数据----->编写html模块，引入组件----->编写css模块，调整样式效果

<template>
<!-- 页面效果显示 --><div><!-- 轮播图组件 --><home-banner :banners="banners"></home-banner><!-- 视频列表组件 --><video-list :videoList="videoList"></video-list><!-- 底部导航栏组件 --><common-footer></common-footer></div>
</template><script>
// 导入组件：./表示当前目录，@/表示根目录src
import HomeBanner from "./Component/Banner";
import VideoList from "./Component/VideoList";
import CommonFooter from "@/components/CommonFooter";
// 从api模块中按需导入轮播图和视频列表接口
import { getBanner, getVideoList } from "@/api/getData.js";export default {//注册组件components: {HomeBanner,VideoList,CommonFooter},//声明数据源data() {return {banners: [],videoList: []};},//定义方法methods: {// 获取轮播图数据：调用接口方法获取到数据async getBannerData() {try {const result = await getBanner();//实现异步请求console.log(result);console.log(result.data.code == 0)if (result.data.code == 0) {this.banners = result.data.data;}}catch(error){console.lo(error)}},//获取视频列表async getVList(){try{const result = await getVideoList();if (result.data.code == 0) {this.videoList = result.data.data;}}catch(error){console.lo(error)}}},mounted(){//指定调用的时间：页面渲染完成调用方法获取数据this.getBannerData();this.getVList()}
};
</script><style lang="scss" scoped></style>

开发Banner页面

组件可以去cube-UI(http:// https://didi.github.io/cube-ui/#/zh-CN/docs/tab-bar )或者ElementUI(Element - The world's most popular Vue UI framework)中去引用。

在主组件中Home.vue

<div><!-- 轮播图组件:通过绑定参数banners将参数传递给Banner子 --><home-banner :banners="banners"></home-banner></div>

在子组件中Banner.vue:先接收参数，再通过组件显示遍历

<template><div><!-- banners接收Home传递过来的参数,并遍历显示 --><cube-slide  :data="banners"><cube-slide-itemv-for="(item, index) in banners":key="index"><a :href="item.url"><img :src="item.img"  style="width:100%"/></a></cube-slide-item></cube-slide></div>
</template><script>
export default {//获取父组件传递过来的值props:{banners:{type:Array,required:true}}
};
</script><style lang="scss" scoped>
</style>

其余模块开发也同理，实质就是通过请求获取接口中的参数，再引用组件，将数据美观地显示出来。