项目基本认识
一个.vue文件:是一个模块。可以是一个页面的全部内容,也可以是一个文件的部分内容。
- vnc-cli项目mystudy导入Hbuilder:文档–>打开目录,选择的文件导入
- 启动服务 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文件
- 位置:views components
- 创建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模板