项目前期知识点储备
项目的搭建
- 前端项目搭建
- github命令
1 | git checkout -p 分支名称//创建新的分支并切换分支用于开发 |
项目知识点
- 电商项目概述
项目概述
电商后台管理系统的开发模式(前后端分离)
项目使用到的技术栈
- jwt:JSON Web Token（JWT）是一个开放标准（RFC 7519），它定义了一种紧凑且独立的方式，可以在各方之间作为JSON对象安全地传输信息。此信息可以通过数字签名进行验证和信任.
- 是目前最流行的跨域身份验证解决方案,携带token对信息进行加密操作.
- 不存在跨域是采用session作为身份的验证,存在卡余问题需要使用token的方式
- Sequelize框架:选择Node的*ORM(Object Relational Mapping对象关系映射)框架Sequelize来操作数据库。这样,我们读写的都是JavaScript对象,Sequelize帮我们把对象变成数据库中的行。用Sequelize*查询pets表
- jwt:JSON Web Token（JWT）是一个开放标准（RFC 7519），它定义了一种紧凑且独立的方式，可以在各方之间作为JSON对象安全地传输信息。此信息可以通过数字签名进行验证和信任.
登录token采用jwt解决跨域访问
项目优化
- 项目优化
- 通过命令参数的形式
1
2
3// 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report - 通过可视化的UI面板直接查看报告（推荐）
在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。为开发模式与发布模式指定不同的打包入口
- 在根目录中新建vue.config.js文件,配置见链接
1
2
3
4
5// vue.config.js
// 这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports = {
// 选项...
} - 为开发模式和打包模式设置不用的打包入口
- Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：
- ① 开发模式的入口文件为 src/main-dev.js
- ② 发布模式的入口文件为 src/main-prod.js
- Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：
- configureWebpack 和 chainWebpack
- 在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack的打包配置。
- 二者的差异
- CDN资源网站
- 默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在
externals 中的第三方依赖包，都不会被打包。 - 注意:这里设置router会报错,会报重复定义,解决方案删除router
- externals代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26module.exports = {
chainWebpack: config => {
//生产模式
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
//externals配置,是在开发模式中配置
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
})
//生产模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
注意:在引入CDN进行配置的过程中在生成模式下配置,开发模式下还是使用下载的插件等 - 同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用,注意引用的先后顺序,vue放在最前面,elementui插件时依赖于vue否则会报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" />
//js
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>路由懒加载
项目在被构建的时候js代码非常大,可以在组件需要加载的时候在加载组件换件服务器的压力 - 使用步骤
- ① 安装 @babel/plugin-syntax-dynamic-import 包。
- ② 在 babel.config.js 配置文件中声明该插件。
- ③ 将路由改为按需加载的形式，示例代码如下：这里返回的是proomise对象
1
2
3const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')项目上线
- 项目上线的相关配置
- 通过 node 创建 web 服务器。(通过nginx代理服务器也可以解决)
- 开启 gzip 配置。
- 配置 https 服务。
- 使用 pm2 管理应用。
通过node创建服务器
创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生成的 dist 文件夹，托管为静态资源即可1
2
3
4
5
6
7
8
9const express = require('express')
// 创建 web 服务器
const app = express()
// 托管静态资源
app.use(express.static('./dist'))
// 启动 web 服务器
app.listen(80, () => {
console.log('web server running at http://127.0.0.1')
})gzip配置
- 使用 gzip 可以减小文件体积，使传输速度更快,② 可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：
1
2
3
4
5
6// 安装相应包
npm install compression -S
// 导入包
const compression = require('compression');
// 启用中间件
app.use(compression());https服务配置
- 传统的 HTTP 协议传输的数据都是明文，不安全,采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全
- 申请 SSL 证书（https://freessl.org）
- ① 进入 https://freessl.cn/ 官网，输入要申请的域名并选择品牌。
- ② 输入自己的邮箱并选择相关选项。
- ③ 验证 DNS（在域名管理后台添加 TXT 记录）。
- ④ 验证通过之后，下载 SSL 证书（ full_chain.pem 公钥；private.key 私钥）。
- 在后台项目中导入证书
1
2
3
4
5
6
7const https = require('https');
const fs = require('fs');
const options = {
cert: fs.readFileSync('./full_chain.pem'),
key: fs.readFileSync('./private.key')
}
https.createServer(options, app).listen(443);使用pm2管理应用
- 在服务器中安装 pm2：npm i pm2 -g
- 启动项目：pm2 start 脚本 –name 自定义名称
- 查看运行项目：pm2 ls
- 重启项目：pm2 restart 自定义名称
- 停止项目：pm2 stop 自定义名称
- 删除项目：pm2 delete 自定义名称
小结
1.css中居中显示
1 | position: absolute; |
2.flex弹性布局,设置内容位置
1 | display: flex; |
3.element-ui中的form
1 | // form默认box-sizing:content-box(以内容为界限调整布局),这里设置为以边框为主 |
4.表单验证:注意是给form和item来添加属性prop和rules
5.elementui中组件名称就是类名,可以直接拿过来设置属性
6.绑定变量需要给属性添加动态绑定
7.绑定属性的true/false也要动态绑定
8.页面中创建的子路由显示home中的main部分
9.二级路由放置位置的理解:
路由的方式使用组件:二级路由显示位置 ,注意router-view是路由跳转的视图位置,在router的index.js中的结构目录决定的,当子路由放在哪个一级组件的下面,哪个一级组件下放router-view来展示一级组件对应的二级组件对应路由的位置
所以在一级组件中放置的router-view对应的是index.js中的最外层的路由放置的位置
各个子组件中的router-view是各个一级组件下放置的children下的子组件位置局部组件的使用:当直接使用局部封装的组件的时候,才需要将导入的.vue文件插入到父组件的对应位置(通过组件名的方式)
以上两种都需要将组件导入到对应的父组件中并且放在components中注册
10.elementui中ele-menu在点击的时候会默认跳转到点击的item的index的位置,在对表单的路由设置的时候可以开启menu的router属性,在需要路由跳转的位置将index的值设置为路由跳转的值就可以实现路由的跳转
同时如果需要修改点击对应的按钮就显示高亮的问题,可以使用menu的default-index,通过sessionStorage将当前的点击的index值保存起来,每次点击的时候直接赋值给data中的变量,根据data中的变量来显示当前保存的保存
11.elementui中提供栅格系统layout来设置空间的宽和高
12.作用域插槽中,可以通过scope.row获取当前行的数据
13.设置处置居中的方式
1 | .vcenter{ |
14.vue-table-with-tree-grid插件来实现tree table
15.数组和字符串的转化
数组->字符串
arr.join(‘ ‘);
字符串->数组
str.split(‘,’)
16.请求参数的封装会导致params参数不能及时拼接到axios的url中,问题有待解决https://blog.csdn.net/weixin_44827421/article/details/100060163
17.ES6中新增的字符串补全的方法
padStart(字符串个数,要不的数字) 用于头部补全；
padEnd() 用于尾部补全。
let strS = String(s).padStart(2, ‘0’)
18.富文本编辑器开发时依赖Vue-Quill-Editor
npm install vue-quill-editor –save
19.数据类型转换出现问题:解决方案:通过深拷贝的方式lodash工具包的使用,开发以依赖
20.级联选择器在使用中el-cascader,点击级联选择器之后是一个数组[],所以在保存当前选择的时候定义为数组[]
21.el中timeline在2.6版本之后才有
22.通过echarts框架来绘制报表https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
23.通过nprogress为自己的项目添加页面加载的进度条
使用在请求拦截和响应拦截中
24.打包优化过程中使用babel-plugin-transform-remove-console插件删除代码中console优化打包
25.vue.config.js文件中可以设置webpack的配置,设置webpack的打包配置有两种方式
- configureWebpack节点是用来定义webpack的打包配置,通过操作dom对象的形式修改默认的webpack设置
- chainWebpack链式打包.通过链式编程的形式来修改默认的webpack配置
- 二者区别在于:二者的作用相同
本文链接： https://sparkparis.github.io/2020/05/27/Vue-project-1/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
