参考: https://blog.csdn.net/qq_44423029/article/details/126378199
1.初始化项目
- 在需要的文件目录下cmd执行
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
- 在根目录创建.eslintrc.js文件
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>
效果
评论区