vue学习第1期 - 初始化项目

初始化项目

使用官方提供的脚手架命令初始化项目：pnpm create vue@latest

然后会跳出一系列选项可供选择，这是我的创建过程：

然后可以使用 vscode 编辑器打开工程，然后使用命令 pnpm i 下载依赖，最后 pnpm run dev 启动项目。

更推荐使用 pnpm 包管理器

使用 pnpm 安装依赖会有一个eslint依赖拦截告警，需要手动按照提示安装。

创建全局css文件

创建文件 src/assets/styles/global.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

然后在 main.ts 文件引入css文件即可生效：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import '@/assets/styles/global.css'   // 关键

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

保持文件，页面热部署，可以发现内容变紧凑了，说明全局css文件生效了。

格式化配置

习惯末尾有分号，所以将 semi 调整为true。

.prettierrc.json

    {
      "$schema": "https://json.schemastore.org/prettierrc",
      "semi": true,
      "singleQuote": true,
      "printWidth": 100
    }