創(chuàng)新互聯(lián)10年專注成都高端網(wǎng)站建設(shè)按需網(wǎng)站策劃服務(wù),為客戶提供專業(yè)的成都網(wǎng)站制作,成都網(wǎng)頁(yè)設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)服務(wù);創(chuàng)新互聯(lián)服務(wù)內(nèi)容包含成都網(wǎng)站建設(shè),微信小程序開發(fā),軟件開發(fā),網(wǎng)絡(luò)營(yíng)銷推廣,網(wǎng)絡(luò)運(yùn)營(yíng)服務(wù)及企業(yè)形象設(shè)計(jì);創(chuàng)新互聯(lián)擁有眾多專業(yè)的高端網(wǎng)站制作開發(fā)團(tuán)隊(duì),資深的高端網(wǎng)頁(yè)設(shè)計(jì)團(tuán)隊(duì)及經(jīng)驗(yàn)豐富的架構(gòu)師高端網(wǎng)站策劃團(tuán)隊(duì);我們始終堅(jiān)持從客戶的角度出發(fā),為客戶量身訂造網(wǎng)絡(luò)營(yíng)銷方案，解決網(wǎng)絡(luò)營(yíng)銷疑問(wèn)。

一、企業(yè)項(xiàng)目開發(fā)流程

產(chǎn)品提需求

交互設(shè)計(jì)出原型設(shè)計(jì)

視覺設(shè)計(jì)出UI設(shè)計(jì)圖

前端開發(fā)出頁(yè)面模板

server端存取數(shù)據(jù)庫(kù)

驗(yàn)收測(cè)試

二、為什么要使用vue: https://cn.vuejs.org/v2/guide/comparison.html

5個(gè)前端，4個(gè)會(huì)vue，1個(gè)會(huì)react，那么你該如何選擇

客戶要求使用vue

...

三、如何選擇腳手架

自己搭建腳手架 webpack

使用現(xiàn)成的腳手架 https://cli.vuejs.org/zh/

vue-cli 基于webpack 3

@vue/cli 基于webpack 4

假設(shè)電腦中裝的時(shí)@vue/cli腳手架，但是想用vue-cli的模板，可以如下安裝指令

cnpm install -g @vue/cli

cnpm install -g @vue/cli-init

四、創(chuàng)建項(xiàng)目

@vue/cli

第一種創(chuàng)建方式： vue create mynewapp

第二種創(chuàng)建方式： vue ui

第三種創(chuàng)建法師： vue init webpack myapp

五、開始項(xiàng)目配置

1、如果做的移動(dòng)端，那么需要考慮300ms延時(shí)以及點(diǎn)擊穿透的問(wèn)題，甚至是部分android手機(jī)不支持promise的解決辦法，在index.html中引入如下代碼，如果做的是pc端，忽略此步驟

// 避免移動(dòng)端真機(jī)運(yùn)行雙擊屏幕會(huì)放大

2、修改目錄結(jié)構(gòu)

src

api

assets

components

lib

router

store

views

App.vue

main.js

3、修改App.vue結(jié)構(gòu)

cnpm i node-sass sass-loader -D

4、依據(jù)結(jié)構(gòu)設(shè)計(jì)頁(yè)面

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 ----- 命名視圖+命令路由+路由的懶加載+路由重定向

// 如果一個(gè)頁(yè)面不需要底部，那么就不要傳footer，比如kind無(wú)需底部

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、底部點(diǎn)擊切換路由

components/Footer.vue,需要在App.vue中修改布局樣式

7、編寫頁(yè)面

PC： element-ui https://element.eleme.io/

iview https://www.iviewui.com/

移動(dòng)端： 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庫(kù) ---- 輪播圖默認(rèn)占據(jù)整個(gè)高度，提前設(shè)置好一個(gè)父容器

prolist.vue

home/index.vue中引用組件

8、數(shù)據(jù)請(qǐng)求

cnpm i axios -S

8.1 添加mock數(shù)據(jù)功能 ----- 開發(fā)前期 ---- 后端沒有接口時(shí)這樣用

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 , 返回的數(shù)據(jù))；

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)

// 添加請(qǐng)求攔截器

axios.interceptors.request.use(function (config) {

// 在發(fā)送請(qǐng)求之前做些什么

Indicator.open()

return config

}, function (error) {

// 對(duì)請(qǐng)求錯(cuò)誤做些什么

Indicator.close()

return Promise.reject(error)

})

// 添加響應(yīng)攔截器

axios.interceptors.response.use(function (response) {

// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么

Indicator.close()

return response

}, function (error) {

// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么

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，項(xiàng)目上線以及由接口時(shí)則刪掉即可

import Vue from 'vue'

import App from './App'

import router from './router'

import MintUI from 'mint-ui'

import '@/api/mock'

8.2 假設(shè)后端已經(jīng)有了接口，但是可能會(huì)存在跨域問(wèn)題，如果有跨域問(wèn)題，開發(fā)時(shí)需要使用到反向代理

刪掉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'

重啟服務(wù)器，查看效果，預(yù)期一致

9、數(shù)據(jù)處理

本組件內(nèi)部處理 data

狀態(tài)管理器處理

data處理方式

home/index.vue

prolist.vue

mock.js修改了模擬地址，以后切換更加簡(jiǎn)單

Mock.mock('/daxun/douban', 'get', doubandata)

以后切換mock和開發(fā)服務(wù)器只需要添加和刪除main.js中的mock字段即可

10、狀態(tài)管理器

cnpm i vuex -S

創(chuàng)建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 }) { // 參數(shù)的解構(gòu)賦值 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 通過(guò)mapState輔助函數(shù)可以直接獲取狀態(tài)管理器中的值，通過(guò)dispatch 觸發(fā)異步的actions

使用mapActions的等價(jià)寫法

11、列表進(jìn)入詳情

編寫詳情頁(yè)面 detail/index.vue,一定要記得修改App.vue中的樣式

修改routes.js

{

path: '/detail/:id',

name: 'detail',

components: {

default: () => import('@/views/detail')

}

}

聲明式跳轉(zhuǎn)

prolist.vue

{{ item.title }}

編程時(shí)跳轉(zhuǎn)

methods: {

goDetail (item) {

// this.$router.push('/detail/' + item.id)

this.$router.push({

name: 'detail',

params: {id: item.id}

})

}

}

詳情頁(yè)面可以通過(guò) this.$route.params.id 拿到傳遞過(guò)來(lái)的數(shù)據(jù)

12、頁(yè)面切換效果

App.vue使用transition包裹router-view

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

以分類為例

如果想要結(jié)合vuex實(shí)現(xiàn)

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

使用時(shí)可以給需要的地方添加一個(gè)

15、購(gòu)物車業(yè)務(wù)邏輯

16、注冊(cè)功能 --- 計(jì)算屬性

登錄