vue3 使用 vite2 初始化项目

vue3 + vite2 + typescript 配置

使用 vite2 创建项目

1
2
3
4
5
6

# 交换式
yarn create vite


# 非交互式
yarn create vite project-name --template vue-ts

创建项目之后， cd project-name 进入项目， 是用 yarn 安装依赖， 使用 yarn dev 运行程序。

安装 less 支持

less 是 css 的一个超集。

yarn add less

安装之后， 可以在 CompName.vue 中使用 less 语法

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

// CompName.vue
<template>
  <div class="div1">
    <h3>div1</h3>
    <div class="div2">
      <h3>div2</h3>
    </div>
  </div>
</template>

<style lang='less'>
  .div1{
    backgroud-color: skyblue
    .div2{
      backgroud-color: green
    }
  }
</style>

vue3 安装 vue-router支持 vue3 使用 @ 路径别名