一、整个项目的流程

1.在 gitlab 或者 github 上建项目

本地需要安装 node.js 环境

2.本地创建项目

2.1 vue 脚手架使用

本地创建项目有个问题，下载下来的时候有多个文件夹，然而用 vue 脚手架创建项目时会产生另一个文件夹，会产生冲突。（主要对 git 命令不太熟，可以通过 git remote add origin 仓库名 添加到项目上）

# 默认会按照vue2方式进行安装
npm create 项目名
# 按照默认指引选择就行

2.2 跟远程仓库对上

当前是 vue2，后续会进行改善

• 第一种方式（推荐）

git init
# .git是从远程克隆的git文件
git remote add origin http://xxx.git
git add .
git commit -m 'init'
git pull origin master --allow-unrelated-histories
git push --set-upstream origin master

• 第二种方式（麻烦）

用 vue-cli 创建项目，然后将这个项目的内容拷贝到上一层

// 目录结构
--- project
--- vue-test
--- README.md
--- vue-test
--- .git // 需删除
--- README.md
--- node_modules // 需删除
--- public
--- src
--- package.json
--- package-lock.json // 需删除
--- .gitignore
---
--- .git
// 目标目录结构
--- project
--- vue-test
--- README.md
--- public
--- src
--- package.json
--- .gitignore
--- .git // 不可见

执行 linux 命令

# 进入到需创建的目录
cd project/vue-test
# 删除脚手架生成的 .git文件
rm -rf ./vue-test/.git
# 复制脚手架创建的项目到当前目录
cp -rf vue-test/* ./
# 会提示是否覆盖readme.md，输入y
y
# 删除 node_modules package-lock.json
rm -rf ./node_modules ./package-lock.json
# 安装npm，可用cnpm，这样更快
cnpm install
# 缺点是不会更新到package-lock.json中

二、下一步

1.设计目录结构

目录结构如下

--- public
--- index.html
--- src
--- api
--- index.js
--- assets
--- js
--- css
--- image
--- components
--- xxx.vue
--- pages
--- xxx2.vue
--- vuex
--- store.js
--- router
--- index.js
main.js

这里分成 hash 模式和 history 模式

• hash 模式和 history 模式区别：
  • hash 模式不需要设置 nginx
  • history 模式需要设置 nginx，不然会出现 404 页面

2.准备工作（vue2 版本）

• 准备 axios 对应的环境

// 命令行
npm install axios
/*
* api/index.js中
*/
import axios from 'axios'
axios.defaults.baseURL = '/api'//假定和后端协调对应的路径为/api
export default axios
/*
*	main.js中
*/
import Vue from 'vue'
import axios from './api/index.js'
Vue.prototype.$api = axios
/**
或者
Vue.prototype.$http = axios
到时候引用就用this.$http.get('接口名')。。。
**/

• 准备 element ui 环境（懒加载）

// 安装element-ui
npm install element-ui
// main.js中
// 引入css文件
import 'element-ui/lib/theme-chalk/index.css'
// import { 按需引入 } from 'element-ui'
import { Input } from 'element-ui'
Vue.use(Input)

• 准备 router 环境

// 安装vue-router
npm install vue-router
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 刷新或者重复点击问题解决办法
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
const route = [
{
path:'/',
redirect:'/home'
},
{
path:'/home',
// 组件懒加载
// 假定这里已经把路径名问题解决了，或者先在vue.config.js中进行处理
// @pages => src/pages
component:()=>import('@pages/home.vue'),
children:[
{
path:'about',
// @components => src/components
component:()=>import('@components/about.vue')
}
]
}
]
const router = new Router({
// hash or history
// history需要配置nginx
// hash不需要
mode:'hash',
route
})
export default router

• 准备 vuex 环境

// 安装vuex
npm install vuex
// vuex/store.js
import Vuex from 'vuex'
// 常量
const state = {
flag: false
}
// 异步操作
const actions = {
}
// 同步操作
const mutaions = {
setFlag(state, payload){
state.flag = payload
}
}
const store = new Vuex.store({
state,
actions,
mutations
})
export default store

• 准备跨域问题解决办法（前后端协调）

