Vue的版本是^2.6.10
vue-router的版本是^3.0.3
vue-/cli-service的版本是^3.8.0
1.
cli创建的默认工程，route对应的component option里面，使用了字符串template, 访问时会报如下错误：
[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
要修复这个问题，要在vue.config.js里面，添加 runtimeCompiler： true选项。而不是网上说的在webpack.config.js里面配置alias。这个webpack的配置对我生成的项目不起作用。
2.
axios请求本地的mock json，需要把mock文件放在public目录下。比如：
public
---- mock
---- list.json
src
---- components
---- MyComponent.vue
MyComponent的axios的请求要如下写
axios.get('../../mock/list.json')
因为public目录里面存放了不需要修改的静态文件，可以被直接访问。
网上写的放在根目录下的static目录中的方法不起作用。
3.
Debug vue的代码，如果是默认设置，并且浏览器开启了map选项，那么可以在代码里写上
debugger
浏览器就会在这个命令处停止，然后就可以看到源文件进行debug了。
4
用Store模式使用数据时，数组要注意
Store：
export default {
isDebug: true,
/*
Define the type of {} object to avoid below TS compile error.
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
No index signature with a parameter of type 'string' was found on type '{}'.
*/
state: {
dataList: [],
} as { [key: string]: any },
setDataList(newDataList: any[]) {
if (this.isDebug) {
console.info('setDataList was called');
console.info('new dataList is ' + JSON.stringify(newDataList));
}
this.state.dataList = newDataList;
},
...
};
Component
{{data.desc}}
@Component
export default class DataComponent {
_dataList = null;
sharedStore = Store;
public get dataList () {
return this.sharedStore.state.dataList;
}
methodToSetNewDataList(){
this.sharedStore.setDataList([...]);
}
}
使用computed property的方式，让dataList属性实际上是直接使用Store中的数组。这样，当store的数组被设置成新的数组时，component就可以监听到变化。
如果是使用下面这种赋值的方式，Store中的数组被设置成新的数组后，component是无法监听到变化的。
我觉得这个是由于Store中的dataList和component的dataList指向了同一个数组。Store的dataList被设置成新数组了， 只会触发Store的dataList属性的变化。而component的dataList属性引用的仍旧是旧数组，实际没有变化/触发变化。
@Component
export default class DataComponent {
dataList = null;
sharedStore = Store;
created(){
this.dataList = this.sharedStore.state.dataList;
}
}
5.
Component的$root对象指向的是根Vue应用。
Component的$parent对象指向的是component所属的父Component。