快捷導(dǎo)航

使用vue-cli搭建SPA項(xiàng)目的詳細(xì)過(guò)程

更新時(shí)間：2022年09月14日 15:34:28 作者：七月472

vue-cli是vue.js的腳手架，用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板，本文通過(guò)實(shí)例代碼給大家介紹vue-cli搭建SPA項(xiàng)目的詳細(xì)過(guò)程，感興趣的朋友跟隨小編一起看看吧

一、vue-cli構(gòu)建SPA項(xiàng)目及SPA項(xiàng)目結(jié)構(gòu)介紹

vue-cli是vue.js的腳手架，用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板，創(chuàng)建命令如下：

vue init webpack xxx

注：xxx 為自己創(chuàng)建項(xiàng)目的名稱；必須先安裝vue,vue-cli，webpack，node等一些必要的環(huán)境

1.1利用vue-cli構(gòu)建SPA

安裝vue-cli命令-npm install (-g、-s、-d)

-g：js依賴會(huì)下載到node_global中

-s：會(huì)被打包（安裝到dependencies里面）

-d：只會(huì)在開(kāi)發(fā)環(huán)境中被依賴

1.2spa的訪問(wèn)過(guò)程：

（1）訪問(wèn)index.html

（2）index.html通過(guò)main.js中的vue實(shí)例管理#app邊界，同時(shí)指定App.vue模板

（3）App.vue中包含了圖片以及錨點(diǎn)，而錨點(diǎn)與組件的對(duì)應(yīng)關(guān)系存在router/index.js中，所以就指向了一個(gè)組件

（4）最終App.vue中就顯示了logo圖片以及helloworld.vue的內(nèi)容

1.3如何安裝vue-cli命令

npm install -g vue-cli

該行命令在哪里的cmd窗口執(zhí)行都可以(根目錄、管理員窗口等)

npm install webpack -g

以上命令ok后，構(gòu)建spa項(xiàng)目

vue init webpack xiaokun_spa此命令用于創(chuàng)建SPA項(xiàng)目，它會(huì)在當(dāng)前目錄生成一個(gè)以“xiaokun_spa”命名的文件夾

注：xiaokun_spa文件夾則為項(xiàng)目名，項(xiàng)目名不能用中文或大寫字母

這樣spa項(xiàng)目就創(chuàng)建好了，這邊使用HBuilder X導(dǎo)入

導(dǎo)入后，我們來(lái)認(rèn)識(shí)一下，其中的類

更改端口號(hào)8080——>8083：

spa訪問(wèn)過(guò)程：

1.訪問(wèn)index.html

2.index.html通過(guò)main.js中的vue實(shí)例管理#app邊界，同時(shí)指定APP.vue模板

3.APP.vue中包含了logo圖片以及錨點(diǎn)，而錨點(diǎn)與組件的對(duì)應(yīng)關(guān)系存在router/index.js中，所有就指向了一個(gè)組件

4.最終APP.vue中就顯示了logo圖片以及helloworld.vue的內(nèi)容

二、SPA完成路由的開(kāi)發(fā)

步驟

1、引入路由js依賴：main.js中已經(jīng)完成

2、定義組件：呈現(xiàn)形式是以.vue文件展示

template標(biāo)簽中定義組件內(nèi)容

通過(guò)export default指定組件的名字

3、定義路由與組件之間的對(duì)應(yīng)關(guān)系

router/index.js文件中進(jìn)行定義

4、獲取路由對(duì)象：main.js中已經(jīng)完成

5、掛載Vue實(shí)例：main.js中已經(jīng)完成

6、定義錨點(diǎn)：App.vue 使用 router-view

7、觸發(fā)事件：App.vue 使用 router-link to

Home.vue:

<template>
  <div>
    這是首頁(yè)內(nèi)容，展示最新的10篇博客
  </div>
</template>
 
<script>
  export default {
    name: 'Home',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
 
<style>
</style>

About.vue:

<template>
  <div>
    這是關(guān)于本站顯示的內(nèi)容區(qū)域，本站的發(fā)展史...
  </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">
    <!-- 觸發(fā)事件-->
    <router-link to="/Home">首頁(yè)</router-link>
    <router-link to="/About">關(guān)于</router-link>
   <!-- <img src="./assets/logo.png"> -->
    <!-- 錨點(diǎn)-->
    <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>

三、嵌套路由

children：[ ]

AboutMe.vue：

<template>
	<div>站長(zhǎng)</div>
</template>
 
<script>
	export default {
		name:'AboutMe',
		data() {
			return {
				
			};
		}
	}
</script>
 
<style>
 
</style>

AboutWebSite.vue：

<template>
	<div>本站</div>
</template>
 
<script>
	export default {
		name:'AboutWebSite',
		data() {
			return {
				
			};
		}
	}
</script>
 
<style>
 
</style>

index.js：

import Vue from 'vue'
import Router from 'vue-router'
// 3.定義路由與組件的對(duì)應(yīng)關(guān)系
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)
 
// 	4.生成路由對(duì)象
export default new Router({
  routes: [
    {
      path: '/',
			// 這個(gè)可要可不用
      name: 'Home',
      component: Home
    },
		{
			path: '/Home',
			name: 'Home',
			component: Home
		},
		{
			path: '/About',
			name: 'About',
			component: About
		},
		{
			path: '/AboutMe',
			name: 'AboutMe',
			component: AboutMe
		},
		{
			path: '/AboutWebSite',
			name: 'AboutWebSite',
			component: AboutWebSite
		}
  ]
})

About.vue：

<template>
	<div>
		<!-- 這是關(guān)于本站的內(nèi)容區(qū)域，本站的發(fā)展史... -->
		<!-- 觸發(fā)事件 -->
		<router-link to="/AboutMe">關(guān)于站長(zhǎng)</router-link>
		<router-link to="/AboutWebSite">關(guān)于本站</router-link>
		<!-- 定義錨點(diǎn) -->
		<router-view></router-view>
	</div>
</template>
 
<script>
	export default {
		name:'About',
		data() {
			return {
				
			};
		}
	}
</script>
 
<style>
 
</style>

到此這篇關(guān)于使用vue-cli搭建SPA項(xiàng)目的文章就介紹到這了,更多相關(guān)vue-cli搭建SPA項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: