前端-VUE模块开发学习笔记

项目基本认识

一个.vue文件：是一个模块。可以是一个页面的全部内容，也可以是一个文件的部分内容。

1. vnc-cli项目mystudy导入Hbuilder：文档–>打开目录，选择的文件导入
2. 启动服务 npm run serve
   
   
   打开浏览器：http://localhost:8080/
   

public–>index.html :首页 。
内容只有一个div。
首页内容来源：运行index.html文件，同时加载views–>main.js文件

render：重新加载 重新加载App文件（位置在import中显示）
用App中内容替换index.html中的div标签

<router-link to="/">Home</router-link>  相当于a标签 to相当于href
<router-view/>   相当于iframe iframe有边框  但只加载内容，也可以被爬虫爬到
					内容在main.js文件中 的router（import标注roter地址） 

@：表示src目录

语法 import export

scirpt src 引用两个js文件，两个js文件中内容会有冲突。
export import 解决不同js文件中冲突问题

1.js文件：
	let a = 1
	let b = 2	
	export default {  json
 	a: a,
 	b: b
 	}
2.js文件：
	let a = 10
	let b = 20
	export default {  json
 	a: a,
 	b: b
 	}
 引用：
 	import one from ’./1‘
 	import two from ’./2‘
 	console.log(one.a)
 	console.log(two.a)

引入elementui

在项目目录中

清空项目

删views中的文件 删除router–>index.js对其的引用
删components中helloworld 删App.vue对其的引用

新建vue文件

1. 位置：views components
2. 创建vue文件后，写好，在router中引入

vue:
<template>
	<div>
		{{text}}
	</div>
</template>
<script>
	export default {
		name: 'Index',
		data(){
			return {
				text: '这是首页'
			}
		}
	}
</script>
<style>
</style>

router:
import Index from '@/views/index'
Vue.use(VueRouter)
const routes = [
  {
   path: '/',
   name: 'Index',
   component: Index
  }
]

App.vue:
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

自定义vue模板