Vue前后端分离项目开发参考
搭建项目参考
前端
- 前期准备
- node环境
- 搭建脚手架
- 安装需要的依赖：vue全家桶（vue-cli、vue-router、vuex）、css预编译器（sass之类的）
- 如果是移动端应用还需要进行相关的如响应式配置、点击响应配置等（后面会说）
- 选择字体图标资源、前端UI框架等（如：element-ui）或者直接选择前端模板
- chrome安装vue-dev进行开发环境测试
- git项目配置
- 项目编写
- 目录架构设计（主要是src目录），后面会有参考
- 代码遵循eslint规范
- 通过vue-router配置路由以及组件
- 在api目录下统一封装一个请求接口函数，然后编写的请求函数都调用这个请求接口函数
- 解决接口请求的跨域问题
- 通过vuex进行状态管理配置（state、mutations、actions、getters）
- 在后端没有搭建好的时候可以使用mock[官网]模拟接口生成数据（或者安装mockoon直接生成假数据）
- 项目打包和部署
- 通过
npm run build构建项目，会在dist目录生成对应文件（如果想要打包结果可视化，则命令改为：npm run build --report） - 将生成的文件通过nginx进行部署，配置nginx解决跨域等问题
后端
- 前期准备
- 前端人员编写API接口文档（每个接口内容：请求url、url示例、请求方法、请求参数（包括数据类型）、请求参数示例、返回参数（包括数据类型）、返回参数示例（包括成功和失败的请求结果））
- 后端根据文档需求选择合适的数据库和框架等
- 项目编写
- 编写对应的接口
- 项目测试
- 接口测试（推荐postman）
- 项目部署
- 根据对应的后端语言框架进行部署
vue-cli脚手架目录架构
-dist 编译打包生成文件夹
-bulid webpack配置文件夹
-config webpack配置文件夹
-index.js 指定后台的服务端口号以及静态资源的文件夹
-node_modules 项目依赖的js
-src 源码内容
-main.js 项目入口js文件
-static 静态资源（这里的静态资源一般在index.html引入）
-css 第三方css资源文件
-img 图片
.barbelrc babel编译文件
-index.html 主页面
-package.json webpack打包配置文件
###################自定义添加#####################
-mock 模拟数据文件夹
-script 脚本文件夹
-start.sh 运行脚本
脚手架目录各部分详细架构
src下
-api(/network/service) 接口请求函数文件夹
-ajax.js ajax封装函数
-index.js 调用ajax请求函数
-config 配置文件夹
-xxx.js 某功能/页面的配置数据
-assets(/common) 通用资源文件夹，如样式、字体、图片等（这里的资源一般在模块中引入）
-css(/scss) 通用样式文件夹
-img 图片文件夹
-common 通用图片文件夹
-xxx 其他图片文件夹
-font 字体文件夹
-components 非路由组件文件夹
-Footer 底部组件文件夹（如底部导航栏）
-Footer.vue 对应底部组件（如底部导航栏）
-layout 界面布局文件夹
-Heading 标题组件文件夹
-Heading.vue 标题组件
-Nav 导航栏组件文件夹
-Nav.vue 导航栏组件
-Layout.vue 总体样式布局组件
-views(/pages) 路由组件文件夹
-Home 对应路由组件文件夹（如首页）
-Home.vue 对应组件（如首页）
-mixins 组件通用对象文件夹
-router 路由器文件夹
-index.js 路由器配置文件
-store vuex相关模块文件夹
-index.js 整个状态管理文件
-state.js 存放状态属性对象
-mutations.js 存放对状态属性的操作
-actions.js 存放对mutations的操作
-getters.js 存放对状态属性的计算
-mutation-types.js 存放mutations里方法的常量名称
-utils 工具文件夹
-util.js 通用工具
-xxx.js 对应模块工具
-filters 自定义过滤器模块文件夹
-index.js 自定义过滤器模块
-directives 自定义指令模块文件夹
-index.js 自定义指令模块
-lang 语言包文件夹
-zh.js 中文语言包
-en.js 英文语言包
-mock 模拟数据接口文件夹（src目录外边有这里就不需要）
-App.vue 应用根组件
-main.js 入口js
要点：
- component和views区别：比如上面的components实例中存放了导航栏，看起来好像应该是路由组件才对，但实际上并非如此，其只是上面存放了很多导航的连接，你可以理解成这个是每个页面都有的模板通用组件，而views文件夹正如其名，是每个对应页面才显示的内容。即前者可以看做是存放整个页面通用部分的组件，而后者是存放仅该页面才有的组件
- 文件命名建议：建议src一层目录下的文件夹都用首字母小写的驼峰法命名，往后层数的如果是组件相关目录则用首字母大写的驼峰法命名，否则还是用首字母小写的驼峰法命名（或者驼峰法换成用
-隔开，比如：test-fun.js） - 图片、CSS之类的静态资源目录存放建议：如果是组件开发，建议资源放src下，比如此时组件里引入图片时的链接为：
@/xxx/xxx.jpg（@代表src目录），而如果放在根目录的static下，那么引入链接就是../../static/xxx/xxx.jpg，并且在编译打包时容易出现路径问题；但如果是像入口文件index.html引入的资源，那么就建议放在根目录的static下，可以说根据就近原则选择静态资源文件的存放位置
简单项目示例
这里写了一个vue项目的简单示例，里面包括基本的架构和常用的操作示例，可以作为学习的参考，链接：https://github.com/dawsonenjoy/vue-demo
下面放张示例图：
示例项目
vue开发参考
vue前端项目架构参考
https://github.com/JasonBai007/vue-seed
vue开发风格规范参考
https://cn.vuejs.org/v2/style-guide/
vue开发ui框架参考
PC端：element-ui
移动端：muse-ui（样式好看但提供的较少，官网）、vant（更可靠些，适合电商类项目，官网）、vux（官网）、weui（和微信统一样式，演示官网，教程）
element-ui使用参考
https://www.jianshu.com/p/e672b246d9d1
一些vue相关组件和模板的资源
https://www.leachchen.com/#/resource/vue?value=2001
vue+django参考
https://www.cnblogs.com/derek1184405959/p/8733194.html
https://blog.csdn.net/Jack_wise/article/details/80690826
vue+springboot参考
https://www.bbsmax.com/A/A2dm9N14de/
（主要讲了部署配置，包括nginx）
axios封装参考
https://www.jianshu.com/p/cac8e979e437
vue滑动验证码参考
https://www.jianshu.com/p/61645ec3047d
vue开发问题总结
vue图片动态路由引入
图片的动态路径需要使用require()方法引入，否则路径只能写死，举例：
<!-- 原本导入图片 -->
<img src="@/img/xxx.jpg"/ >
<!-- 动态导入图片 -->
<img :src="require('@/img/' + img)"/ >
vue图片懒加载参考
vue-lazyload
vue国际化多语言参考
vue-i18n
参考：
https://www.jianshu.com/p/df2550c6f1be
https://www.jianshu.com/p/cbf63a916c10
vue操作cookie参考
vue-cookies，链接：https://www.jianshu.com/p/8deae75624eb
titile图标favicon.ico配置参考
https://www.cnblogs.com/conglvse/p/9871578.html
vuex刷新页面导致数据消失参考
https://www.jb51.net/article/160918.htm
vue项目在ie下兼容
- 安装插件：
npm install babel-polyfill --save-dev
- 在webpack配置文件
webpack.config.js中修改入口文件配置：
entry: {
app: ['babel-polyfill', './src/main.js']
}
vue页面闪烁参考
vue v-cloak 解决页面加载时闪烁出现vue标签或者指令的问题
其他参考
https://juejin.im/post/59fa9257f265da43062a1b0e
移动端开发配置参考
响应式页面
首先需要在meta标签中配置响应式的viewport配置
移动端点击延迟0.3s解决
需要配置fastclick，可以参考：
https://www.jianshu.com/p/150c305f6930
移动端轮播参考
swiper框架，其他结合Vue的移动端UI框架可以参考：
https://www.jianshu.com/p/1e05c8d68407
移动端滚轮参考
better-scroll框架
生产环境部署打包优化参考
webpack-bundle-analyzer打包优化
- 安装：
npm install --save-dev webpack-bundle-analyzer
- 配置vue.config.js：
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: () => {
if (process.env.NODE_ENV === "production") {
return {
plugins: [new BundleAnalyzerPlugin()]
};
}
}
};
- package.json中添加命令：
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
- 执行命令：
npm run build
gzip配置
- 安装：
npm install compression-webpack-plugin
# 由于兼容性问题，建议安装该版本：npm install compression-webpack-plugin@5.0.1
- 添加配置：
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
configureWebpack: () => {
if (process.env.NODE_ENV === "production") {
return {
plugins: [
new CompressionPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.html$|\.css/,
threshold: 10240
})
]
};
}
}
};
- 执行命令：
npm run build
- 服务端配置（nginx示例）：
location / {
root html/;
try_files $uri $uri/ /index.html;
# 下面是添加的gip相关配置
gzip on;
gzip_static on;
gzip_http_version 1.1;
gzip_comp_level 3;
gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
}
其他要点
base64编码
对于一些前端样式中引用的小图片，webpack会自动处理将其转换成base64编码的字符串格式，从而减少图片的请求次数（否则只能通过请求该图片的地址获取）
npm命令参考
https://blog.csdn.net/mezheng/article/details/79650816
CSS预编译器-Sass使用参考
安装：
npm install node-sass --save-dev
// 安装node-sass将sass代码转成CSS代码
npm install sass-loader --save-dev
//安装sass-loader使得webpack能够理解sass，从而能使用其功能
// 如果使用报错则可能是版本过高的原因，此时可以通过下面命令卸载当前版本，并下载兼容版本
// 或者在package.json文件中修改版本后，重新执行命令：npm install即可
// npm uninstall sass-loader
// npm install sass-loader@7.3.1 --save-dev
此时在脚手架的组件当中编写时，进行下面的配置后即可编写sass代码：
<style scoped lang="scss">
// 在这里面编写sass代码
</style>
字体图标参考
推荐阿里巴巴矢量库
restful规范参考
https://www.cnblogs.com/Erik_Xu/p/9011013.html
https://www.cnblogs.com/WayneZeng/p/9290798.html
网上求助时共享代码参考
vscode参考
vscode使用参考
https://www.jianshu.com/p/e3ab7b6b6a23
