vite+vue3 项目初始化

1设置代理解决跨域问题

    参考文章：https://xuexiluxian.cn/blog/detail/01f62baa85b7431992586b4689a9b07a

    API参考链接：https://staging-cn.vuejs.org/api/#onmounted

 

2 搭建项目

01 搭建项目 Vite + Vue3 ： https://xuexiluxian.cn/blog/detail/5e5d17f75af14e1586d3471f613e4586

    02 Vite + Vue项目安装router ： https://xuexiluxian.cn/blog/detail/0a44da50c0b440d6b8f591867f8909f5

    03 先做首页头部吧，先做准备工作 : https://xuexiluxian.cn/blog/detail/f6236ef0b71c4e7eb67d9796eb3ef17f

一、创建项目

命令：

npm init @vitejs/app saas

//这里注意，saas是项目名称，可以随便写

二、安装步骤的选择

三、启动项目

按照以上命令

 cd saas
 npm install
 npm run dev

四、项目启动啦

报错：

npm init vite@latest 报错

经过实验确实是node版本问题 升级到了16 以上

卸载安装node

报错2：

npm init vite <项目名称>
即可创建vite的项目

3 安装router

二、安装router

2.1 执行命令

npm install vue-router@4 -S

2.3 进入项目，创建router目录，再去创建index.js

三、配置src/router/index.js文件内容

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

四、在src目录新建views/Home.vue和About.vue

Home.vue和About.vue随便写入点内容即可

五、App.vue文件内容修改

<template>
	<router-view />
</template>

六、main.js挂载使用router

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";

createApp(App).use(router).mount('#app')

4 安装插件

    4.1 setup语法糖插件 ： unplugin-auto-import

        解决场景 ： 在组件中开发无需每次都引入 import { ref }..

        1. 下载安装

            npm i unplugin-auto-import -D

        2. 配置：vite.config.js中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router']
    })
  ]
 
})

配置@

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router']
    })
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

没有自动提示????

4.2 下载element-plus

Element Plus - The world's most popular Vue 3 UI framework

1 下载

 npm install element-plus --save

2 按需引入

npm install -D unplugin-vue-components unplugin-auto-import

在main,js中进行配置

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

4.3  引入css

1进入reset.css

网址：  CSS Tools: Reset CSS 

2 reset.css放入项目中

src/assets/css/reset.css

3 引入到main.js当中

import './assets/css/reset.css'

4 清除 style.css 当中的样式!!

测试：

npm run dev 

5头部组件编写代码

5.1  将图片导入

5.2 头部再很多网页中用到，所以是公共的

引入到home组件

 5.3  编写布局

1 引入图标：

<el-icon :size="22" color="#808080"><search /></el-icon>
<el-icon :size="24" color="#808080"><shopping-cart /></el-icon>



import { Search, ShoppingCart } from '@element-plus/icons-vue'

按需引入，注意是大写！！

2 logo 图片宽高100%都要设置

      

6 banner

6.1 navswipper

 有一个背景图，给大盒子添加

轮播图使用element-ui的跑马灯

 nav:

解决margin塌陷问题： 添加overflow:hidden

li:

走马灯：

 不用引入import

  <div class="swiper-item">
          <el-carousel>
            <el-carousel-item
              v-for="item in 4"
              :key="item"
              :interval="5000"
              arrow="always">
              <img
                src="https://oss.xuexiluxian.cn/xiaoluxianvcr/b51fb529113e4b5cb7fa68b22bb3642c.jpg"
                alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>

    .swiper-item {
        flex: 1;
        height: 460px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      /deep/ .el-carousel__container {
        height: 460px !important;
      }

父盒子设置宽高，图片设置宽高100%

7 新上好课

 

 1 hot:  长方形+ 小三角

2  列表

使用flex进行布局

 用css写出：蓝狐上有

动画：

   &:hover {

        transform: translateY(-7px);

      }

8 底部

公共组件

  <ul>
          <li>关于我们</li>
          <li>|</li>
          <li>联系我们</li>
          <li>|</li>
          <li>意见反馈</li>
          <li>|</li>
          <li>版权声明</li>
        </ul>

 ul {
        display: flex;
        margin-bottom: 5px;
        li {
          margin: 0 10px;
          color: #ffffff !important;
        }
      }