使用pnpm+vite创建vue
(踩坑中……)目录一、创建项目步骤二、vite使用记录1、vite使用eslint2、vite 使用sass,不需要安装sass-loader:3、vite使用mock:4、vite使用axios5、vite使用vue-router6.使用pinia7.使用pinia-plugin-persist一、创建项目步骤没得axios/vueRouter,啥都要自行安装pnpm安装:https://blo
·
(踩坑中……)
目录
一、创建项目步骤
没得axios/vueRouter,啥都要自行安装
pnpm安装:https://blog.csdn.net/xiao_cheng_/article/details/124247953
-
pnpm create vite
-
cd vite-project
-
pnpm install
-
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
- 使用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
}
更多推荐
已为社区贡献4条内容
所有评论(0)