尚医通day1 - 静态搭建

1 创建项目

1.  doc 窗口   pnpm create vite  
2. 填写项目名  vue-syt
3. 选择框架 vue
4. typeScript

2整理项目结构

1. 删除 /src/assets/vue.svg 文件，
2. 删除 /src/components  下的 helloWorld.vue
3. 删除app.vue内容，快捷键v3ts 生成模板内容
4. 去掉  /src/style.css 样式文件，删除掉  main.ts 里面 style.css 引入

模板内容方法

1.设置用户代码片段

2新建vue.json 文件 ，，内容

{
	"Print to v3ts": {
		"prefix": "v3ts",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup lang=\"ts\">",
			"",
			"</script>",
			"<style scoped >",
			"</style>",
		],
		"description": "Log output to console"
	}
}

三配置路径

vite+ts +vue3

vite.config.ts

         进入根目录下，代码如下，即可配置 @ 别名

import { defineConfig } from 'vite'
import { resolve } from 'path' //引入node的path模块 这里报错
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{//路径别名
    alias:{
      '@': resolve(__dirname,'./src')
    }
  },
})

tsconfig.Json

         接下来我们进入根目录下的 tsconfig.json 文件，查看是否配置 baseUrl 和 paths 这两个，如果没有的话则进行配置，代码如下：

先检查tsconfig.json文件是否配置了。baseUrl 和 paths
{
  "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,
    "baseUrl": "./",  //是否配置baseUrl
    "paths": { //是否配置paths
      "@/*": ["src/*"]
        }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

安装 types/node 

        而后我们进入 package.json 文件，查看 devDependedcies 下是否存在 @types/node ，如果不存在的话我们需要手动进行安装

pnpm i @types/node --save-dev

浏览器自动打开

package.json 文件加入 --open

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

四 重置项目样式

• npm官网 找到 reset.scss
• 在src下 建一个 style 夹子，reset.scss复制进来
• 引入到 main.ts ，看是否消除了样式 import '@/style/reset.scss'
• 安装scss   pnpm install --save-dev sass