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端，忽略此步骤

// 避免移动端真机运行双击屏幕会放大

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>'); } </script>

2、修改目录结构

src

api

assets

components

lib

router

store

views

App.vue

main.js

3、修改App.vue结构

cnpm i node-sass sass-loader -D

<template>

<div>

<div>

<header>头部</header>

<div>内容</div>

</div>

<footer>底部</footer>

</div>

</template>

<script>

export default {

name: 'App'

}

</script>

<style>

@import '~@/lib/reset.scss';

html, body, .container, .detailContent {

@include rect(100%, 100%); // width: 100%; height: 100%;

}

.container, .detailContent {

@include flexbox(); // display: flex

@include flex-direction(column); // flex-direction:column

.box {

@include flex();

@include rect(100%, auto);

@include flexbox();

@include flex-direction(column);

.header {

@include rect(100%, 0.44rem);

@include background-color(#f66);

}

.content {

@include flex(); // flex: 1;

@include rect(100%, auto);

@include overflow(auto);

}

}

.footer {

@include rect(100%, 0.5rem);

@include background-color(#efefef);

@include flexbox();

a {

@include flex();

@include rect(auto, 100%);

@include flexbox();

@include justify-content(); // justify-content: center;

@include align-items(); // align-items: center;

@include text-color(#333);

&.active {

@include text-color(#f66);

}

}

}

}

</style>

4、依据结构设计页面

views/home/index.vue

views/kind/index.vue

views/cart/index.vue

views/user/index.vue

以home为例

<template>

<div>

<header>首页头部</header>

<div>首页内容</div>

</div>

</template>

<script>

export default {

}

</script>

<style>

</style>

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

<template>

<div>

<router-view></router-view>

<router-view name="footer"></router-view>

</div>

</template>

6、底部点击切换路由

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

<template>

<footer>

<ul>

<router-link tag="li" to="/home">

<span></span>

<p>首页</p>

</router-link>

<router-link tag="li" to="/kind">

<span></span>

<p>分类</p>

</router-link>

<router-link tag="li" to="/cart">

<span></span>

<p>购物车</p>

</router-link>

<router-link tag="li" to="/user">

<span></span>

<p>我的</p>

</router-link>

</ul>

</footer>

</template>

<script>

export default {

}

</script>

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": ["e