二. spa项目入门
1.vue项目结构说明
build文件夹： 这个文件夹主要是进行webpack的一些配置
config文件夹
node_modules文件夹 ：存放npm install时根据package.json配置生成的npm安装包的文件夹
src文件夹：源码目录(开发中用得最多的文件夹)
2. 什么是*.vue文件
*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。
每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。
这三个部分分别代表了 html,js,css。
注1：不能直接把html代码包裹在<template></template>中，而是必须在里面方置一个html标签来包裹所有的代码
一般情况是使用<div></div>标签包含其它的代码(保证只有一个根元素)
<template> <div>...</div> </template>
注2：js代码写在<script>标签中，并通过export导出
<script> export default { name: 'App' } </script>
3.嵌套路由案例演示
3.1定义基本路由
（1）模板文件
<router-link to="/Home">首页</router-link> <router-link to="/About">关于</router-link>
（2）路由
在主路由中
{ path: '/Home', name: 'Home', component: Home }, { path: '/About', name: 'About', component: About },
3.2 定义子路由
在当前主路由中配置子路由
{ path: '/About', name: 'About', component: About, children:[ { { path: '/AboutMe', name: 'AboutMe', component: AboutMe }, { path: '/AboutWebsite', name: 'AboutWebsite', component: AboutWebsite }, } ] },
3.3分别定义两个子路由的模板文件
<template> <div> 关于本站介绍内容 </div> </template> <script> export default { name: 'AboutWebsite', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
<template> <div> 关于站长 </div> </template> <script> export default { name: 'AboutMe', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
3.4在主路由中挂载内容
<template> <div> <router-link to="/AboutMe">关于本站</router-link> <router-link to="/AboutWebsite">关于站长</router-link> <router-view></router-view> </div> </template>
测试效果
今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！
