亲宝软件园·资讯

展开

vue-cli搭建SPA项目

七月472 人气:0

一、vue-cli构建SPA项目及SPA项目结构介绍

vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:

vue init webpack xxx

注:xxx 为自己创建项目的名称;必须先安装vue,vue-cli,webpack,node等一些必要的环境

1.1利用vue-cli构建SPA

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

-g:js依赖会下载到node_global中

-s:会被打包(安装到dependencies里面)

-d:只会在开发环境中被依赖

1.2spa的访问过程:

(1)访问index.html

(2)index.html通过main.js中的vue实例管理#app边界,同时指定App.vue模板

(3)App.vue中包含了图片以及锚点,而锚点与组件的对应关系存在router/index.js中,所以就指向了一个组件

(4)最终App.vue中就显示了logo图片以及helloworld.vue的内容

1.3如何安装vue-cli命令

npm install -g vue-cli

该行命令在哪里的cmd窗口执行都可以(根目录、管理员窗口等)

npm install webpack -g

以上命令ok后,构建spa项目

vue init webpack xiaokun_spa此命令用于创建SPA项目,它会在当前目录生成一个以“xiaokun_spa”命名的文件夹

注:xiaokun_spa文件夹则为项目名,项目名不能用中文或大写字母

这样spa项目就创建好了,这边使用HBuilder X导入

导入后,我们来认识一下,其中的类

更改端口号8080——>8083:

spa访问过程:

1.访问index.html

2.index.html通过main.js中的vue实例管理#app边界,同时指定APP.vue模板

3.APP.vue中包含了logo图片以及锚点,而锚点与组件的对应关系存在router/index.js中,所有就指向了一个组件

4.最终APP.vue中就显示了logo图片以及helloworld.vue的内容

二、SPA完成路由的开发

步骤

1、引入路由js依赖:main.js中已经完成

2、定义组件:呈现形式是以.vue文件展示

template标签中定义组件内容

通过export default指定组件的名字

3、定义路由与组件之间的对应关系

router/index.js文件中进行定义

4、获取路由对象:main.js中已经完成

5、挂载Vue实例:main.js中已经完成

6、定义锚点:App.vue 使用 router-view

7、触发事件:App.vue 使用 router-link to

Home.vue:

<template>
  <div>
    这是首页内容,展示最新的10篇博客
  </div>
</template>
 
<script>
  export default {
    name: 'Home',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
 
<style>
</style>

About.vue:

<template>
  <div>
    这是关于本站显示的内容区域,本站的发展史...
  </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">
    <!-- 触发事件-->
    <router-link to="/Home">首页</router-link>
    <router-link to="/About">关于</router-link>
   <!-- <img src="./assets/logo.png"> -->
    <!-- 锚点-->
    <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>站长</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.定义路由与组件的对应关系
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.生成路由对象
export default new Router({
  routes: [
    {
      path: '/',
			// 这个可要可不用
      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>
		<!-- 这是关于本站的内容区域,本站的发展史... -->
		<!-- 触发事件 -->
		<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 {
				
			};
		}
	}
</script>
 
<style>
 
</style>

加载全部内容

相关教程
猜你喜欢
用户评论