最初创建的Vue项目结构

目录结构。browserslistrc暂时不用管，影响不大。参考网站：https://www.npmjs.com/package/browserslist.editorconfig编辑配置文件并使用它来与团队开发人员协作，用于代码之间样式和样式规范化的工具。EditorConfig项目包含用于定义编码样式的文件格式和一组文本编辑器插件，使编辑器能够读取文件格式并遵循定义的样式。.eslintrc.jsEslint插件的配置文件可以修改Eslint语法的规则//解决函数名和括号规则之间的空格问题:{'space-before-function-paren':0}的截图。prettierrc没有显示需要自己创建，这是一个Json格式的文件，也是控件格式{"semi":false,"singleQuote":true}。gitignore忽略用git提交的文件，否则项目太大，提交时间太长，所以一般使用默认。babel.config.js控制babel的js文件这是babel官网：https://www.babeljs.cn/docs/组件关系在Home.vue中引入HelloWorld.vue：在App.vue中引入Home.vue和About.vue：在@/router/index.js中配置路由：importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'importAboutfrom'../views/About.vue'Vue.use(VueRouter)constroutes=[{path:'/home',name:'Home',component:Home},{path:'/about',name:'About',component:About},{//页面跳转路径：'/',redirect:'/home'}]constrouter=newVueRouter({routes})exportdefaultApp.vue中的路由器组件中使用了链接，通过的理解类似于一个容器，容器中的东西可以随意替换或者嵌入Set，App是Vue项目的Root路由，而Home和About是它的子路径/home/about+----------------++------------------+|根||根||+------------+||+------------+|||主页||+------------>||关于|||||||||||+------------+||+------------+|+----------------++----------------+同理，可以创建这个路由的子路由，使用children，这个就是嵌套/home/list的路由/home/item+----------------++----------------+|根||根||+--------------+||+------------+|||主页||+------------>||主页||||+----------+||||+--------+|||||清单||||||项目|||||||||||||||||+----------+||||+--------+|||+--------------+||+------------+|+----------------++-----------------+