1. vuex
不要在Mutation中做异步操作，需要做异步操作用action
action调用通过dispatch，Mutation通过commit
modules可以使用命名空间
严格模式下，修改state必须通过Mutation，否则无法记录更新历史，不要在生产环境下开启严格模式，会影响性能
vuex插件
const myPlugin = store => {
store.subscribe((mutation, state) => {
if (mutation.type.startsWith('cart/')) {
window.localStorage.setItem('cart-products', JSON.stringify(state.cart.cartProducts))
}
})
}
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
products,
cart
},
plugins: [myPlugin] // 插件
})
2. nuxt
2.1 asyncData
- asyncData只能在页面组件中使用
- 没有this,因为它是在组件初始化之前调用的
- asyneData中不能通过this.$route获取数据,通过下面的方法获取
async asyncData({ query }) {}
2.2 路由
自定义路由，在nuxt.config.js中删除路由，并自定义
module.exports = {
router: {
linkActiveClass: 'active',
extendRoutes(routes, resolve) {
// 清楚 Nuxt.js 基于 pages 目录默认生成的路由表规则
routes.splice(0)
routes.push(...[
{
path: '/',
component: resolve(__dirname, 'pages/layout/'),
}
]
}
}
}
3. 部署方式
- 最简单的部署方式
● 配置Host + Port
● 压缩发布包
● 把发布包传到服务端
● 解压
● 安装依赖
● 启动服务
pm2 start npm -- start
pm2 stop + id
image.png
-
自动化部署
image.png
ci/cd工具
Jenkins
Gitlab CI
GitHub Actions
Travis CI
Circle CI
. ..
生成github access token
生成：
image.png
image.png
image.png
image.png
配置到项目中
image.png
image.png
设置端口号，密码，用户名等
image.png
在项目根目录创建.github/workflows目录
下载main.yml到workflows目录中
https://gist.github.com/lipengzhou/b92f80142afa37aea397da47366bd872
修改配置
配置PM2配置文件
提交更新
查看自动部署状态
访问网站
提交更新..
打tag部署
git tag v1.0.1
git push origin v1.0.1
