尚医通(vue3+ts) 跟练--------初始化项目及配置(超详细版)

一、接口

服务器地址:尚医通 - 预约挂号统一平台

医院接口：Swagger UI

公共数据接口：Swagger UI

会员接口：Swagger UI

短信验证码接口：Swagger UI

订单接口：Swagger UI

文件上传接口：Swagger UI

后台用户接口：Swagger UI

微信开放平台官网地址 微信开放平台

查看微信扫码登录文档 微信公众平台

二、初始化项目及配置(超详细)

1.vite构建化工具初始化项目

1.1 准备

准备好node vite需要的版本14.18+,16+

1.1.1 使用npm

npm create vite@lastest

1.2 步骤

project name => 选择Vue => 选择TypeScript => 按提示输入命令

1.2.1 删除一些不必要的文件：

只留App.vue

从main.ts删除style.css引用,

只留以下代码：

// vue3框架提供的方法createApp方法，可以用来创建应用实例方法
import { createApp } from 'vue'
//引入根组件App
import App from './App.vue'
//利用creatApp方法创建应用实例，且将应用实例挂载到挂载点上
const app = createApp(App);
//挂载
app.mount('#app')

找到 package.json 配置文件!

"scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
 },

2.2 src 别名的配置

找到 vite.config.ts 配置文件。

如果红色语法提示请安装@types/node 是 TypeScript 的一个声明文件包，用于描述 Node.js 核心模块和常用的第三方库的类型信息

1.2.2 找到 package.json 配置文件

"scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
 },

1.2.3 找到 vite.config.ts 配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 resolve: {
  alias: {
   "@": path.resolve(__dirname, 'src')
  }
 }
})

如果出现红色语法提示请安装@types/node 是 TypeScript 的一个声明文件包，用于描述 Node.js 核心模块和常用的第三方库的类型信息

npm i @type/node --save-dev

1.2.4 src别名配置

找到tsconfig.json配置文件,找到配置项 compilerOptions 添加配置,这一步的作用是让 IDE 可以对路径进行智能提示

"baseUrl": ".",
  "paths": {
   "@/*": ["src/*"]
  }

2.2 配置scss(清除默认样式)

2.1.1 步骤

1.搜索npm官网 => 搜索reset.scss => 复制代码 => 在src下新建style/reset.scss => 把代码粘贴进去

2.在APP.vue 引入

import '@/style/reset.scss'

3.会有报错提示‘sass not found’,安装sass

npm i sass

ok,配置完成🦌