一、通过vue-cli脚手架构建SPA项目

1.安装vue-cli

npm install -g vue-cli
npm install -g webpack

 安装成功后，会出现如下文件：
     D:\initPath
          node-v10.15.3-win-x64
            node_global
              vue
              vue.cmd 
              vue-init
              vue-init.cmd
              vue-list
              vue-list.cmd

 

步骤一：使用脚手架创建项目骨架

此步骤可理解成：使用eclipse创建一个maven的web项目

在项目存储位置输入cmd进入黑窗口输入vue init webpack spa进行问答模式

输入：vue init webpack spa

：“一问一答”模式
      1.Project name：项目名，默认是输入时的那个名称spa1，直接回车 
      2.Project description：项目描述，直接回车
      3.Author：作者，随便填或直接回车y
      4.Vue build：选择题，一般选第一个
      4.1Runtime + Compiler: recommended for most users//运行加编译，官方推荐，就选它了
      4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files 

- render functions are required elsewhere//仅运行时，已经有推荐了就选择第一个了
ll vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
      6.Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N  新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法
      7.Set up unit tests：是否安装单元测试 N
      8.Setup e2e tests with Nightwatch?：是否安装e2e测试  N
      9.Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
        > Yes, use NPM                    
          Yes, use Yarn
          No, I will handle that myself     //选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖
 

全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成
 # Project initialization finished!
 # ======================== 
 
 实在不会选，就回车选择“默认”或是选择“N”不安装

步骤二：运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块

此步骤可理解成：maven的web项目创建成功后，修改pom文件添加依赖

cd spa1                                  #改变路径到spa1文件夹下
npm install                              #安装所有项目需要的npm模块

步骤三：启动并访问项目

此步骤可理解成：启动tomcat，并通过浏览器访问项目

cd spa npm run dev

依次执行之后就会弹出一个网址：http://localhost:8080

二、基于SPA项目的组件开发流程

我们的开发模式是前后端分离的开发模式，所以我们需要一个后端服务器跟一个前端服务器，之后开发要开一个前端跟一个Tomcat ， 如果端口不改的话就会端口冲突，所以要进行修改，在项目里面config里面的index.js修改：

     config --> index.js  
     dev: {
       // Paths
       assetsSubDirectory: 'static',
       assetsPublicPath: '/',
       proxyTable: {},
       host: 'localhost', 
       port: 8081,       // 在这里修改端口号
       autoOpenBrowser: false,
       errorOverlay: true,
       notifyOnErrors: true,
     },

 

凡是以vue结尾的都是组件

如上图所示，所看到的不是index.html页面 index.html是一个入口，以后不用写任何代码，看到的是App.vue这个组件，真正的入口是mian.js，mian.js将App.vue绑定到了index.html

所以页面看到的整个大页面是index.html , index.html包了一个App.vue组件，如图

图片在App.vue里面，图片下面又定义了锚点（关于锚点vue的上一篇博客有讲到）

 

 

 

 

第一步：把App里面的图片干掉

第二步：新建一个以vue结尾的文件（Home）可以参照HelloWorld.vue来写

Home.vue:

<template><div>首页</div>
</template><script>export default {name: 'Home',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

进入index.js修改访问路径，把原本的HelloWorld修改为Home：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home}]
})

 

总代码：

App.vue:

<template><div id="app"><router-link to="/Home">首页</router-link><router-link to="/Abort">关于</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

Abort.vue:

<template><div>显示站长及网站相关信息</div>
</template><script>export default {name: 'Abort',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

 Home.vue:

<template><div>此处显示所有的博客内容</div>
</template><script>export default {name: 'Home',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

index.js:配置跳转路径：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Abort from '@/components/Abort'Vue.use(Router)export default new Router({routes: [{path: '/Home',name: 'Home',component: Home},{path: '/Abort',name: 'Abort',component: Abort}]
})

 

三、嵌套路由

AbortMe.vue:

<template><div>展示站长工作经验以及资历……</div>
</template><script>export default {name: 'AbortMe',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

AbortWebSite.vue：

<template><div>展示网站建设的意义以及发展历史、愿景……</div>
</template><script>export default {name: 'AbortWebSite',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

Abort.vue：

<template><div><router-link to="/AbortMe">关于站长</router-link><router-link to="/AbortWebSite">关于本站</router-link><router-view></router-view></div>
</template><script>export default {name: 'Abort',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

index.js配置：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Abort from '@/components/Abort'
import AbortMe from '@/components/AbortMe'
import AbortWebSite from '@/components/AbortWebSite'Vue.use(Router)export default new Router({routes: [{path: '/Home',name: 'Home',component: Home},{path: '/Abort',name: 'Abort',component: Abort,/* 嵌套*/children: [{path: '/AbortWebSite',name: 'AbortWebSite',component: AbortWebSite},{path: '/AbortMe',name: 'AbortMe',component: AbortMe,}]}]})

 

感谢观看！