不过多介绍node安装与vue-cli安装配置，自行百度
1.新建vite项目
npm init vite@latest
选择vue，选择ts即可
生成依赖:npm install
启动项目:npm run dev
2.路由(router)配置
npm install vue-router -S
S代表save 代表保存，保存到我们的package.json文件下，别人用我们的项目的时候就可以直接install了
可以看到安装完，package.json就显示出了vue-router了在src文件夹下创建一个文件夹router，在router文件夹中新建一个index.ts文件
代码如下:
main.vue在下面
index.ts
import { createRouter, createWebHistory } from 'vue-router'
import main from '../views/main.vue'
export default createRouter({
routes: [
{
path: "/",
name: "main",
component: main
}
],
//createWebHistory 路由没/ ,createWebHashHistory 路由有/
history: createWebHistory(),
})
main.ts文件如下，引入route路由(相当于.NET 项目注入引入中间件)
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import route from './router'
createApp(App).use(route).mount('#app')
在src文件夹下新建一个views文件夹，在views文件夹中新建一个main.vue文件
main.vue
<template>
<div>这是main页面</div>
</template>
<script>
export default {
setup() {
return {}
},
}
</script>
<style lang="scss" scoped></style>
- 完成如上步骤，发现主页面还没有我在main页面放的文字：这是main页面
这是因为你没有在app.vue放路由页面，它就不会显示
app.vue
<template>
<router-view></router-view>
</template>
<script></script>
<style lang="scss" scoped></style>
3.引入Element plus
npm install element-plus --save
4. 引入Element 库及样式文件(全量引入)
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import route from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(route).use(ElementPlus).mount('#app')
5.引入sass
npm install sass -s
6.main页面如下:
点击查看代码
<template>
<div class="nav-pad">
<el-menu mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">文件下载</el-menu-item>
<el-menu-item index="3" disabled>图书仓库</el-menu-item>
<el-menu-item index="4">社区论坛</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
setup() {
return {}
},
}
</script>
<style lang="scss" scoped>
.nav-pad {
width: 80%;
margin: auto; //外边距设置自动属性则居中 两边外边距就相等
}
</style>
引入组件
在components文件夹下创建一个TopLoginPad.vue文件
TopLoginPad.vue
<template>
<div>
<span>注册</span>
<span>登录</span>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped></style>
在main.vue文件下引入组件
main
<template>
<div class="nav-pad">
<el-menu mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">文件下载</el-menu-item>
<el-menu-item index="3" disabled>图书仓库</el-menu-item>
<el-menu-item index="4">社区论坛</el-menu-item>
</el-menu>
</div>
<TopLoginPad />
</template>
<script setup lang="ts">
import TopLoginPad from '../components/TopLoginPad.vue'
</script>
<style lang="scss" scoped>
.nav-pad {
width: 80%;
margin: auto; //外边距设置自动属性则居中 两边外边距就相等
}
</style>
1.import组件
2.在html中调用组件即可
css样式flex学习
1.最大的盒子里加入css属性display: flex;
2.大的盒子里包的小盒子里标记flex属性值(数字) eg:flex:1;