自定义创建项目、ESLint、Vuex

自定义创建项目：基于VueCli自定义创建项目架子

安装脚手架->创建项目->选择自定义->BAbel/Router/CSS/Linter

路由配置项很多，希望创建项目时就把架子搭好

hash模式和history模式  页面跳转和加载模式

Vue为单页面，只有一个HTML物理文件。通过路由系统将项目组件与URL路径绑定。一个HTML物理文件，切换页面时既需要让访问的URL路径变，又不能触发HTML物理文件重新加载，就使得VueRouter的跳页模式不能使用普通的超链接方式。

hash模式：使用锚点技术重写URL访问路径，在原有URL路径后拼接/#/xxx

显示新Dom对象，隐藏旧dom对象  hash模式是纯静态路由

history模式：直接重写url，视觉上更美观  不是纯静态路由

Use history node  for router?n

ESLint+Standard config无分号规范

Lint on save保存时校验

In dedicated config file放在单独的文件里，便于管理

ESLint自动修复

设置->（右上角）打开设置

//当保存的时候，ESLint自动帮我们修复错误
"editor.codeActionsOnSave":{
  "source.fixAll":true
},
//保存代码，不自动格式化
"editor.formatOnSave":false

Vuex状态管理工具  管理vue通用的数据（多组件共享的数据）

场景：某个状态在很多个组件来使用（个人信息）；多个组件共同维护一份数据

优势：共同维护一份数据，数据集中化管理；响应式变化；操作简洁（Vuex提供了辅助函数）

基于脚手架创建项目，构建Vuex（多组件数据共享）环境

创建项目，创建三组件，

安装Vuex插件，初始化一个空仓库：安装Vuex@3->新建store文件夹/index.js专门放Vuex->Vue.use(Vuex)创建仓库new Vuex.Store()->main.js中导入挂载        检验：App.vue中打印（this.$store）

state状态

给仓库提供数据：store中state提供唯一的公共数据源

//创建仓库
const store=new Vuex.store({
  //state状态，即数据，类似与vue组件中的data
  //区别：data：是组件自己的数据;state:所有组件共享的数据
  state:{
    count:101
  }
})

使用仓库数据：

1通过store直接访问

获取store
(1)this.$store
(2)import导入store
模板中：{{$store.state.xxx}}
组件逻辑中：this.store.state.xxx
JS模块中：store.state.xxx

2通过辅助函数（简化） 

{{count}}
computed:{
  count(){
    retun this.$store.state.count
  }
}

mapState是辅助函数，帮我们把store中数据自动映射到组件的计算属性中

导入import {mapState} from 'vuex'

->数组方式引入state   mapStat(['count','title'])

->展开运算映射符  在computed：{}中写...mapStat(['count','title'])，页面中使用直接{{count}}

mutations修改数据

通过stric:true可以开启严格模式：利于初学者检测代码，上线时需要关闭

vuex遵循单项数据流，组件中不能直接修改数据，state数据只能通过mutations来修改

所有mutations函数，第一个参数都是state    mutations：{对数据操作的函数（state,其他参数如n） state.count+=n}

子组件调用时this.$store.commit('函数名字'，n)