web前端教程：Vue项目开发流程

创新互联10年专注成都高端网站建设按需网站策划服务,为客户提供专业的成都网站制作,成都网页设计,成都网站设计服务;创新互联服务内容包含成都网站建设,微信小程序开发,软件开发,网络营销推广,网络运营服务及企业形象设计;创新互联拥有众多专业的高端网站制作开发团队,资深的高端网页设计团队及经验丰富的架构师高端网站策划团队;我们始终坚持从客户的角度出发,为客户量身订造网络营销方案，解决网络营销疑问。

一、企业项目开发流程

产品提需求

交互设计出原型设计

视觉设计出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库 ---- 轮播图默认占据整个高度，提前设置好一个父容器

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

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

使用mapActions的等价写法

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('/detail/' + item.id)

this.$router.push({

name: 'detail',

params: {id: item.id}

})

}

}

详情页面可以通过 this.$route.params.id 拿到传递过来的数据

12、页面切换效果

App.vue使用transition包裹router-view

13、下拉刷新以及上拉加载功能

以分类为例

如果想要结合vuex实现

kind/index.vue

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

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

15、购物车业务逻辑

16、注册功能 --- 计算属性

登录