VueCli_DataSharing

基于VueCli创建项目

步骤一：新建一个文件夹【VueCli】步骤二：进入该文件在空白处按住shift+鼠标右键→选择【在此处打开Powershell窗口】步骤三：全局安装了 Vue CLI

npm install -g @vue/cli
vue create 项目名

（按上下箭头更换选项、按空格键勾选选项、按回车确认）步骤四：选择【Manually select features】步骤五：勾选【Babel】、【Router】、【CSS Pre-processors】、【Linter/Formatter】步骤六：选择【2.x】（注：选择vue2版本）步骤七：输入n（注：默认选择带#号哈希模式，不采用历史模式）步骤八：选择【use NPM】步骤九：选择【Less】步骤十：选择【ESLint+Standard config】（注：选择无分号规范）步骤十一：勾选【Lint on save】（注：在保存的时候校验）步骤十二：选择【In dedicated config files】（注：将配置文件放在单独的文件中）步骤十三：输入n 项目已创建成功最后：输入以下命令启动项目

cd 项目名
npm run dev

构建多组组件共享的数据环境

步骤一：进入文件夹D:\code\VSCode\practise\vue，并打开cmd终端步骤二：输入以下命令

vue create vuex-demo

（按上下箭头更换选项、按空格键勾选选项、按回车确认）步骤三：选择【Manually select features】步骤四：勾选【CSS Pre-processors】步骤五：选择【2.x】步骤六：选择【Less】步骤七：选择【ESLint + Standard config】步骤八：勾选【Lint on save】步骤九：选择【In dedicated config files】步骤十：输入n 自动创建vuex-demo成功步骤十一：在VSCode cd到D:\code\VSCode\practise\vue\vuex-demo并输入以下命令启动项目

npm run serve

创建一个空仓库

步骤一：装包

yarn add vuex@3

步骤二：在src文件内新建【store】仓库文件步骤三：在【store】仓库文件夹中新建【index.js】文件步骤四：在【index.js】文件中导包、Vuex插件、创建仓库、导出给main.js使用步骤五：在【main.js】文件中导入仓库、挂载仓库空仓库构建成功，以后所有组件都能拿到仓库里的数据

提供并访问数据

步骤一：在【store】仓库文件夹里的【index.js】文件中给仓库提供数据

const store = new Vuex.Store({
// 1、通过state提供数据（所有组件都共享的数据）
state: {
title: '唐茂凯',
count: 100
}
})

步骤二：使用数据方式1：通过store直接访问数据获取数据(模板中)：其他组件可通过 {{ $仓库.状态.属性 }}来渲染数据例如页面中：{{ $store.state.title }} 获取数据(组件中)：console.log(this.$store.state.title) 获取数据(JS模块中)：console.log(store.state.title) 方式2、：通过辅助函数访问数据步骤一：在其他组件中导入mapState 步骤二：往computed里配

import { mapState } from 'vuex'
computed: {
...mapState(['title'])
},

步骤三：在模板中直接写{{ title }}

基于VueCli创建项目及构建数据共享环境