Vue入门

1.创建vue项目，在work_place文件夹（自创）下输入cmd，输入vue create 项目名

2.创建好后进入到项目路径，输入npm run serve 启动项目

3.还需要导入element和Axios，输入Vue add element和cnpm install axios --save，这样一个初始结构就创好

4.打开HBbuilder，从work_place导入创建的项目

5.在components创建一个三个vue

6.A，B和myfirst中代码：

<template>
	<div>AAAAAAAAAA
	<br>
	<router-link to="/" class="h1">返回</router-link>
	</div>
</template>
<script>
</script>
<style>
</style>

<template>
	<div>
		我的第一个网页
		<br>
		<router-link to='/a' class="h1">跳转到A页面</router-link>
		&nbsp;&nbsp;
		<router-link to='/b' class="h1">跳转到B页面</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
</script>

<style>
</style>

7.index.vue:

定义了一个路由对象 routes，该路由对象只有一个子项。路由对象的 path 属性为根路径 '/'，name 属性为 'myfirst'， component 属性为 myfirst 组件，children 属性为包含两个子路由对象的数组。子路由对象 A 的 path 为 '/a'，name 为 'A'， component 为 A 组件；子路由对象 B 的 path 为 '/b'，name 为 'B'，component 为 B 组件。这个路由对象可以用于 Vue Router 实例的 routes 属性。

import Vue from 'vue'
import VueRouter from 'vue-router'
import myfirst from '../components/myfirst.vue'
import A from '../components/A.vue'
import B from '../components/B.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'myfirst',
    component: myfirst,
	children:
	[{
		path:'/a',
		  name:"A",
		  component:A
		},
			{
			  path:'/b',
			  name:"B",
			  component:B
		}
	]
	  
   

  }
]


const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

8.app.vue：

这是一个Vue.js的模板代码，其中<div id="app">是应用程序的根元素，<router-view>是Vue Router的组件，负责渲染应用程序的不同页面视图。样式中#app设置了应用程序根元素的样式，使其居中并在顶部有一定的间距。

<template>
  <div id="app">
	<router-view></router-view>
  </div>
</template>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

9. 此时一个简单页面就写好了，效果如下：