一. 利用vue-cli构建SPA项目
1.1 vue-cli是什么
vue-cli是一个用于快速搭建Vue.js项目的脚手架工具。用于自动生成vue.js+webpack的项目模板。它提供了一套命令行工具，可以帮助您初始化、配置和管理Vue.js项目的开发环境。
vue-cli简化了Vue.js项目的创建过程，它可以自动设置项目的基本结构、配置文件和依赖项。它还提供了一些预设配置选项，使您可以根据项目需求选择不同的特性和插件。
使用vue-cli，您可以轻松创建单页应用（SPA）或多页应用（MPA），并且可以选择使用Vue Router进行路由管理、Vuex进行状态管理等。它还支持使用ES6、TypeScript、CSS预处理器等进行开发。
通过使用vue-cli，您可以更快地开始Vue.js项目的开发，而无需手动设置项目结构和配置。它提供了一致的项目模板和工作流程，使您可以专注于编写业务逻辑和构建用户界面。
1.2 安装vue-cli
1.3 使用脚手架vue-cli来构建项目
1. 找到你使用的HBuildX的工作区间，输入cmd命令
2. 进入cmd窗口后输入vue init webpack xxx（xxx为项目名称，不能是中文和大写字母）
3. 创建完成后，会出现‘一问一答’模式，需要一一回答它的问题。
4. 全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成
5. 打开HBuildX，右键选择导入，选择从本地目录导入，然后就可以导入刚刚创建好的SPA项目。
6. 启动并访问项目，输入以下命令：
7. 打开浏览器输入"http://localhost:8080"即可
1.4 项目结构介绍
1.5 vue项目结构说明
二. 如何在SPA项目中使用路由
- 将原有的路由设置取消
- 自定义Home.vue文件和About.vue文件
- 修改src/router/index.js路由配置
- 触发事件
Home.vue文件
<template>
<div class="home">这是网站首页，花里胡哨的都在这里</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
About.vue文件
<template>
<!-- 在这里面有且只有一个根节点，否则运行时会报错 -->
<div class="about">这是创始人介绍以及网站发展史，就是吹大牛的</div>
</template>
<script>
export default {
name: 'About',
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 About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Home',
name: 'Home',
component: Home
},{
path: '/About',
name: 'About',
component: About
}
]
})
App.vue
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<router-link to="/Home">首页</router-link>
<router-link to="/About">关于本站</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>
效果：
三. 基于SPA项目完成嵌套路由
About.vue文件
<template>
<!-- 在这里面有且只有一个根节点，否则运行时会报错 -->
<div class="about">
<router-link to="/AboutMe">关于创始人</router-link>
<router-link to="/AboutWebsite">关于网站发展</router-link>
<router-view></router-view>
<!-- 这是创始人介绍以及网站发展史，就是吹大牛的 -->
</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
AboutMe.vue文件
<template>
<!-- 在这里面有且只有一个根节点，否则运行时会报错 -->
<div class="about">
这是创始人的介绍。
老板的马匹，不得不拍
</div>
</template>
<script>
export default {
name: 'AboutMe',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
AboutWebsite.vue文件
<template>
<!-- 在这里面有且只有一个根节点，否则运行时会报错 -->
<div class="about">
这是网站发展史。
吃法的家伙，不得不吹
</div>
</template>
<script>
export default {
name: 'AboutWebsite',
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 About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWebsite from '@/components/AboutWebsite'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Home',
name: 'Home',
component: Home
},{
path: '/About',
name: 'About',
component: About,
children:[
{
path: '/AboutMe',
name: 'AboutMe',
component: AboutMe
},
{
path: '/AboutWebsite',
name: 'AboutWebsite',
component: AboutWebsite
}
]
}
]
})
效果：
