vite2 + vue3 + ts + volar + elementPlus项目搭建（一.项目搭建）

vite2 + vue3 + ts + volar + elementPlus项目搭建（一.项目搭建）

第一章 项目准备

---

---

前言

vue3出来也有一段时间了，刚出beta版本的时候，学过一段时间。后续忙于工作，setup，volar，vite等各种工作都出来，感觉似乎成熟了。这里重新学习一边，顺便记录一下学习过程。下面是我使用的一些工具。

• 环境是win10系统 （穷逼，没mac）
• node是14.15.1版本 （稳定版本就行了，尽量别使用最新版本）
• npm是6.14.8（使用nrm真的香）
• 编辑器使用的vscode（使用volar的时候，在工作区将vetur禁用，不然会有冲突）
• 浏览器是chrome（vue3已经不支持ie了）
• QQ音乐播放器（蹭的朋友的豪华绿钻）

免责声明：本文档只是记录自己学习的一个过程，欢迎大家探讨。但是绝对不是所谓的教程，也没有固定发布时间，只能说些到哪里，什么时候写都是不确定的。

---

一、vite

vite是尤雨溪写的一个构建工具，特点是快，配置简单，非常好用。

附上官方网址链接：vite2中文官网

使用vite2搭建项目可能没有vue-cli那么简单方便。vue-cli集成了平时使用的各种库，而vite除了提供vue和ts的基础配置外，其他的都要自己手动来。下面是vue初始化一个项目的全过程。

1.初始化vue项目

npm create vite
// or
npm create vite@latest

project name: 输入项目名称
select a framework: 选择vue
select a variant: 选择vue-ts

C:\code\demo>npm init vite
npx: installed 6 in 1.71s
√ Project name: ... demo
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in C:\code\demo\demo...

Done. Now run:

  cd demo
  npm install
  npm run dev

2.启动项目

建议使用淘宝镜像，npm i之后npm run dev。至此项目就跑起来了，准备时间是0.3秒左右，可以说非常快了。

  vite v2.7.3 dev server running at:

  > Local: http://localhost:3001/
  > Network: use `--host` to expose

  ready in 327ms.

二、项目配置

1.ts支持

这里需要安装@types/node

npm i @types/node -D

另外在tsconfig.json中配置compilerOptions.types加入node

至此，一些库的引入就不会报错了。

2. 别名配置

引入ts支持之后，配置别名这里只需简单在vite.config.js中就可以设置了。如下图

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

3.模块引入智能提示

tsconfig.json中配置compilerOptions中设置baseUrl和paths

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

引入库

由于vite只是简单集成了vue和typescript，所以一些开发中使用到的库需要手动进行引用和配置。

1. vue-router 地址

安装

npm i vue-router@4 -S

配置

src文件夹下新建router/index.ts

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  { path: '/', component: () => import('../view/Home.vue')},
  { path: '/about', component: () => import('../view/About.vue')},
  { path: '/test', component: () => import('../view/Test.vue')}
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

引用

main.ts中修改代码

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

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

整改

这时候路由是有，但是初始化的文件App.vue需要进行修改。这里是去掉了js部分和css部分，只保留了router-view。以此作为app页面的唯一入口。

<script setup lang="ts">
</script>

<template>
  <router-view></router-view>
</template>

<style>
</style>

2.vuex 地址

安装

npm i vuex@4 -S

配置

src文件夹下新建store/index.ts

import { createStore } from 'vuex'

export default createStore({
  state: {
    ceshi: 0
  },
  mutations: {

  },
  actions: {

  },
  modules: {
    
  }
})

引用

main.ts中修改代码

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


createApp(App).use(router).use(store).mount('#app')

3.elementPlus 地址

安装

npm i element-plus -S

引用

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

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

注明：这里其实还可以对element进行配置，后续补充。

4.scss

安装

npm i sass -D

此处已经无需sass-loader了。

---