使用vite+vue3创建项目以及配置完整过程

一、新建vue3项目

新建vue项目之前首先要先安装node,yarn,vue脚手架，安装教程网上自行百度。

打开cmd命令面板，创建项目，输入：yarn create vite，然后选择vue,vue-ts。回车之后就会创建好一个vue3项目。

二、配置router，pinia，sass，axios，tailwindcss

2.1安装以及配置vue-router：

安装vue-router命令：yarn add vue-router@4

然后在main.ts中配置router：

1
2
3
const vm = createApp(App)
vm.use(router)
vm.mount('#app')

2.2安装以及配置pinia：

pinia官网上第一句话就是“您将喜欢使用的 Vue 存储库”。能直观的看出这就是一个和vuex功能非常类似的库。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。建议进入官网学习：https://pinia.web3doc.top/

安装pinia命令：yarn add pinia

然后在main.ts中配置pinia：

1
vm.use(createPinia());

2.3安装以及配置sass：

安装sass命令：yarn add sass

在安装sass的时候vite的优势就体现出来了，无需像webpack那边需要安装sass-loader、node-sass这些。vite会自行配置。

2.4安装以及配置axios：

安装axios命令：yarn add axios

配置和vue2一致，百度一堆解决方案。

2.5安装以及配置别名：

配置别名之前需要安装types/node命令：yarn add @types/node

配置vue.config.ts:

1
2
3
4
5
resolve: {
    alias: {
      '@': resolve('./src'),
    },
  },

配置tsconfig.ts：

1
2
3
4
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

2.5安装以及配置tailwindcss：

Tailwind CSS 是一个功能类优先的 CSS 框架。其实大点的公司都有自己的一套规范，个人定制化也是某些UI框架所满足不了的，而Tailwind CSS构建您想要的任何东西。这也是这个css框架越来越流行起来的原因。

安装tailwindcss命令：yarn add tailwindcss@latest postcss@latest autoprefixer@latest

配置tailwind.config.js

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
 purge: [
   './src/**/*.html',
   './src/**/*.js',
 ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

创建一个 CSS 文件tailwind.scss，然后使用：

1
2
3
4
@tailwind base;
@tailwind components;
@tailwind utilities;

最后在main.t s中导入tailwindcss：

1
import '@/assets/style/tailwind.scss'