架构和初始化

初始化 css

安装

npm i normalize.css -S

引入

• main.js 里面引入

import { createApp } from "vue";

import { createPinia } from "pinia";

import "normalize.css";

import App from "./App.vue";

import router from "./router";

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount("#app");

架构

目录结构

├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── layouts
│   ├── components
│   ├── router
│   ├── store
│   ├── utils
│   ├── pages
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── .editorconfig
├── .eslintrc.js
├── .prettierrc.cjs
├── README.md
└── vue.config.js

layouts 架构

├── layouts
│   ├── default
│   ├── login

default.vue

<template>
  <div>
    <div>头部</div>
    <RouterView></RouterView>
    <div>底部</div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

login.vue

<template>
  <div>
    <RouterView />
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

pages

├── pages
│   ├── index.vue
│   ├── login.vue

index.vue

<template>
  <div>首页</div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

login.vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
  import { ref } from "vue";
  const message = ref("登录页");
</script>

<style lang="scss" scoped></style>