深圳Web培训：Vue项目开发流程

深圳Web培训：Vue项目开发流程

一、企业项目开发流程
产品提需求
交互设计出原型设计
视觉设计出UI设计图
前端开发出页面模板
server端存取数据库
验收测试

二、为什么要使用vue: https://cn.vuejs.org/v2/guide/comparison.html
5个前端，4个会vue，1个会react，那么你该如何选择
客户要求使用vue
…
三、如何选择脚手架
自己搭建脚手架 webpack
使用现成的脚手架 https://cli.vuejs.org/zh/
vue-cli 基于webpack 3
@vue/cli 基于webpack 4
假设电脑中装的时@vue/cli脚手架，但是想用vue-cli的模板，可以如下安装指令
cnpm install -g @vue/cli
cnpm install -g @vue/cli-init
四、创建项目
@vue/cli
第一种创建方式： vue create mynewapp
第二种创建方式： vue ui
第三种创建法师： vue init webpack myapp
五、开始项目配置
1、如果做的移动端，那么需要考虑300ms延时以及点击穿透的问题，甚至是部分android手机不支持promise的解决办法，在index.html中引入如下代码，如果做的是pc端，忽略此步骤
// 避免移动端真机运行双击屏幕会放大

2、修改目录结构 src api assets components lib router store views App.vue main.js 3、修改App.vue结构 cnpm i node-sass sass-loader -D

头部

内容

底部

4、依据结构设计页面
views/home/index.vue
views/kind/index.vue
views/cart/index.vue
views/user/index.vue
以home为例

首页头部

首页内容

5、配置路由

router/index.js
import Vue from ‘vue’
import Router from ‘vue-router’
import routes from ‘./routes’

Vue.use(Router)

export default new Router({
routes
})
router/routes.js ----- 命名视图+命令路由+路由的懒加载+路由重定向
// 如果一个页面不需要底部，那么就不要传footer，比如kind无需底部
const routes = [
{
path: ‘/’,
redirect: ‘/home’
},
{
path: ‘/home’,
name: ‘home’,
components: {
default: () => import(’@/views/home’),
footer: () => import(’@/components/Footer’)
}
},
{
path: ‘/kind’,
name: ‘kind’,
components: {
default: () => import(’@/views/kind’),
footer: () => import(’@/components/Footer’)
}
},
{
path: ‘/cart’,
name: ‘cart’,
components: {
default: () => import(’@/views/cart’),
footer: () => import(’@/components/Footer’)
}
},
{
path: ‘/user’,
name: ‘user’,
components: {
default: () => import(’@/views/user’),
footer: () => import(’@/components/Footer’)
}
}
]

export default routes

修改App.vue ---- 命名视图（多视图路由）default footer

6、底部点击切换路由 components/Footer.vue,需要在App.vue中修改布局样式

• 首页

  分类

  购物车

  我的

7、编写页面
PC： element-ui https://element.eleme.io/
iview https://www.iviewui.com/
移动端： mint-ui http://mint-ui.github.io/
vant https://youzan.github.io/vant/
mint-ui 为例
cnpm i mint-ui -S
cnpm install babel-plugin-component -D
修改.babelrc文件
{
“presets”: [
[“env”, {
“modules”: false,
“targets”: {
“browsers”: ["> 1%", “last 2 versions”, “not ie <= 8”]
}
}],
“stage-2”
],
“plugins”: [“transform-vue-jsx”, “transform-runtime”,[“component”, [
{
“libraryName”: “mint-ui”,
“style”: true
}
]]],
“env”: {
“test”: {
“presets”: [“env”, “stage-2”],
“plugins”: [“transform-vue-jsx”, “transform-es2015-modules-commonjs”, “dynamic-import-node”]
}
}
}
7.1 main.js入口文件处引入mintui
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import MintUI from ‘mint-ui’
Vue.config.productionTip = false
Vue.use(MintUI)
7.2 封装了banner.vue和prolist.vue组件
banner.vue组件中使用了UI库 ---- 轮播图默认占据整个高度，提前设置好一个父容器

11 22 33

prolist.vue

• 肖生客的救赎

home/index.vue中引用组件

首页头部

8、数据请求
cnpm i axios -S
8.1 添加mock数据功能 ----- 开发前期 ---- 后端没有接口时这样用
cnpm i mockjs -D
api/mock.js
// 引入mockjs
const Mock = require(‘mockjs’)
const Random = Mock.Random
const doubandata = function () {
let articles = []
for (let i = 0; i < 10; i++) {
let newArticleObject = {
title: Random.csentence(5, 30),
thumbnail_pic_s: Random.dataImage(‘300x250’, ‘mock的图片’),
author_name: Random.cname(),
date: Random.date() + ’ ’ + Random.time()
}
articles.push(newArticleObject)
}
return articles
}
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock(’/douban’, ‘get’, doubandata)
api/index.js
import axios from ‘axios’
import { Indicator } from ‘mint-ui’
const baseUrl = process.env.NODE_ENV === ‘development’ ? ‘’ : ‘https://www.daxunxun.com’
console.log(baseUrl)
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
Indicator.open()
return config
}, function (error) {
// 对请求错误做些什么
Indicator.close()
return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
Indicator.close()
return response
}, function (error) {
// 对响应错误做点什么
Indicator.close()
return Promise.reject(error)
})

