参考: https://blog.csdn.net/qq_44423029/article/details/126378199

1.初始化项目

npm init vite@latest

输入项目名称
选择vue

选择typescript

创建完成之后提示进入到项目目录安装依赖并运行

安装默认依赖

cd angyum-chatgpt-web

切换npm源为taobao(不想切换可跳过)

#查看当前源
npm config get registry

#更换为国内镜像
npm config set registry=http://registry.npm.taobao.org/

安装依赖

npm install

运行查看是否正常

npm run dev

初始配置

到这里就可以使用vscode打开项目了,需要注意的是vue3中使用vscode的插件叫Volar,并且需要禁用原来vue2中的Vetur,按照vscode提示安装插件即可

以下操作都是在vscode的终端中运行的

配置所需依赖

npm install @types/node --save-dev

修改vite.config.ts

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

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

安装Vue-Router

npm install vue-router@4

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

文件内容

import { createRouter, createWebHistory, 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

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')

修改App.vue管理路由

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

<style>

</style>

保存之后重新运行,如果页面路由指向HelloWorld.vue页面就没问题

配置TS文件采用@方式导入

在tsconfig.json文件中添加配置,有注释的两个地方就是添加的配置

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    // 允许字符串用作下标
    "suppressImplicitAnyIndexErrors": true,
     "baseUrl": ".",		
     "paths": {				
      "@/*":[				
        "src/*"				
      ]						
     }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  // ts排除的文件
  "exclude":["node_modules"]
}

配置完成之后重新run一下

安装代码检测工具(建议)

npm install --save-dev eslint eslint-plugin-vue

module.exports = {
	root: true,
	parserOptions: {
		sourceType: 'module'
	},
	parser: 'vue-eslint-parser',
	extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'],
	env: {
		browser: true,
		node: true,
		es6: true
	},
	rules: {
		'no-console': 'off',
		'comma-dangle': [2, 'never'] //禁止使用拖尾逗号
	}
}

安装css预处理器sass

npm install -D sass sass-loader

使用scss示例

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

引入Element-Plus

npm install element-plus --save

main.ts中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// elment-plus2.3.8及之后按下面写,之前: import zhCN from "element-plus/lib/locale/lang/zh-cn";
import zhCN from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App);
app.use(ElementPlus, { locale: zhCn }).use(router).mount('#app')

//全局注册图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

使用Element-Plus组件

清除原Helloworld.vue中的内容,添加element-plus按钮

<template>
  <el-button type="primary" size="default" :icon='Plus'>新增</el-button>
</template>
<script setup lang="ts">
import {Plus} from '@element-plus/icons-vue';

</script>
<style scoped lang="scss">

</style>

重新运行项目,看到如下图效果标识Element-Plus引入成功

安装Pinia(状态管理,类似于vue2中的vuex)

npm install pinia

main.ts全局引入pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";//国际化
import { createPinia } from 'pinia'

const app = createApp(App);
// 实例化 Pinia
const pinia = createPinia();
app.use(ElementPlus, { locale: zhCn }).use(router).use(pinia).mount('#app')

//全局注册图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

配置环境

开发环境

在package.json同目录下新增 .env.development文件

NODE_ENV = development
VITE_NAME='开发环境'
VITE_BASE_URL='http://localhost:8080'

生产环境

在package.json同目录下新增 .env.production文件

NODE_ENV = production
VITE_NAME='生产环境'
# 如果使用 Nginx 代理后端接口(类似配置`/api`通通转发到后端127.0.0.1:8080/api 这样的配置)，那么此处为 '/',无Nginx代理后端则写全请求地址
VITE_BASE_URL='/'

修改package.json

开发提示

全局默认样式
在main.ts中引用了默认的style.css可能里面样式对我们开发有干扰，可自行处理修改style.css默认样式。建议：全删除，自己设置html，body，#app样式。以下供参考

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

使用@代替src路径

比如router目录下的index.ts关于页面的引入就可以使用@符号

其他组件集成

Markdown编辑器集成

vue3的话这里用的是md-editor-v3这个组件,集成方式也比较简单

安装依赖

npm install md-editor-v3 --save

# 使用语言、预览主题扩展库
npm install @vavt/md-editor-extension

示例

示例就直接在HelloWorld.vue文件中覆盖测试了

<template>
  <MdEditor v-model="text" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const text = ref('# Hello Editor')

</script>

目录CONTENT

Vite+Vue3+TS+Element-Plus+Pinia初始化项目