vite创建vue3+ts项目

为何选择vite：
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：

快速的冷启动，不需要等待打包操作；
即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。（平均一秒run）

本文技术栈是vue3+vue-router+ts+vite+element-plus+pinia。

已经搭建好的基础项目地址：gitee 可以start支持一下，不定时更新成最新技术栈。

初始化项目

（1）在需要创建位置cmd目录下执行

npm init vite@latest

（2）输入项目名称

部分会有一个nodejs版本提示或者缺失脚手架的安装提示，输入y即可。
& 如果有需要对nodejs和npm进行多版本一起管理的可参考（本文的项目搭建不会用到）：nvm和nrm配置，完成多环境动态管理

（3）选择vue

选择vue，版本不同可能有细微差别。（有时出现上下键不能选择，手动输入选项回车就行）

（4）选择 TypeScript

由于版本不同或者是选择语言，选TypeScript相关

（5）此时已经创建完毕

安装默认依赖

可直接根据上图提示执行操作
（1）进入刚刚创建的文件目录

cd winform-web

（2）安装默认依赖
此处切换npm源，安装更快，也可选用自己喜欢的工具安装，如pnpm、cnpm等。

#查看当前源
npm config get registry

#更换为国内镜像
npm config set registry https://registry.npmmirror.com

然后开始安装

npm install

（3）最后运行查看是否正常打开，在文件根目录下 npm run dev（图中我安装选用的pnpm，所以大家根据自己来）

初始化常用配置

此处选用vscode进行编写代码，值得注意的是vue3中使用vscode的插件时需要禁用以前vue2常使用的插件Vetur，而安装Vue Language Features (Volar)插件。不然代码会提示报错。

项目创建成功后需要进行一些常规简单配置。（配置很多，需要研究可自己再研究一下）下面进行简单基础配置：

使用vs打开项目，并打开一个终端

配置别名：

npm install @types/node --save-dev

修改vite.config.ts配置文件代码

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

export default defineConfig({
  plugins: [vue()],
  //解决“vite use `--host` to expose”
  base: './',
  server: {             
    host: '0.0.0.0',	
    // port: 8080,      
    open: true
  },
  resolve:{   
    //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
    alias:[   
      {
        find:'@',
        replacement:resolve(__dirname,'src') 
      }
    ]
  }
})

安装路由

npm install vue-router@4

（1）在src目录下新建router文件夹，在router里创建index.ts文件

（2）index.ts中配置路由
下面@引入方式会报错，原因是还没配置，后面第7步会配置，此处错误可以先不管。

import {
  createRouter,
  createWebHistory,
  type RouteRecordRaw,
} from "vue-router";
// import Layout from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
    //路由初始指向
    path: "/",
    name: "HelloWorld",
    component: () => import("../components/HelloWorld.vue"),
  },
];

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

export default router;

（3）main.ts中导入挂载路由

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

const app = createApp(App);
app.use(router).mount('#app')

（4）修改App.vue管理路由

<script setup lang="ts">
</script>
<template>
  <router-view></router-view>
</template>

<style>

</style>

（5）可以保存后，运行看是否报错。如图打开了路由指向的HelloWorld.vue页面的内容就对了

配置ts文件

新版本，若初始生成了三个文件：
tsconfig.json ：(主配置文件)
tsconfig.node.json：专门为运行在 Node.js 环境下的代码（如 Vite 配置文件 vite.config.ts）提供类型支持。
tsconfig.app.json：应用主体代码的核心配置，用于编译你的 Vue 组件、业务逻辑等。它通常会继承 Vue 官方的推荐配置。

我们修改tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    /* 自己添加 */
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  // ts排除的文件
  "exclude": [
    "node_modules"
  ]
}

老版本，若生成两个文件：只有tsconfig.json、tsconfig.node.json文件

在tsconfig.json文件中添加配置

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true, 
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,

    // ---添加---
    "suppressImplicitAnyIndexErrors": true,	//允许字符串用作下标
    "ignoreDeprecations":"5.0",	//高版本上句报错，此句解决。如此句报错可注释掉
     "baseUrl": ".",			
     "paths": {					
      "@/*":[					
        "src/*"					
      ]							
     }							
     //---------
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  
  //添加
  "exclude":["node_modules"]		// // ts排除的文件

}

配置完成后建议重新run一下

css 预处理器 sass

npm install -D sass sass-loader

写css时使用，看习需求

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
</style>

引入element-plus

element-plus是vue3目前大流行组件库，用法基本和element ui一样

npm install element-plus --save

（1）按需引入组件（官方推荐模式）

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

（2）修改vite.config.ts

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

（3）使用element plus组件

清除原有\src\components\Helloworld.vue内容，添加element-plus按钮

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <el-button type="primary" @click="count++">count is: {{ count }}</el-button>
</template>

<style scoped></style>

运行如下图 ,命令行输入

npm run dev

如下图出现带颜色按钮，说明已经成功安装并配置好element-plus组件

（4）配置element-plus图标

npm install @element-plus/icons-vue

// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

使用方式 element-plus官网

安装pinia（状态管理）

npm install pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态，组件通信。vue3推荐。文末有入门链接，很详细步奏使用pinia

全局引入pinia

// main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import { createPinia } from 'pinia'


const app = createApp(App);
// 实例化 Pinia
const pinia = createPinia()

app.use(router).use(pinia).mount('#app')


// 配置 Element Plus 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

代码质量检测

企业需求一般会加上eslint、husky这些语法校验工具，需要完善这部分的可以参考：vue3项目配置eslint+prettier+husky进行格式化代码

多说两句

1. 上面代码引用了默认的style.css文件（引用位置main.ts中），可能里面样式对我们开发有干扰，可自行处理修改style.css默认样式。建议：全删除，自己设置网页默认样式。以下参考可自行发挥：

简单版

*{
  margin: 0;
  padding: 0;
}
html,body,#app {
  width: 100%;
  height: 100%;
}

想全面的用下面的

/**
 * ENGINE
 * v0.2 | 20150615
 * License: none (public domain)
 */

*,
*:after,
*:before {
  box-sizing: border-box;

  outline: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font: inherit;
  font-size: 100%;

  margin: 0;
  padding: 0;

  vertical-align: baseline;

  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;

  &:before,
  &:after {
    content: '';
    content: none;
  }
}

sub,
sup {
  font-size: 75%;
  line-height: 0;

  position: relative;

  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

input,
textarea,
button {
  font-family: inhert, serif;
  font-size: inherit;

  color: inherit;
}

select {
  text-indent: 0.01px;
  text-overflow: '';

  border: 0;
  border-radius: 0;

  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand {
  display: none;
}

code,
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

#app {
  min-width: 720px;
}

2. 路径在src下的可以用@符号引用

import SysDialog from '@/components/SysDialog.vue';

到此一个基本的vue3项目框架就搭好了。欢迎指正
需要入门pinia的，传送门：pinia 0基础入门