vue3+ts+sass初始化

# 安装vite环境

yarn create @vitejs/app

# 使用vite初始化vue+ts项目

yarn create @vitejs/app project-name

项目名字，回车
选中 vue 回车
选中 vue-ts 回车

完成

根据步骤执行上图的提示操作

cd project-name

yarn

yarn dev

成功运行
配置host

vite.config.ts 配置host和别名

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import styleImport from "vite-plugin-style-import";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: { // 配置host
    host: "0.0.0.0"
  },
  resolve: {
    alias: {
      "@": path.join(__dirname, "src"),
      "~": path.join(__dirname, "node_modules")
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

tsconfig.json配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 安装vue-router

yarn add vue-router@4

在src目录下建立router文件夹，然后在router文件夹中创建index.ts文件，文件内容如下

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [{
      path: '/',
      name: 'home',
      component: () => import('../views/home/index.vue')
}]
const router = createRouter({
      history,
      routes
})
export default router

1
2
3
4
5
6
7
8
9
10
11
12

在main.ts文件引入

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

const app = createApp(App)

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

1
2
3
4
5
6
7
8

# 安装@types/node

yarn add @types/node -D

let baseURL = "";
// 此时process才存在
if (process.env.NODE_ENV === "development") {
  baseURL = "http://192.168.1.11:3000";
}
export { baseURL };

1
2
3
4
5
6

# 安装sass

用法指南 (opens new window)

yarn add sass  -D
yarn add node-sass -D 
yarn add sass-loader -D

1
2
3

<style lang="scss" scoped>
$bg-pink: deeppink;
.box {
  background-color: $bg-pink;
}
</style>

1
2
3
4
5
6

对于页面中需要的sass变量比较多；可以单独建一个sass文件；即在src下创建一个styles文件，我们在里面存放scss文件，

// 设置主题颜色
$primary-color: yellow;

.bg-yellow {
  background: $primary-color;
  color: $primary-color;
}

1
2
3
4
5
6
7

两种办法调用

局部调用

<style lang="scss" scoped>
@import "../styles/base.scss";
$bg-pink: deeppink;
.box {
  background-color: $bg-pink;
}

.bg-yellow {
  background: $primary-color;
  color: $primary-color;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12

全局注册（main.ts）https://www.cnblogs.com/catherLee/p/13425099.html (opens new window)

新建 src/styles/element-variables.scss

$--color-primary: teal;
/* 改变 超小按钮 的大小 */
$--button-mini-padding-vertical: 3px; // 纵向内边距 原始为7px
$--button-mini-padding-horizontal: 5px; // 横向内边距 原始为15px

/* 改变 icon 字体路径变量，必需 */
$--font-path: "~/element-ui/lib/theme-chalk/fonts";

// @import "/node_modules/element-plus/packages/theme-chalk/src/index.scss";
@import "~/element-plus/packages/theme-chalk/src/index";

1
2
3
4
5
6
7
8
9
10

main.ts 引入样式

import "./styles/element-variables.scss";

编辑

上次更新: 2023/7/11 18:57:41

← 打包配置 vite动态导入图片→