vue3项目创建,安装element-plus,vuex使用

创建vue项目
npm init vue@latest
 cd vue-hello 先cd到创建好的项目目录下
 npm install
 npm run dev

安装element-plus

npm install element-puls --save

在main.js里粘贴

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)


1.安装vuex依赖包
npm install vuex --save
2.导入vuex包
import Vuex from ‘vuex’
Vue.use(Vuex)
3.创建store对像
const store = new Vuex.store({
	//state中存放的就是全局共享的数据
	state: { count: 0 }
})
store.js文件格式:

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(vuex)

export default new Vuex.Store({
	state:{
	
	},
	mutations:{

	},
	actions: {

	}
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,你需要安装 Node.js 和 npm。然后,可以按照以下步骤构建你的项目: 1. 创建项目文件夹并进入该文件夹: ``` mkdir my-project cd my-project ``` 2. 初始化项目: ``` npm init -y ``` 3. 安装 Vite: ``` npm install vite --save-dev ``` 4. 安装 Vue.js: ``` npm install vue@next --save ``` 5. 安装 TypeScript: ``` npm install typescript --save-dev ``` 6. 安装 Electron: ``` npm install electron --save-dev ``` 7. 安装 Element Plus: ``` npm install element-plus --save ``` 8. 安装 Vuex: ``` npm install vuex --save ``` 9. 创建 TypeScript 配置文件: ``` npx tsc --init ``` 10. 创建主进程和渲染进程的 Electron 入口文件: ``` // 主进程入口文件 main.js const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` ``` // 渲染进程入口文件 src/renderer/main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(router).use(store).use(ElementPlus).mount('#app') ``` 11. 创建 Vue 组件,例如 App.vue: ``` <template> <div id="app"> <router-view /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'App' }) </script> ``` 12. 创建 Vuex store,例如 store/index.ts: ``` import { createStore } from 'vuex' export default createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) ``` 13. 创建路由器,例如 router/index.ts: ``` import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` 14. 创建主页面组件,例如 views/Home.vue: ``` <template> <div> <h1>{{ message }}</h1> <button @click="increment">Increment</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { useStore } from 'vuex' export default defineComponent({ name: 'Home', setup () { const store = useStore() return { message: 'Hello, World!', increment () { store.commit('increment') } } } }) </script> ``` 15. 运行项目: ``` npm run dev ``` 以上就是使用 Vite、Vue.js、TypeScript、Electron、Element Plus 和 Vuex 构建项目的基本步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值