安装vue-cli、vuex

npm/cnpm install vue-cli -g
npm/cnpm uninstall vue-cli -g  不要用分号,不然会报错 卸载命令
vue -V 如果已经安装,不需要执行上面的命令,可以通过这句话来查看vue版本


vue init webpack my-project

如果原本安装的vue-cli出现问题,可以卸载后再重装。

npm install vuex -S
这里需要注意的是项目名不能为vuex。


Vue CLIVue Create App)是一个用于快速搭建 Vue.js 项目的脚手架工具。要将 Vuex 引入到 Vue CLI 项目中,你需要按照以下步骤操作: 1. 安装Vuex:打开终端,进入你的项目目录,运行`npm install vuex --save` 或者 `yarn add vuex` 来安装Vuex库。 2. 创建store文件夹:在项目的`src`文件夹下创建一个名为`store`的新文件夹,这是Vuex store(状态管理模块)通常存放的位置。 3. 创建store.js文件:在`store`文件夹内,新建一个名为`index.js`(或者其他你喜欢的名字)的文件,这里会编写Vuex的状态行动逻辑。 4. 配置store:在`store/index.js`中,首先导入Vuex库,然后创建一个新的store实例,并设置初始state。例如: ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 初始化状态 }, mutations: { // 更新状态的方法 }, actions: { // 触发异步操作的方法 }, getters: { // 计算属性 } }) ``` 5. 使用store:要在组件中访问修改state,需要通过注入`store`实例。在你的组件选项(如`setup`函数)中,可以这样做: ```javascript import { useStore } from '@/store' const store = useStore() // 在组件内的方法里,可以通过store.state, store.commit等方法来操作state ``` 6. 全局注册store:如果你希望在所有组件中都能直接使用store,可以在`main.js`或其他合适的地方全局注册store: ```javascript import store from '@/store' // 然后在Vue实例上挂载store new Vue({ store, // ... }).$mount('#app') ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值