vue3+Ts+vite项目配置初始化

一、项目所需环境

1. 首先安装好node，并且node v14版本及以上；
2. vue安装：npm install -g @vue/cli

二、用命令行创建vue3项目

// npm创建
npm create vite@latest 项目名

// yarn创建
 yarn create vite 项目名

三、项目组件所需

√ Select a framework: » Vue
√ Select a variant: » TypeScript
npm install

1. 安装Sass/Less （推荐sass）

// npm创建
 npm add -D sass 
// yarn创建
 yarn add -D sass 

2. 安装router（路由）

// npm创建
 npm install vue-router
// yarn创建
 yarn add vue-router

main.ts文件引入

import { createApp } from 'vue'
import App from './App.vue'
 
//routes
import router from "./routes/index"; 
 
const app= createApp(App)
 
//routes 
app.use(router)  
app.mount('#app')

在src下创建一个 routes 文件夹，再创建一个 index.ts 文件

import { createRouter, createWebHistory } from "vue-router";
 
let routes= [
    {
        path: '/',
        name: 'home',
        component: () => import('../view/index.vue')
    },
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

3. 安装pina

// npm创建
 npm install pinia 
// yarn创建
 yarn add pinia

import { createApp } from 'vue'
import App from './App.vue'
//pinia
import { createPinia } from 'pinia' 
const pinia = createPinia()
 
const app = createApp(App)
 
//pinia
app.use(pinia)
 
app.mount('#app')

3. 安装axios

 npm install axios

4. 安装Element Plus组件库

// npm创建
npm install element-plus --save
// yarn创建
 yarn add element-plus

src/main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// ElementPlus 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

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

5. 自动导入（elementUI推荐安装）

 npm install -D unplugin-vue-components unplugin-auto-import

vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
 
// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			//安装两行后你会发现在组件中不用再导入ref，reactive等
			imports: ['vue', 'vue-router'],
            //存放的位置
			dts: "src/auto-import.d.ts",
		}),
		Components({
			// 引入组件的,包括自定义组件
            // 存放的位置
            dts: "src/components.d.ts",
		}),
	],
 
})

四、配置@别名

根目录 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置@别名
import { resolve } from "path"; 

export default defineConfig({
  plugins: [vue()],
    resolve: {
      // 路径别名
      alias: {
        "@": resolve(__dirname, "./src")
      }
    }
})

根目录 tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    ...
 
    // 配置@别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }, 
  },
}

import { resolve } from “path” 错误时运行以下命令

npm install @types/node --save-dev