使用pnpm+vite创建vue

(踩坑中……)

一、创建项目步骤

没得axios/vueRouter，啥都要自行安装
pnpm安装：https://blog.csdn.net/xiao_cheng_/article/details/124247953

1. pnpm create vite
   
   
   

2. cd vite-project

3. pnpm install

4. pnpm run dev

二、vite使用记录

1、vite使用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

2、vite 使用sass，不需要安装sass-loader：

pnpm install -D sass

1. 使用scss中的变量时报错：
   但是该scss文件在main.js中已经引入了，随后新建了一个scss文件并通过@import引入该文件，再使用变量时正常使用。不明白为什么

3、vite使用mock:

执行：pnpm install mockjs vite-plugin-mock -D
vite.config.js中：
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      supportTs: false, // 是否使用ts
      mockPath: './src/mock',
      watchFiles: true, // 监视文件更改
      prodEnabled: false, // 生产打包开关
      localEnabled: true // 开发打包开关
    })
  ]
})
src下新建mock文件夹和相应的mock数据文件

4、vite使用axios

测试API时页面报[vite] Internal server error: Cannot set properties of undefined (setting ‘isSelfAccepting’)
Plugin: vite:import-analysis的错误，原因貌似是vite.config.js中未配置server

5、vite使用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')

6.使用pinia

( Vue 的存储库，它允许您跨组件/页面共享状态，替代vuex)

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 () {...}
  }
})

组件中使用store：

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

7.使用pinia-plugin-persist

数据持久化

pnpm install pinia-plugin-persist

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