vue3+TS项目 - 搭建

创建应用

确保你安装了最新版本的node.js（18及以上），进入项目的目录，在命令行中运行以下命令 ：

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，根据自己的需求来选择：

√ 请输入项目名称： ... vue3_demo
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是

启动应用

$ cd <your-project-name>
$ npm install
$ npm run dev

你现在应该已经运行起来了你的第一个 Vue3 项目！

项目初始化配置

删除不需要的组件和代码

项目里面脚手架自动生成的HelloWorld、TheWelcome、TheWelcome等组件、main.css和base.css中的样式、app.vue中的不需要的代码都清除掉。

全局样式

在main.ts中调整代码结构，方便后续使用插件：

import './assets/main.css'

// 创建应用实例的方法
import { createApp } from 'vue'
// 引入根组件
import App from './App.vue'

// 创建应用实例，并将实例挂载到根节点上
const app = createApp(App)
app.mount('#app')

配置自动打开浏览器

package.json的script中配置

"dev": "vite --open"

配置src别名

resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }

配置路径提示

在tsconfig.node.json文件的compilerOptions中添加配置，让vscode有路径提示的功能

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

静态文件配置

清除标签的默认全局样式，访问www.npmjs.com/package/res… 将样式放到src下的style文件夹下的reset.scss文件中，然后在main.css中引入reset.scss。

@import '@/style/reset.scss'

模块拆分

如上图，将项目分成3个大的模块，components目录下创建顶部和底部组件hospital_top/index.vue、hospital_bottom/index.vue，并在main.ts中将其注册为全局组件。

中间区域为在views中定义的路由组件，根据路由切换来显示不同的内容。在views下创建home/index.vue和hospital/index.vue的路由组件。 路由配置，先安装vue-router包，然后再src下创建router/index.ts，再index.ts中配置首页和详情页的路由，最后在main.ts中安装路由器。

import { createRouter, createWebHistory } from "vue-router";
// createRouter创建路由器的实例，用来管理应用的所有路由

export default createRouter({
  // 路由模式设置
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      component: () => import("@/views/home/index.vue")
    },
    {
      path: "/hospital",
      component: () => import("@/views/hospital/index.vue")
    }
  ],
})

在main.ts中安装全局组件和路由器

// 引入组件
import HospitalTop from '@/components/hospital_top/index.vue'
import HospitalBottom from '@/components/hospital_bottom/index.vue'

// 引入路由器
import router from '@/router'

// 创建应用实例，并将实例挂载到根节点上
const app = createApp(App)
// 注册全局组件
app.component('HospitalTop', HospitalTop)
app.component('HospitalBottom', HospitalBottom)
// 注册路由器插件
app.use(router)
app.mount('#app')