// 提前安装bable-polyfill，在命令行
npm install babel-polyfill
// vue.config.js中
const path = require('path')
// 可解决 ?. 可选链问题
require('babel-polyfill')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = {
// publicPath: process.env.NODE_ENV === 'production' ? '/' : './',
// 公共路径
publicPath: './',
indexPath: 'index.html', // 相对于打包路径index.html的路径
outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
assetsDir: 'staticBig', // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: false, // 生产环境的 source map
chainWebpack: (config) => {
config.resolve.alias // 添加别名
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@store', resolve('src/store'))
.set('@pages', resolve('src/pages'))
.set('@router', resolve('src/router'))
},
configureWebpack: (config) => {
},
devServer: {
open: true,
host: 'localhost',
// port: '8112', // 端口号
https: false, // https:{type:Boolean}
hotOnly: true, // 热更新
// proxy: 'http://xxx:8080'
// 配置跨域处理,只有一个代理
proxy: {
//配置跨域
'/api': {
// 后端提供的地址
target: 'http://xxx:8080',// 假定开放8080端口
changeOrigin: true,
// ws: true,//websocket支持
secure: false,
pathRewrite: {
'^/api': '',
},
}
}
}
}

3.抽象通用逻辑和通用组件

（有必要，减少重复复制粘贴工作，维护起来也方便）

通用组件要求

• 内部样式不影响外部样式，对父元素依赖不高（最好没有依赖）
• 要足够抽象但是有公共特征
• 能对外部事件进行响应（有事件出口）

这里有点问题，有些是在工作过程中才想到对应的组件，会出现样式覆盖的问题，注意命名。

三、业务逻辑

开发流程

产品根据标书梳理出对应的原型图，然后交给ui，ui进行绘制，一般会有一个平台储存ui绘制的图，我们当前用的蓝湖。
理论上交给ui之前应该还有需求评审？让开发人员评估后续开发的可行性，把不合理的需求驳回，然后做一个排期，然后项目经理再把这个排期跟客户对接，如果有分歧，那时再讨论。

有一个问题，是边出设计图边开发么？如果产品稿出现问题，后续的是不是都需要返工。貌似是不可避免的。问题在于怎么减少这类问题的发生。前期需要做很久的准备，保证大家对这个项目足够了解并且能提出相应的意见。当然，是理论上，这貌似是最难的，在大部分时间都需要考虑项目整体是怎样的，然后再从整体去看细节，而且没干啥活。

假定当前已经排完期了，进入开发流程，ui先出图，前端把对应的图转成页面。

业务代码编写

前端需要把ui图转成页面，你拿到设计图之后，先别慌，页面多是正常的，大部分都是重复的。你需要把整体的结构想出来，看需不需要路由，大部分情况下应该是需要路由的。

结构想清楚之后，你就会发现有很多一样的页面，只是名称啥的不一样，这时你可以想着用一个通用组件把公共部分抽离出来，不同的部分加上插槽。

结构想出来之后就是想对应的布局，设计图上的布局可以怎么实现，前期可以用自己习惯的方式，后面就会知道怎么做比较快。

结构和布局想好之后，可以把设计图上的图片下载下来，重命名一下方便后面引用，尽量起个跟实际用处相关的名称。

然后就是愉快的code时间了。

代码管理

一般本地会提交到公司要求的平台上。
提交之前需要pull

git pull
git add .
git commit -m '填写提交信息'
git push

项目部署

一般来说，这个是运维做的？当然，你也可以自己部署。相关的人会要求你把代码部署到某个平台上，按照他们说的做就可以了。

npm run build

把打包后的dist文件放到要求的位置，也有可能需要重命名，看需求。

项目上线

后期维护

四、引申的思考

为啥需要 loader

暂时没想出来

loader 类别：
css-loader
less-loader
sass-loader
style-loader

vue-loader
babel-loader
img-loader

为啥需要 plugin

为了提高页面的功能或者为了实现某种功能

最后

以上就是长情世界为你收集整理的项目执行流程一、整个项目的流程二、下一步三、业务逻辑四、引申的思考的全部内容，希望文章能够帮你解决项目执行流程一、整个项目的流程二、下一步三、业务逻辑四、引申的思考所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。