vue 把所有前端视图统一组件化封装到.vue结尾的文件中,vue文件彼此可以互相引用;类似html的包含引用;组件可以声明为全局组件(工程级),局部组件(在引用处引入);完整的一个前端页面包含多个 vue文件;
工程目录介绍
- 如下图所示:
-
src/component: 各类业务组件,前端可视化组件的开发空间(developer主要工作空间)
-
src/router: 路由空间,前端浏览器导航栏url路由策略( 使用
vue create
并没有创建,手动创建) -
APP.vue: 根component,业务组件的引用实例化在这个目录(可编辑更改),局部注册使用;
-
main.js: vue实例初始化,各类包的注入文件;(加载router工具,加载mount位置)
-
vue.config.js: vue配置文件(例如:代理配置-解决cors问题)
-
component示例
业务组件全是 .vue结尾的文件,文件内容大致包含dom元素(html\css)、vue-js信息、包信息3个类别
一个较完整的vue文件示例:
<script setup>
<!--包信息 -->
import { ref } from 'vue'
<!--类似js的一些写法内容 -->
const count = ref(0)
function increment() {
count.value++
}
</script>
<!--类似html组件的一些写法内容 和vue的js内容结合,形成动态网页-->
<template>
<button @click="increment" id="click-button">
{{ count }}
</button>
</template>
<!--类似css的写法内容,形成网页风格信息-->
<style scoped>
#content {
display: inline-block;
margin-left: 15px;
position: fixed;
}
#logoimg {
width: 120px;
height: 30px;
}
</style>
router路由信息
前端组件和访问请求直接的路由关系,组件的action以及url的路径可以控制通过路由策略转到对应的vue组件进行页面渲染; 例如用来做 导航的跳转
前提:安装vue-router
:
# 命令npm
npm install vue-router
一个 router-js文件的配置内容示例
<!--路由包包信息 -->
import { createWebHistory, createRouter } from "vue-router";
<!--分发的组件信息 -->
import HelloWorld from '@/components/HelloWorld.vue'
import DateTable from '@/components/DateTable.vue';
const routes = [
{
path: "/", <!-- 浏览器导航访问/, 就加载DateTable这个组件 -->
name: "Home",
component: DateTable,
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
APP.vue根组件
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<!-- 引入一个vue组件,组件名称:HelloWorld -->
<HelloWorld msg="Welcome to Your Vue.js App"/>
<button @click="increment">
{{ count }}
</button>
</template>
- 一个前端页面由很多个vue组件形成;例如常规的 导航栏.vue、内容栏.vue、网站地图.vue; 这些大大小小的vue文件,组成一个个用户界面;如果转换成一个属性就够,类似官网下图的举例
App (root component)
├─ TodoList ------ 一个vue文件
│ └─ TodoItem ------ 一个vue文件
│ ├─ TodoDeleteButton ------ 一个vue文件
│ └─ TodoEditButton ------ 一个vue文件
└─ TodoFooter ------ 一个vue文件
├─ TodoClearButton ------ 一个vue文件
└─ TodoStatistics ------ 一个vue文件
vue模板组件,只有在mount后vue-nodes运行加载才会渲染出来,不mount它就是一个静态的代码块;
app.mount(一个实际的页面dom元素--例如一个div组件的id)
mount后组件属性结构就按照代码编写的逻辑进行渲染,形成我们熟悉的html+css+js用户界面;
根据这个逻辑:vue.js 这个框架,可以用来嵌入到一个非vue的前端工程中,慢慢改造自己的工程
main.js工程实例
初始化一个vue实例: 可以通过use()函数注入需要的包,可以通过mount()函数挂载一个容器
<!-- 引入createAPP 函数,创建一个vue应用实例 -->
import { createApp } from 'vue'
<!-- 从一个单文件组件中导入根组件 -->
import App from './App.vue'
const app = createApp(App)
实际工程开发,需要对很多的文件和组件进行封装提高易用性和可维护性,这里不赘述