Vue配套工具
2022-09-08 16:18:01 0 举报AI智能生成
登录查看完整内容
Vue配套工具
作者其他创作
大纲/内容
npm uninstall vue-cli -g
yarn global remove vue-cli
删除Vue-cli
最新版：npm install -g @vue/cli
固定版： npm install -g @vue/cli@4.5.9
安装vue-cli
创建项目：vue create demo(项目名称)
启动项目： npm run serve
安装项目依赖： npm install
VueCLI 构建工具
作用：根据URL的不同，展示不同的内容
<router-link to="/">Home</router-link> 模板中使用的路由跳转标签
<router-view/>标签， 负责展示当前路由对应的组件内容
异步加载路由：component:( ) => import('../xxxx')
Vue-Router路由
作用: Vuex数据管理框架，VueX创建了一个全局唯一的仓库，用来存放全局的数据。
声明数据：state:{name:'jspang'}
获取数据：computed:{myName(){return this.$store.state.name;}}
步骤1. dispatch方法，派发action，名字叫做change：this.$store.dispatch('change')
编写/store/index.js下actions: change(){console.log('jspang.com')}
VueX的store自动感知到你派发出了一个叫做change的action，并执行action方法
步骤2.感知到change，这个action，执行store中actions下面的change方法
在/store/index下actions里编写:change( ){this.commit('change')}
步骤3.commit 提交一个叫做change的数据改变
在/store/index下muations里编写：change(){console.log('mutation')}
步骤4：mutation 感知到提交的change改变，执行change方法
在/store/index下muations里编写：change(){this.state.name="技术胖"}
步骤5：在Mutation里修改数据
修改数据
PS:在mutation里面只允许写同步代码，不允许写异步代码。如果要写异步操作，可以在actions里进行。
VueX语法
Vetur：VSCode中的代码提示工具
配套工具
0 条评论
回复 删除
下一页
