建网站吧佛山网站建设技术托管
自定义创建项目：基于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":falsevuex状态管理工具 管理vue通用的数据（多组件共享的数据）
场景：某个状态在很多个组件来使用（个人信息）；多个组件共同维护一份数据
优势：共同维护一份数据，数据集中化管理；响应式变化；操作简洁（vuex提供了辅助函数）
基于脚手架创建项目，构建vuex（多组件数据共享）环境
创建项目，创建三组件，
安装Vuex插件，初始化一个空仓库：安装vuex@3（都是小写）
->新建store文件夹/index.js专门放Vuex
->Vue.use(Vuex)创建仓库new Vuex.Store()
->main.js中导入挂载 检验：App.vue中打印（this.$store）
（类似于配置VueRouter，多了.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.xxx2通过辅助函数（简化）
{{count}}
computed:{count(){retune this.$store.state.count}
}mapState是辅助函数，帮我们把store中数据自动映射到组件的计算属性中
导入import {mapState} from 'vuex'
->数组方式引入state mapState(['count','title'])
->展开运算映射符 在computed：{}中写...mapState(['count','title'])，页面中使用直接{{count}}
mutations修改数据
通过strict:true可以开启严格模式：利于初学者检测代码，上线时需要关闭
vuex遵循单项数据流，组件中不能直接修改数据，state数据只能通过mutations来修改
所有mutations函数，第一个参数都是state mutations：{对数据操作的函数（state,其他参数如n） state.count+=n}
子组件调用时this.$store.commit('函数名字'，n)
mutations练习：输入框值和state值双向绑定
1输入框内容渲染：value
2监听输入获取内容@input=“handleInput”
3封装mutations处理函数 mutations：{changeCount（state，newCount）{}}
4调用传参commit调用 handleInput（e）{this.$store.commit('changeCount',num)}
辅助函数mapMutations(类似于mapState)
导入import {mapState,mapMutations} from 'vuex'
->数组方式引入state mapMutations(['subCount'])
->展开运算映射符 在methods：{}中写...mapMutations(['subCount'])，页面中使用直接this.subCount(10)调用
actions处理异步操作
mutations必须是同步的（便于监测数据变化，记录调试）
1提供actions方法，不能直接操作state
//context上下文(此处未分模块，可以当成store仓库)
actions：{setAsynCount (context,num){//一秒后给一个数去修改numsetTimeout(()=>{context.commit('changeCount',num)},1000)}
}2页面中dispatch调用
this.$store.dispatch('setAsyncCount',200)mapActions
导入import {mapState,mapMutations,mapActions} from 'vuex'
->数组方式引入state mapActions(['changeCountAction'])
->展开运算映射符 在methods：{}中写...mapActions(['changeCountAction'])，页面中使用直接this.changeCountAction(666)调用
getters(类似于计算属性)
1定义getters
getters:{//getters函数第一个参数是state,必须要有返回值filterList(state)//过滤{return state.list.filter(item=>item>5)}
}2访问getters
通过store访问getters
{{$store.getters.filterList}}通过辅助函数mapGetters映射
computed:{...mapGetters(['filterList'])},{{filterList}}模块module（进阶语法）
vuex使用单一状态树，应用的所有状态会集中到一个较大的对象。store对象可能变得臃肿。
user模块：store/modules/user.js
const state={userInfo:{name}
}
const mutations={}
const actions={}
const getters={}
export default{state,mutations,actions,getters
}import users from './modeuls/user'
const store = new Vuex.store({modules:{user}
})1直接通过模块名访问
多个参数封装成对象传递{id,newCount},接收时额外参数就是obj
$store.state.模块名.xxx
$store.getters['模块名/xxx']
$store.commit('模块名/xxx',额外参数)//mutations
$store.dispatch('模块名/xxx',额外参数)//action2通过mapState映射
子模块的映射...mapState('模块名'，['xxx'])、...mapGetters('模块名'，['xxx'])、...mapMutations('模块名'、...mapActions('模块名'，['xxx'])，['xxx'])需要开启命名空间：在模块内导出部分export default{}加上namespaced：true，