使用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'