const api = {
requestGet (url) {
return new Promise((resolve, reject) => {
axios.get(baseUrl + url)
.then(data => resolve(data.data))
.catch(err => reject(err))
})
},
requestPost (url, params) {
return new Promise((resolve, reject) => {
axios.post(baseUrl + url, params)
.then(data => resolve(data.data))
.catch(err => reject(err))
})
}
}

export default api
main.js处引入mock，项目上线以及由接口时则删掉即可
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import MintUI from ‘mint-ui’
import ‘@/api/mock’
8.2 假设后端已经有了接口，但是可能会存在跨域问题，如果有跨域问题，开发时需要使用到反向代理
删掉main.js出的mock
config/index.js处配置反向代理
proxyTable: {
‘/daxun’: {
target: ‘https://www.daxunxun.com/’,
changeOrigin: true,
pathRewrite: {
‘^/daxun’: ‘’
}
},
},
修改api/index.js的 baseUrl地址
const baseUrl = process.env.NODE_ENV === ‘development’ ? ‘/daxun’ : ‘https://www.daxunxun.com’
重启服务器，查看效果，预期一致
9、数据处理
本组件内部处理 data
状态管理器处理
data处理方式
home/index.vue

首页头部

prolist.vue

• {{ item.title }}

mock.js修改了模拟地址，以后切换更加简单

Mock.mock(’/daxun/douban’, ‘get’, doubandata)
以后切换mock和开发服务器只需要添加和删除main.js中的mock字段即可
10、状态管理器
cnpm i vuex -S
创建store/index.js,store/home.js,store/kind.js
index.js
import Vue from ‘vue’
import VueX from ‘vuex’
import home from ‘./home’
import kind from ‘./kind’
Vue.use(VueX)

const store = new VueX.Store({
modules: {
home,
kind
}
})

export default store

kind.js
export default {
state: {},
getters: {},
actions: {},
mutations: {}
}

home.js
import api from ‘@/api’
const store = {
state: {
bannerdata: [1, 2, 3],
prolist: []
},
getters: {
prolistLength (state) {
return state.prolist.length
}
},
actions: {
getprolist ({ commit }) { // 参数的解构赋值 context
api.requestGet(’/douban’)
.then(data => {
console.log(data)
commit(‘changeprolist’, data) // context.commit(‘changeprolist’, data)
}).catch(err => console.log(err))
}
},
mutations: {
changebannerdata (state, data) {
state.bannerdata = data
},
changeprolist (state, data) {
state.prolist = data
}
}
}

export default store
home/index.vue 通过mapState辅助函数可以直接获取状态管理器中的值，通过dispatch 触发异步的actions

首页头部

{{ bannerdata }}

使用mapActions的等价写法

首页头部

{{ bannerdata }}

11、列表进入详情
编写详情页面 detail/index.vue,一定要记得修改App.vue中的样式

详情头部

内容

详情底部

修改routes.js

{
path: ‘/detail/:id’,
name: ‘detail’,
components: {
default: () => import(’@/views/detail’)
}
}
声明式跳转
prolist.vue

{{ item.title }}

编程时跳转

methods: {
goDetail (item) {
// this.$router.push{(}^{\prime }/detail{/}^{\prime }+item.id)this.$router.push({
name: ‘detail’,
params: {id: item.id}
})
}
}
详情页面可以通过 this.$route.params.id 拿到传递过来的数据

12、页面切换效果
App.vue使用transition包裹router-view

13、下拉刷新以及上拉加载功能
以分类为例

分类头部

• {{ item.title }} --- {{ index }}

如果想要结合vuex实现
kind/index.vue

分类头部

• {{ item.title }} --- {{ index }}

store/kind.js
import api from ‘@/api’
export default {
state: {
kindlist: []
},
getters: {},
actions: {
getkindlist ({ commit }) {
api.requestGet(’/douban’)
.then(data => {
commit(‘changekindlist’, data)
})
},
loadTop ({ commit }) {
return new Promise((resolve, reject) => {
api.requestGet(’/douban’)
.then(data => {
commit(‘changekindlist’, data)
resolve()
})
})
},
loadBottom ({ commit, state }, params) {
console.log(params)
return new Promise((resolve, reject) => {
api.requestGet(’/douban?count=20&start=’ + params.pageCode * 20)
.then(data => {
console.log(‘bottom’, data)
const arr = […state.kindlist, …data]
console.log(‘arr’, arr)
commit(‘changekindlist’, arr)
resolve(data)
})
})
}
},
mutations: {
changekindlist (state, data) {
state.kindlist = data
}
}
}

14、回到顶部
components/BackTop.vue

<span class=“backtop” @click=“backtop”>返回顶部

使用时可以给需要的地方添加一个

15、购物车业务逻辑

购物车头部

16、注册功能 — 计算属性

注册

登录

登录

加粗样式