项目构建

Evergreen566
51 阅读1分钟

vite快速构建

vite官方文档：开始 | Vite 官方中文文档 (vitejs.cn)

npm init vue@latest
npm install
npm run dev

tsconfig.json配置别名路径

{
  "compilerOptions" : {
    "baseUrl" : "./",
    "paths" : {
      "@/*":["src/*"]
    }
  }
}

配置git仓库

git init # git 初始化
git remote add origin git@github.com:ShiJieCloud/vue-rabbit.git # 添加远程仓库地址
git branch -M main # 切换分支
git add . # 添加文件
git commit -m "init" # 提交
git push origin main # 推送远程仓库

ElementPlus导入

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
  1. 把下列代码插入到 vite.config.ts 配置文件中，即可实现自动按需导入。
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

更改elementPlus主题配置

安装sass

npm install sass -D

准备文件

  1. styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #27ba9b,
    ),
    'success': (
      // 成功色
      'base': #1dc779,
    ),
    'warning': (
      // 警告色
      'base': #ffb302,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
)
  1. 安装
npm i unplugin-element-plus -D
  1. vite.config.js配置：
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  },
})

axios安装

npm i axios

untils/http.ts中进行axios二次封装

import axios from 'axios'

// 创建axios实例
const http = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})

// axios请求拦截器
http.interceptors.request.use(config => {
  return config
}, e => Promise.reject(e))

// axios响应式拦截器
http.interceptors.response.use(res => res.data, e => {
  return Promise.reject(e)
})

export default http

静态资源引入

重置样式

在style目录下新建common.scss

// 重置样式
* {
    box-sizing: border-box;
  }
  
  html {
    height: 100%;
    font-size: 14px;
  }
  body {
    height: 100%;
    color: #333;
    min-width: 1240px;
    font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
      'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
      sans-serif;
  }
  body,
  ul,
  h1,
  h3,
  h4,
  p,
  dl,
  dd {
    padding: 0;
    margin: 0;
  }
  a {
    text-decoration: none;
    color: #333;
    outline: none;
  }
  i {
    font-style: normal;
  }
  input[type='text'],
  input[type='search'],
  input[type='password'],
  input[type='checkbox'] {
    padding: 0;
    outline: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    &::placeholder {
      color: #ccc;
    }
  }
  img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    background: #ebebeb no-repeat center / contain;
  }
  ul {
    list-style: none;
  }
  
  #app {
    background: #f5f5f5;
    user-select: none;
  }
  
  .container {
    width: 1240px;
    margin: 0 auto;
    position: relative;
  }
  .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .ellipsis-2 {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  .fl {
    float: left;
  }
  
  .fr {
    float: right;
  }
  
  .clearfix:after {
    content: '.';
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
  }
  
  // reset element
  .el-breadcrumb__inner.is-link {
    font-weight: 400 !important;
  }

新建var.scss存入色值变量

$mainColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

通过 vite.config.js 配置自动导入文件：

css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}

main.ts中添加

import '@/styles/common.scss';

修改logo

index.html中。icon的地址更改。 stylesheet中，引入阿里巴巴矢量图标库

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/chick.png">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>破星新闻</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
avatar
文章
阅读
粉丝