前端技术点

nvm

nvm下载和安装

https://github.com/coreybutler/nvm-windows/releases

nvm常用命令

nvm list  
nvm use 
nvm install  xxx
nvm uninstall xxx

如何安装 pnpm

安装
npm i pnpm -g
pnpm -v

升级
pnpm add -g pnpm to update 

设置源： 
pnpm config get registry //查看源
pnpm config set registry https://registry.npmmirror.com //切换淘宝源 

安装项目依赖 
pnpm install
运行1个项目 
pnpm run dev

pnpm部署vue项目

pnpm create vite

安装saas、eslint

pnpm install -D eslint babel-eslint @vue/eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue

pnpm install -D sass

引入vue-router

pnpm install vue-router@4

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

安装pinia

pnpm install pinia @pinia/nuxt @nuxtjs/composition-api

创建nuxt.config.js

export default {
  // ... other options
  buildModules: [
    // Nuxt 2 only:
    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
}

main.js：

 import { createApp } from 'vue'
 import App from './App.vue'

 import { createPinia } from 'pinia'
 import piniaPluginPersist from 'pinia-plugin-persist'
 const pinia = createPinia()
 pinia.use(piniaPluginPersist )
 const app = createApp(App)
 app.use(pinia)
 app.mount('#app')

// store/index.js
import { defineStore } from 'pinia'

export default defineStore({
  state: () => {
    return {

    }
  },
  getters: () => {

  },

  actions: {
    userLogin () {...}
  }
})

使用pinia-plugin-persist

pnpm install pinia-plugin-persist

在store的文件中添加：
// 开启数据缓存
  persist: { 
    enabled: true
  }

组件中使用store：

import { loginStore } from '@/store/index.js'
const store = loginStore()
store.userLogin()  // 直接调用actions中的事件即可